Chapter 3
Cascading Style Sheet (CSS)
1
CSS Introduction
❖ What is CSS
❑CSS stands for Cascading Style
Sheets.
❑It is a style sheet language which is
used to describe the look and
formatting of a document written
in markup language.
2
CSS Introduction
❖ What is CSS
❑ CSS is the language we use to style
a Web page.
❑ CSS describes how HTML
elements are to be displayed on
screen, paper, or in other media
❑CSS saves a lot of work. It can
control the layout of multiple web
pages all at once
3
Benefits of CSS
❖ These are the three major benefits of CSS:
1) Solves a big problem: Before CSS, tags like font, color, background style,
element alignments, border and size had to be repeated on every web page.
2) Saves a lot of time: CSS style definitions are saved in external CSS files so
it is possible to change the entire website by changing just one file.
3) Provide more attributes: CSS provides more detailed attributes than plain
HTML to define the look and feel of the website.
4
CSS Syntax & how to
❑ A CSS rule-set consists of a selector and a declaration block:
❑ Selector: Selector indicates the HTML element you want to style. It could
be any tag like <h1>, <title> etc.
❑ Declaration Block: The declaration block can contain one or more
declarations separated by a semicolon.
▪ For the above example, there are two declarations:
color: yellow;
font-size: 11 px; 5
…CSS Syntax
❑ Each declaration contains a property name
and value, separated by a colon.
❑ Property: A Property is a type of attribute of
HTML element. It could be color, border etc.
❑ Value: Values are assigned to CSS properties.
❑ In the above example, value "yellow" is
assigned to color property.
6
CSS Selector
❑ CSS selectors are used to select the content you want to style.
❑ Selectors are the part of CSS rule set.
❑ CSS selectors select HTML elements according to its id, class, type, attribute etc.
❑ There are several different types of selectors in CSS.
[Link] Element Selector
[Link] Id Selector
[Link] Class Selector
[Link] Universal Selector
[Link] Group Selector 7
CSS Element Selector
❑ The element selector selects the HTML element by name.
o Here, all <p> elements on the page will be center-aligned, with a red text color
Example :
<style>
p{ text-align: center; color: blue; }
</style>
8
CSS Id Selector
❑ The id selector selects the id attribute of an HTML element to select a specific element.
❑ The id of an element is unique within a page, so the id selector is used to select one unique
element!
❑ It is written with the hash character (#), followed by the id of the element.
❑ Note: An id name cannot start with a number!
❑ Example
<style>
#para1 { text-align: center; color: blue; }
</style>
<p id="para1">Hello [Link]</p>
9
CSS Class Selector
❑ The class selector selects HTML elements with a specific class attribute.
❑ It is used with a period character . (full stop symbol) followed by the class name.
❑ A class name should not be started with a number.
<html> <head> <style>
.center { text-align: center; color: blue; }
</style></head> <body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body> </html> 10
CSS Class Selector for specific element
❑ If you want to specify that only one specific HTML element should be affected
then you should use the element name with class selector.
<!DOCTYPE html>
<html> <head> <style>
[Link] { text-align: center; color: blue; }
</style> </head> <body>
<h1 class="center">This heading is not affected</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body> </html>
11
CSS Universal Selector
❑ The universal selector is used as a wildcard character.
❑ It selects all the elements on the pages.
<!DOCTYPE html>
<html> <head> <style>
* { color: green; font-size: 20px; }
</style> </head> <body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
<p id="para1">Me too!</p> <p>And me!</p>
</body> </html>
12
CSS Group Selector
❑ The grouping selector is used to select all the elements with the same style
definitions.
❑ Grouping selector is used to minimize the code. Commas are used to separate
each selector in grouping.
<!DOCTYPE html> <html> <head> <style>
h1, h2, p { text-align: center; color: blue; }
</style> </head><body>
<h1>Hello Students</h1>
<h2>Hello Students(In smaller font)</h2>
<p>This is a paragraph.</p> </body> </html>
13
CSS Group Selector
14
How to add CSS
❑ CSS is added to HTML pages to format the document according to
information in the style sheet.
❑ There are three ways to insert CSS in HTML documents.
1. Inline CSS
2. Internal CSS
3. External CSS
15
Inline CSS
❑ We can apply CSS in a single element by inline CSS technique.
❑ This method mitigates some advantages of style sheets so it is advised to use this
method sparingly.
❑ If you want to use inline CSS, you should use the style attribute to the relevant tag.
❑ Syntax:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
❑ Example:
<h2 style="color:red;margin-left:40px;"> Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>
16
Disadvantages of Inline CSS
❑ You cannot use quotations within inline CSS. If you use quotations the
browser will interpret this as an end of your style value.
❑ These styles cannot be reused anywhere else.
❑ These styles are tough to be edited because they are not stored at a single
place.
❑ It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
❑ Inline CSS does not provide browser cache advantages.
17
Internal CSS
❑ The internal style sheet is used to add a unique style for a single document.
❑ It is defined in <head> section of the HTML page inside the <style> tag.
Example:
<!DOCTYPE html>
<html> <head> <style>
body { background-color: linen; }
h1 { color: red; margin-left: 80px; }
</style> </head> <body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body> </html>
18
External CSS
❑ The external style sheet is generally used when you want to make changes on
multiple pages.
❑ It is ideal for this condition because it facilitates you to change the look of the entire
web site by changing just one file.
❑ It uses the <link> tag on every pages and the <link> tag should be put inside the
head section.
❑ Example:
<head>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
19
External CSS
❑ The external style sheet may be written in any text editor but must be saved
with a .css extension.
❑ This file should not contain HTML elements.
File: [Link]
body {background-color: lightblue; }
h1 {color: navy; margin-left: 20px; }
❑ Note: You should not use a space between the property value and the unit.
❑ For example: It should be margin-left:20px not margin-left:20 px. 20
CSS Comments
❑ CSS comments are generally written to explain your code.
❑ It is very helpful for the users who reads your code so that they can easily understand the
code.
❑ Comments are ignored by browsers. Comments are single or multiple lines statement
and written within /*............*/ .
<!DOCTYPE html> <html> <head> <style>
p { color: blue;
/* This is a single-line comment */
text-align: center; }
/* This is
a multi-line comment */
</style> </head> <body>
<p>Hello [Link]</p> <p>This statement is styled with CSS.</p> <p>CSS comments are ignored
by the browsers and not shown in the output.</p> </body> </html> 21
CSS Colors
❑ Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
❖ Color Names
❑ In HTML, a color can be specified by using a color name like Tomato, Orange,
DodgerBlue, MediumSeaGreen, Gray, SlateBlue, Violet, LightGray etc.
❑ Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<!— background color -->
<p style="color:MediumSeaGreen;"></p> <!-- Text Color -->
<h1 style="border:2px solid Violet;">Hello World</h1>
<!-- Border Color -->
22
CSS Colors
❖ Color Values
❑ Example: color:tomato; or color:rgb(255, 99, 71); or color:#ff6347;
❖ RGB Value
❑ In HTML, a color can be specified as an RGB value, using this formula: 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) ---- red, rgb(0, 0, 0)----black. rgb(255, 255, 255) to display
white.
❖ HEX Value
❑ In HTML, a 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,
23
CSS Background Color
▪ You can set the background color for HTML elements:
24
CSS Text Color
▪ You can set the color of text:
25
CSS Border Color
▪ You can set the color of borders:
26
CSS Colors
27
CSS Background
❖ This property is used to define Property Description
the background effects on background Sets all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
element. background-clip Specifies the painting area of the background
❖ There are different CSS background-color Sets the background color of an element
background properties that background-image Sets the background image for an element
affect the HTML elements: background-origin Specifies where the background image(s) is/are positioned
background-position Sets the starting position of a background image
background-repeat Sets how a background image will be repeated
background-size Specifies the size of the background image(s)
28
CSS Background
❖ Example:
<!DOCTYPE html>
<html><head> <style>
h2,p{
background-color:#b0d4de; /*color name/rgb value is allowed too*/
background-image: url(“[Link]”);
background-repeat: no-repeat; /*other values: repeat-x/repeat-y*/
background-attachment: fixed;
background-position: center; /*other values:left/right*/ }
</style> </head> <body>
<h2>My first CSS page.</h2>
<p>This is an example of CSS background properties</p>
</body> </html>
29
CSS Border
❖ The CSS border is a shorthand property used to set the border on an
element.
❖ The CSS border properties are use to specify the style, color and size of the
border of an element.
❖ The CSS border properties are: border-style, border-color, border-width,
border-radius etc.
30
CSS Border
❑ Example:
<html><head><style>
div{
border-style:solid;
border-width:2px;
border-color:blue;
border-radius:5px;
}
</style></head><body>
<div><header>DMU Website</header>
<nav><a href=”#”>Home</a></nav>
<section><h1>News</h1><p>The First news…</p></section>
<footer>Developed by:</footer>
</div></body></html>
31
CSS Margin
❑ CSS Margin property is used to define the space around elements.
❑ It is completely transparent and doesn't have any background color.
❑ It clears an area around the element.
❑ Top, bottom, left and right margin can be changed independently using
separate properties.
❑ You can also change all properties at once by using shorthand margin
property.
32
CSS Margin
❑ Example
<!DOCTYPE html> <html>
<head>
<style>
p { background-color: pink; }
[Link] { margin-top: 50px; margin-bottom: 50px;
margin-right: 100px; margin-left: 100px;
}
</style> </head> <body>
<p>This paragraph is not displayed with specified margin. </p>
<p class="ex">This paragraph is displayed with specified margin.</p>
</body> </html>
33
Margin - Individual Sides
❑ CSS has properties for specifying the margin for each side of an element:
▪ margin-top
▪ in-right
▪ margin-bottom
▪ margin-left
❑ All the margin properties can have the following values:
▪ auto - the browser calculates the margin
▪ length - specifies a margin in px, pt, cm, etc.
▪ % - specifies a margin in % of the width of the containing element
▪ inherit - specifies that the margin should be inherited from the parent element
❖ Tip: Negative values are allowed. 34
Margin -Example
❑ Set different margins for all four sides of a <p> element:
p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
35
Margin - Shorthand Property
❑ To shorten the code, it is possible to specify all the margin properties in
one property.
❑ The margin property is a shorthand property for the following individual
margin properties: margin-top, margin-right, margin-bottom and margin-
left
36
Margin - Shorthand Property
❑ If the margin property has four values:
o margin: 25px 50px 75px 100px;
▪ top margin is 25px
▪ right margin is 50px
▪ bottom margin is 75px
▪ left margin is 100px
37
Margin - Shorthand Property
❑ If the margin property has three values:
o margin: 25px 50px 75px;
▪ top margin is 25px
▪ right and left margins are 50px
▪ bottom margin is 75px
38
Margin - Shorthand Property
❑ If the margin property has two values:
o margin: 25px 50px;
▪ top and bottom margins are 25px
▪ right and left margins are 50px
39
Margin - Shorthand Property
❑ If the margin property has one values:
o margin: 25px;
▪ all four margins are 25px
40
The auto Value
❑ You can set the margin property to auto to horizontally center the element within
its container.
❑ The element will then take up the specified width, and the remaining space will be
split equally between the left and right margins.
div {
width: 300px;
margin: auto;
border: 1px solid red;
} 41
The inherit Value
❑ This example lets the left margin of the <p class="ex1"> element be inherited from the
parent element (<div>):
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
42
CSS Padding
❑ CSS Padding property is used to define the space between the element content
and the element border.
❑ It is different from CSS margin in the way that CSS margin defines the space
around elements.
❑ CSS padding is affected by the background colors. It clears an area around the
content.
❑ Top, bottom, left and right padding can be changed independently using separate
properties.
❑ You can also change all properties at once by using shorthand padding property.
43
Padding - Individual Sides
❑ CSS has properties for specifying the padding for each side of an element:
▪ padding-top
▪ padding-right
▪ padding-bottom
▪ padding-left
❑ All the padding properties can have the following values:
▪ length - specifies a padding in px, pt, cm, etc.
▪ % - specifies a padding in % of the width of the containing element
▪ inherit - specifies that the padding should be inherited from the parent element
❖ Note: Negative values are not allowed.
44
Padding - Shorthand Property
❑ To shorten the code, it is possible to specify all the padding properties in
one property.
❑ The padding property is a shorthand property for the following individual
padding properties: padding-top, padding-right, padding-bottom,
padding-left
45
Padding - Shorthand Property
❑ If the padding property has four values:
▪ padding: 25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
o bottom padding is 75px
o left padding is 100px
46
Padding - Shorthand Property
❑ If the padding property has three values:
▪ padding: 25px 50px 75px;
o top padding is 25px
o right and left paddings are 50px
o bottom padding is 75px
47
Padding - Shorthand Property
❑ If the padding property has two values:
▪ padding: 25px 50px;
o top and bottom paddings are 25px
o right and left paddings are 50px
48
Padding - Shorthand Property
❑ If the padding property has one values:
▪ padding: 25px;
o all four paddings are 25px
49
CSS Height and Width
❑ The height and width properties are used to set the height and width of an
element.
❑ Note: The height and width properties do not include padding, borders, or
margins; they set the height/width of the area inside the padding, border,
and margin of the element!
50
CSS height and width Values
❑ The height and width properties may have the following values:
▪ auto - This is default. The browser calculates the height and width
▪ length - Defines the height/width in px, cm, etc.
▪ % - Defines the height/width in percent of the containing block
▪ initial - Sets the height/width to its default value
▪ inherit - The height/width will be inherited from its parent value
51
CSS Text
❑ CSS has different properties to change the appearance of a text.
❑ It consists of CSS properties for text color, alignment, decoration,
transformation, indentation, spacing, shadow etc.
52
CSS Text
❑ Example:
<html><head><style>
article{line-height:20px; border:1px solid blue; border-radius:3px;}
h1{color:blue; text-align:center; text-decoration:underline;
text-transform:capitalize; text-shadow:3px 2px yellow;}
p{color:#009933;text-align:justify;word-spacing:2px;text-indent:3px;}
</style></head><body><header>DMU Website</header>
<nav><a href=”#”>Home</a></nav>
<section><article>
<h1>What is new?</h1><p> To Debre Markos University …..</p>
</article></section>
<footer>Developed by:</footer></body></html>
53
CSS Fonts
❑ The CSS font properties define the font family, boldness, size, and the style
of a text.
❖ CSS Font Families
❑ In CSS, there are two types of font family names:
1. generic family - a group of font families with a similar look (like "Serif" or
"Monospace")
2. font family - a specific font family (like "Times New Roman" or "Arial")
Example:
h1{font-size:2em; font-weight: bold; }
p{font-size:12px; font-family: "Times New Roman", Times, serif;}
54
CSS Links
❑ Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
Example: a { color: hotpink; }
❑ In addition, links can be styled differently depending on what state they are in.
❑ The four links states are:
▪ a:link - a normal, unvisited link a:link { color: red; }
▪ a:visited - a link the user has visited(a:visited { color: green; })
▪ a:hover - a link when the user moves over it a:hover { color: hotpink; }
▪ a:active - a link the moment it is clicked a:active { color: blue; }
55
Link - Background Color
❑The background-color property can be used to specify a background color for
links:
❑Example
a:link { background-color: yellow; }
a:visited { background-color: cyan; }
a:hover { background-color: lightgreen; }
a:active { background-color: hotpink; }
56
Link - Text Decoration
❑ The text-decoration property is mostly used to remove underlines from links:
Example
a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
a:active { text-decoration: underline; }
57
Advanced - Link Buttons
❑This example demonstrates a more advanced example where we combine
several CSS properties to display links as boxes/buttons:
❑Example
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active { background-color: red; }
58
Navigation bar
❑A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:
Example
<ul>
<li><a href="[Link]">Home</a></li>
<li><a href="[Link]">News</a></li>
<li><a href="[Link]">Contact</a></li>
<li><a href="[Link]">About</a></li>
</ul>
Now let's remove the bullets and the margins and padding from the list:
ul { list-style-type: none; margin: 0; padding: 0; }
59
Navigation bar
❑Vertical Navigation Bar: To build a vertical navigation bar, you can style the
<a> elements inside the list, in addition to the code above:
Example: li a { display: block; width: 60px; }
Example
ul { list-style-type:none; margin:0; padding:0; width:60px; }
li a { display: block;}
60
Navigation bar
❑Vertical Navigation Bar Examples
Example
ul { list-style-type:none; margin:0; padding:0; width:200px;
background-color: #f1f1f1; }
li a{display:block; color:#000;padding:8px 16px;text-decoration:none;}
/* Change the link color on hover */
li a:hover {background-color:#555; color:white; }
61
Horizontal Navigation Bar
❑ There are two ways to create a horizontal navigation bar. Using inline or floating list
items.
❑ Example: li { display: inline; }
❑ display: inline; - By default, <li> elements are block elements.
❑ Here, we remove the line breaks before and after each list item, to display them on one
line
❑ Floating: Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:
❑ Example: li { float: left; }
62
a { display: block; padding: 8px; background-color: #dddddd;}
…Navigation bar
Example
ul {list-style-type:none; margin:0; padding:0;
overflow: hidden; background-color: #333; }
li { float:left; }
li a { display:block; color:white; text-align:center;
padding: 14px 16px; text-decoration: none; }
/* Change the link color to #111 (black) on hover */
li a:hover { background-color: #111; }
Border Dividers
Add the border-right property to <li> to create link dividers:
Example
/* Add a gray right border to all list items, except the last item (last-child) */
li { border-right: 1px solid #bbb; }
li:last-child { border-right: none; }
63
CSS Tables
❖Table Borders
❑To specify table borders in CSS, use the border property. The example below
specifies a black border for <table>, <th>, and <td> elements:
❑Example
table, th, td { border: 1px solid black; }
❑Table Width and Height
table { width: 100%; }
th { height: 50px; } 64
CSS Tables
❖Horizontal Alignment
❑The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or
Example: th { text-align: left; }
❖Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
Example: td { height: 50px; vertical-align: bottom;} 65
CSS Forms
❖ Styling Input Fields
❑ Use the width property to determine the width of the input field:
Example: input { width: 100%; }
❑ The example above applies to all <input> elements.
❑ If you only want to style a specific input type, you can use attribute selectors:
▪ input[type=text] - will only select text fields
▪ input[type=password] - will only select password fields
▪ input[type=number] - will only select number fields etc..
66
CSS Forms
❖Bordered Inputs
❑Use the border property to change the border size and color, and use the
border-radius property to add rounded corners:
input[type=text] {
border: 2px solid red;
border-radius: 4px;
}
❖ Focused Inputs
✓ By default, some browsers will add a blue outline around the input when it gets
focus (clicked on).
✓ You can remove this behavior by adding outline: none; to the input.
✓ Use the :focus selector to do something with the input field when it gets focus: 67
CSS Forms
input[type=text]:focus {
background-color: lightblue;
input[type=text]:focus {
border: 3px solid #555;
❖ Input with icon/image
❑ If you want an icon inside the input, use the background-image property and position it
with the background-position property.
❑ Also notice that we add a large left padding to reserve the space of the icon: 68
CSS Forms
input[type=text] {
background-color: white;
background-image: url('[Link]');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
69
CSS Images
❑ Rounded Images: Use the border-radius property to create rounded images:
Example: img { border-radius: 8px; }
❑ Circled Image: Example: img { border-radius: 50%; }
❑ Responsive Images: Responsive images will automatically adjust to fit the size of the
screen.
❑ Example
img { max-width: 100%; height: auto; }
70
…CSS Images
Image gallery: CSS can be used to create an image gallery. Example:
<html> <head> <style>
[Link]{margin:5px; border:1px solid #ccc; float:left;
width:180px; }
[Link]:hover { border:1px solid #777; }
[Link] img { width:100%; height:auto; }
[Link] { padding:15px; text-align:center; }
</style></head><body>
<div class="gallery"> <a target="_blank" href="[Link]"> <img src="[Link]" alt="Cinque Terre" width="300"
height="200"></a>
<div class="desc">Add a description of the image here</div>
</div>
71
CSS Images
<div class="gallery"><a target="_blank" href="[Link]">
<img src="[Link]" alt="Forest" width="300" height="200"></a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery"> <a target="_blank" href="[Link]">
<img src="[Link]" alt="Northern Lights" width="300" height="200">
</a>
<div class="desc">Add a description of the image here</div></div>
<div class="gallery"><a target="_blank" href="[Link]">
<img src="[Link]" alt="Mountains" width="300" height="200"></a>
<div class="desc">Add a description of the image here</div>
</div> </body> </html>
72
Reading Assignment
❑ CSS position, CSS Display and CSS Box Model ….
❑ CSS Layout
❑ Read about the CSS specifity and
❑ refer the examples for dropdown menu, responsive design and
❑ other advanced CSS properties at [Link].
73
END
Any Questions ?
74