Scribd
Upload
2 views

Topic 2 - Introduction to CSS

This document provides an introduction to Cascading Style Sheets (CSS), covering its role in web development, syntax, and various styling techniques. Key topics include CSS selectors, stylesheets, the box model, and text formatting. The document also includes quizzes to reinforce learning and examples of CSS properties and their usage.

Uploaded by

Thusharika Thilakaratne
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Topic 2 - Introduction to CSS

This document provides an introduction to Cascading Style Sheets (CSS), covering its role in web development, syntax, and various styling techniques. Key topics include CSS selectors, stylesheets, the box model, and text formatting. The document also includes quizzes to reinforce learning and examples of CSS properties and their usage.

Uploaded by

Thusharika Thilakaratne
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 53

Introduction to CSS Topic 3 - 3.

Learning Outcomes
• By the end of this topic students will be able to:
• Describe the role of CSS in front end web development
• Understand the syntax used in CSS coding
• Explain concepts of CSS Class
• Differentiate between CSS stylesheets
• Identify the box structure of CSS
Introduction to CSS Topic 3 - 3.2

CSS
Basics
Introduction to CSS Topic 3 - 3.3

Cascading Style Sheets (CSS)


• A key tool in web design.
• CSS is the sister technology to HTML.
• Helps to style web pages.
• Control the style and layout of multiple Web pages simultaneously.
• CSS defines HOW HTML elements are to be displayed.
• Styles are normally saved in external .css files.
Introduction to CSS Topic 3 - 3.4

CSS Syntax

A CSS rule has two main parts:


• a selector
• one or more declarations
Introduction to CSS Topic 3 - 3.5

CSS Syntax
• A CSS declaration always ends with a
semicolon.
• Declaration groups are surrounded by curly
brackets.

p{
color:red;
text-align:center;
}
Introduction to CSS Topic 3 - 3.6

CSS Comment
• Comments are used to explain the code.
• Comments are ignored by browsers.
• A CSS comment begins with /* and ends with */, for example:
/*This is a comment*/
p{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
Introduction to CSS Topic 3 - 3.7

CSS id and class


• The id selector is used to specify a style for
a single, unique element.
• The id selector uses the id attribute of the
HTML element, and is defined with a "#".
• The style rule below will be applied to the
element with id="para1":
#para1
{
text-align:center;
color:red;
}
Introduction to CSS Topic 3 - 3.8

Class Selector
• Specifies a style for a group of elements.
• It is used on several elements.
• A particular style can be set for multiple HTML elements with the same
class.
• Class selector uses the HTML class attribute, and is defined with a "."
Example 1: all HTML elements with class="center“ will be center-
aligned:
.center {text-align:center;}
• A specific set of HTML elements should be affected by a class.
Example 2: all p elements with class="center" will be center-
aligned:
p.center {text-align:center;}
Introduction to CSS Topic 3 - 3.9

Quiz - 1
1. What does CSS stand for?
A) Computer Style Sheets
B) Creative Style System
C) Cascading Style Sheets
D) Coding Style Sheets

2. How is a CSS style defined for an HTML element?


A) By using the style attribute inside the HTML element
B) By specifying the element name, followed by curly brackets {} containing the style properties and values
C) By including the element's ID or class in the HTML content
D) All of the above

3. Which of the following is the correct syntax for setting the background color of an element in CSS?
A) background-color: blue;
B) bgcolor: blue;
C) color-background: blue;
D) set-background: blue;
Introduction to CSS Topic 3 - 3.10

Ways to
insert
style
sheets
Introduction to CSS Topic 3 - 3.11

How to Insert CSS


•Three Ways to Insert CSS style sheet:
• External style sheet
• Internal style sheet
• Inline style
Introduction to CSS Topic 3 - 3.12

External Style
Sheet
• An external style sheet is used when the
style is to be applied to multiple pages.
• Changes in one file reflects on multiple
sheets.
• <link> tag is used to link webpages to the
style sheet.
<head>
<link rel="stylesheet"
type="text/css"
href=“samplestyle.css">
</head>
Introduction to CSS Topic 3 - 3.13

External Style Sheet


• Any text editor can be used e.g. Notepad++.
• No html tags allowed.
• File is saved with a .css extension.

• Example:
hr {color:sienna;}
p {margin-left:20px;}
body
{background-image:url("images/background.gif");
}
Introduction to CSS Topic 3 - 3.14

Internal Style Sheet


• Required for scenarios where a single
document has a unique style.
• <style> tag is used to define the styling for
the page Example :
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body
{background-image:url("images/back.gif");
}
</style>
Introduction to CSS Topic 3 - 3.15

Inline Styles
• Style property is used in-line of the HTML
tag.
• Can contain any CSS property.
• Example:

<p style="color:sienna;margin-
left:20px;">
This is a paragraph.
</p>
Introduction to CSS Topic 3 - 3.16

Cascading Order
• When multiple styles are used – HTML uses an order of priority.
• The priority order from low to high is:
• Browser default
• External style sheet
• Internal style sheet (in the head section)
• Inline style (inside an HTML element)
• The inline style (inside an HTML element) has the highest priority and
overrides the styles defined inside the <head> tag, or in an external
style sheet, or in a browser (a default value).
Introduction to CSS Topic 3 - 3.17

Quiz - 2
1. What is an external CSS stylesheet?
A) A CSS file embedded within an HTML document
B) A separate CSS file linked from an HTML document
C) A CSS rule defined in the head section of an HTML document
D) Inline styles applied directly to HTML elements

2. How do you link an external CSS stylesheet to an HTML document?


A) <link rel="stylesheet" type="text/css" href="style.css">
B) <css href="style.css">
C) <stylesheet>style.css</stylesheet>
D) <style src="style.css"></style>

3. Which of the following CSS rules has the highest specificity?


A) Element selector (e.g., div)
B) Class selector (e.g., .classname)
C) ID selector (e.g., #idname)
D) Inline style
Introduction to CSS Topic 3 - 3.18

Css
backgrou
nd
Introduction to CSS Topic 3 - 3.19

CSS Background
•CSS properties used for background effects:

• background-color
• background-image
• background-repeat
Introduction to CSS Topic 3 - 3.20

Background Color
• background-color property

• Specifies the background color of an element.


• The background color of a page is defined in the body selector.

• Example:
• body {background-color:#b0c4de;}
Introduction to CSS Topic 3 - 3.21

Background Image
• background-image property
•

• Specifies an image to use as the background of an element.


• By default, the image is repeated so it covers the entire element.

• Example:
• body {background-image:url("paper.gif");}
Introduction to CSS Topic 3 - 3.22

Background
Image
• By default, a background image repeats
across pages.
• To avoid repetition, use the background-
repeat property:

• Example: body
{
background-
image:url(“me.png");
background-repeat:no-repeat;
}
Introduction to CSS Topic 3 - 3.23

CSS Box model


Introduction to CSS Topic 3 - 3.24

CSS Box
Model • Defines the layout and spacing of HTML element on a website.
• 4 key components: margins, borders, padding, and content.

div {
width: 300px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
Introduction to CSS Topic 3 - 3.25

CSS Border Style


• The border-width property specifies the width of the four
borders.
• The width can be set as a specific size:
• px
• pt p.one {
• cm border-style: solid;
border-width: 5px;
• em }
• Three pre-defined values: thin, medium, or thick
p.two {
border-style: solid;
border-width: medium;
}
Introduction to CSS Topic 3 - 3.26

CSS Border Style


•p.one {
• border-style: solid;
• border-width: 5px 10px; /* 5px top and bottom, 20px on the sides */
•}
•p.two {
• border-style: dotted;
• border-width: medium; /* medium border-width*/
•}
•p.three {
• border-style: solid;
• border-width: 8px 10px 4px 5px; /* 8px top, 10px right, 4px bottom and
5px left */
•}
CSS Border
Introduction to CSS Topic 3 - 3.27

Style
• border-style property has various properties of the border display:
• dotted - a dotted border p.dotted {border-style: dotted;}
• dashed - a dashed border p.dashed {border-style: dashed;}
• solid - a solid border p.solid {border-style: solid;}
• double - a double border p.double {border-style: double;}
• groove - a 3D grooved border p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
• ridge - a 3D ridged border p.inset {border-style: inset;}
• inset - a 3D inset border p.outset {border-style: outset;}
• outset - a 3D outset border p.none {border-style: none;}
• none - no border p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed
• hidden - a hidden border solid double;}
• The border-style property can have from one to four values: for the top
border, right border, bottom border, and the left border.
Introduction to CSS Topic 3 - 3.28

CSS Margins
• Adds space around elements, outside of any defined borders.

• Margins are specified on each side of an element:


• E.g. •p {
margin-top: 100px; margin-bottom: 100px; margin-right: 150px;
margin-left: 80px;
}
•p {
margin: 25px 50px 75px 100px;
}
•p {
margin: 25px;
}
Introduction to CSS Topic 3 - 3.29

CSS Padding
• Creates space around an element's content, inside of any defined borders.

div {
padding-top: 50px;
padding-right: 100px;
padding-bottom: 50px;
padding-left: 100px;
}
Introduction to CSS Topic 3 - 3.30

Text formatting
in css
Introduction to CSS Topic 3 - 3.31

Text Color
Text Color
Sets the color of the text.
• Specified by: color: color|initial|inherit;

body { Value Description


color: blue;
}
color Specifies the text color.
h1 { initial Sets this property to its default value.
color: #00ff00;
} inherit Inherits this property from its parent
element.
Introduction to CSS Topic 3 - 3.32

Text Alignment

Sets the horizontal alignment of a text.


• Specified by: text-align:center|right|left|justify

h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
Introduction to CSS Topic 3 - 3.33

Vertical-align Property

Sets the vertical alignment of an element.

• Specified by: vertical-align: baseline|length|sub|super|top|text-top|


middle|bottom|text-bottom|initial|inherit;

img {
vertical-align: text-top;
}
Introduction to CSS Topic 3 - 3.34

Vertical-align Property Values and


Descriptions
Value Description
baseline Align the baseline of the element with the baseline of the parent element. This is default
length Raises or lower an element by the specified length. Negative values are allowed
% Raises or lower an element in a percent of the "line-height" property. Negative values are
allowed
sub Aligns the element as if it was subscript
super Aligns the element as if it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Text
Introduction to CSS Topic 3 - 3.35

Decoration
Set or remove decorations from text.

• Specified by: text-decoration:none|overline|underline|line-through;

a{
text-decoration: none;
}
h1 {
text-decoration: overline;
}
Text
Introduction to CSS Topic 3 - 3.36

Transformation
• Specifies the uppercase and lowercase letters in a text:

text-transform: none|capitalize|uppercase|lowercase|initial|inherit;

p.class1 {
text-transform: uppercase;
}
h1{
text-transform:lowercase;
}
Introduction to CSS Topic 3 - 3.37

Text Indentation
• Specify the indentation of the first line of a text:
text-indent: length|initial|inherit;

Value Descriptions
p{
text-indent: 50px; length Defines a fixed indentation in px, pt, cm, em, etc. Default
value is 0.
}
% Defines the indentation in % of the width of the parent
element.
It may be both in initial Sets this property to its default value.
percentage or in pixels!
inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.38

Word-spacing Property
• Specify the space between words:
word-spacing: normal|length|initial|inherit;
Value Description
normal Defines normal space between words . This is the
default.
p{
word-spacing: 30px; length Defines an extra space between words in px, pt, cm,
em, etc.
} Negative values are allowed.
initial Sets this property to its default value.

inherit Inherits this property from its parent element.


Introduction to CSS Topic 3 - 3.39

Letter-spacing Property
Is used to control the space between individual characters.
• Specified by: letter-spacing: normal|length|initial|inherit;

Value Description
h1 {
letter-spacing: 2px; normal No extra space between characters. This is the default.
} length Defines an extra space between characters (negative
values are allowed).
h2 {
letter-spacing: -3px; initial Sets this property to its default value.
} inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.40

Direction Property
Defines the direction of text within HTML elements.

• Specified by: direction: ltr|rtl|initial|inherit ;

Value Description
div { ltr The writing direction is left-to-right. This is the
default.
direction: rtl;
} rtl The writing direction is right-to-left.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Introduction to CSS Topic 3 - 3.41

Text-shadow Property
Is used to apply a shadow effect to text within HTML elements.
• Specified by: text-shadow: h-shadow v-shadow blur-radius color|none|
initial|inherit; Value Description

h-shadow Required. The position of the horizontal


shadow. Negative values are allowed.
h1 { v-shadow Required. The position of the vertical
text-shadow: 2px 2px shadow. Negative values are allowed.
#ff0000; blur-radius Optional. The blur radius. Default value is 0.
} color Optional. The color of the shadow.
none Default value. No shadow.
initial Sets this property to its default value.
inherit Inherits this property from its parent
element.
Introduction to CSS Topic 3 - 3.42

Css font and


styling
Introduction to CSS Topic 3 - 3.43

CSS Font

Font properties collectively provide extensive control over the


appearance of text within webpages.
font: font-style font-variant font-weight font-size/line-height font-
family|caption|icon|menu|message-box|small-caption|status-bar|
initial|inherit;
p.ex1 {
font: 15px arial, sans-
serif;
}
Introduction to CSS Topic 3 - 3.44

CSS Font
Font-style p.italic {
font-style: italic
font-style: normal|italic|oblique|initial|inherit; }

Font-variant
p.small {
font-variant: normal|small-caps|initial|inherit; font-variant: small-caps;
}
Introduction to CSS Topic 3 - 3.45

CSS Font
Font-weight p.normal {
font-weight: normal;
font-weight: normal|bold|bolder|lighter|number|initial|inherit; }

Font-size h1 {
font-size:medium|xx-small|x-small|small|large|x- font-size: 250%;
}
large|xx large|smaller|larger|length|initial|inherit;
h1 {
Note: font-size: 2.5em; /* 40px/16=2.5em
Smaller-Sets the font-size to a smaller size than the parent element */
%-Sets the font-size to a percent of the parent element's font size }

p{
font-family: Times New
Font-family Roman;
font-family: font|initial|inherit; }
Introduction to CSS Topic 3 - 3.46

Styling Links
a:link - a normal, unvisited link a:hover - a link when the user’s mouse over it
a:visited - a link the user has visited a:active - a link the moment it is clicked
/* unvisited link */ •/* mouse over link */
a:link { •a:hover {
color: #FF0000; •color: #FF00FF;
text-decoration: none;
•background-color: #FF704D;
}
•}
/* visited link */
a:visited { •/* selected link */ a:active {
color: #00FF00; •color: #0000FF;
text-decoration: underline;
} •}
Notes: a:hover MUST come after a:link and a:visited and
a:active MUST come after a:hover
Introduction to CSS Topic 3 - 3.47

CSS colors
Introduction to CSS Topic 3 - 3.48

CSS Colors
•<h1 style="color:Tomato;">Tomato Colour</h1>
Colors can be set by: •<h1 style="color:DodgerBlue;">Dodger Blue Colour </h1>
• By color names •<h1 style="color:MediumSeaGreen;"> Medium Sea Green
Colour</h1>
• By RGB values •<h1 style="border:2px solid Tomato;">Hello World</h1>
• By hex values •<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
• By RGBA •<h1 style="border:2px solid Violet;">Hello World</h1>
•<h1 style="background-color:rgb(255, 99,71);">...</h1>
• By HSL •<h1 style="background-color:#ff6347;">...</h1>
•<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
•<h1 style="background-color:rgba(255, 99, 71,0.5);">...</h1>
•<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
Introduction to CSS Topic 3 - 3.49

RGB Value
• Colour can be specified as an RGB value:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of
the color between 0 and 255.
For example:
• rgb(255, 0, 0) - displayed as red
• rgb(0,0,0) – displayed as black
• rgb(255,255,255) – displayed as white
Introduction to CSS Topic 3 - 3.50

RGBA Value
• An RGBA color value is specified with alpha (for opacity):
• rgba(red, green, blue, alpha)
• Alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (not transparent at all).
Introduction to CSS Topic 3 - 3.51

HEX Value
• Color can be specified using a hexadecimal value in the form:
#rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its
highest value (ff) and the others are set to the lowest value (00).
Introduction to CSS Topic 3 - 3.52

References
• CSS Definition:
• Mozilla Developer Network (MDN). (n.d.). What is CSS? - Learn web development. Available at:
https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS
• CSS Syntax:
• Mozilla Developer Network (MDN). (n.d.). CSS: Cascading Style Sheets. Available at: https://developer.mozilla.org/en-US/docs/Web/CSS
• Wikipedia. (n.d.). CSS. Available at: https://en.wikipedia.org/wiki/Cascading_Style_Sheets
• CSS Class:
• W3Schools. (n.d.). CSS Introduction. Available at: https://www.w3schools.com/css/css_intro.asp
• CSS Style Sheets:
• Mozilla Developer Network (MDN). (n.d.). CSS: Cascading Style Sheets. Available at: https://developer.mozilla.org/en-US/docs/Web/CSS
• CSS Background:
• W3Schools. (n.d.). CSS Backgrounds. Available at: https://www.w3schools.com/css/css_background.asp
• CSS Box Model:
• Mozilla Developer Network (MDN). (n.d.). Box model. Available at:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
Topic 3 – Introduction to CSS

Any Questions?

You might also like