1

Web design using

CSS
By: Ashenafi Yizengaw

Addis Ababa, Ethiopia

2017 E.C
G-11
 Introduction CSS
2

What is CSS?
 CSS stands for Cascading Style Sheets
 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
G-11

 Introduction CSS
3

Why Use CSS?

 CSS is used to define styles for your web

pages, including the design, layout and

variations in display for different devices
and screen sizes.
 CSS Solved a Big Problem

 CSS Saves a Lot of Work

G-11
 CSS Syntax
4

 A CSS rule consists of a selector and a

declaration block.

 The selector points to the HTML element

you want to style.
 The declaration block contains one or more
declarations separated by semicolons. G-11
 CSS Syntax
5

 Each declaration includes a CSS property

name and a value, separated by a colon.
 Multiple CSS declarations are separated
with semicolons, and declaration blocks
are surrounded by curly braces
Example
In this example all <p> elements will be center-aligned,
with a red text color:
p {
color: red;
text-align: center;
} G-11
 CSS Syntax
6

 Each declaration includes a CSS property

name and a value, separated by a colon.
 Multiple CSS declarations are separated
with semicolons, and declaration blocks
are surrounded by curly braces
Example
In this example all <p> elements will be center-aligned,
with a red text color:
p {
color: red;
text-align: center;
} G-11
 CSS Selectors
7

 A CSS selector selects the HTML

element(s) you want to style.
Element Selector
 The element selector selects HTML

elements based on the element name.

Example
p {
color: red;
text-align: center;
}
G-11
 CSS Selectors
8

ID Selector
 The id selector uses the id attribute of an HTML
element to select a specific element.
 To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
Example
The CSS rule below will be applied to the HTML
element with id="para1":
#para1 {
color: red;
text-align: center; G-11
 CSS Selectors
9

Class Selector
 The class selector selects HTML elements with
a specific class attribute.
 To select elements with a specific class, write a
period (.) character, followed by the class
name.
Example
In this example all HTML elements with
class="center" will be red and center-aligned:
.para1 {
color: red;
text-align: center; G-11
 CSS Selectors
10

Universal Selector
 The universal selector (*) selects all HTML
elements on the page.
Example
The CSS rule below will affect every HTML
element on the page:
* {
color: blue;
text-align: center;
}
G-11
 CSS Selectors
11

Grouping Selector
 The grouping selector selects all the HTML
elements with the same style definitions.
 Look at the following CSS code (the h1, h2, and
p elements have the same style definitions):
Example
In this example we have grouped the selectors from
the code above:
P, h1, h2{
color: red;
text-align: center;
} G-11
 CSS Selectors
12

Attribute Selector
 It is possible to style HTML elements that have
specific attributes or attribute values.
 The [attribute] selector is used to select
elements with a specified attribute.
 The following example selects all <a>
elements with a target attribute:
<a href="http://www.wikipedia.org/"
target="_top">wikipedia.org</a>
a[target] {
background-color: yellow;
G-11
}
 How To Add CSS
13

 When a browser reads a style sheet, it will

format the HTML document according to
the information in the style sheet.
Three Ways to Insert CSS
 There are three ways of inserting a style

sheet:
1. External CSS
2. Internal CSS
3. Inline CSS

G-11
 How To Add CSS
14

External CSS
 Each HTML page must include a reference

to the external style sheet file inside the

<link> element, inside the head section.
<link rel="stylesheet" href=“sample.css">
 An external style sheet can be written in

any text editor, and must be saved with

a .css extension.
 The external .css file should not contain any

HTML tags.
G-11
 How To Add CSS
15

Example
Sample.html mystyle.css
<!DOCTYPE html>
<html> body {
<head> background-color:
<link rel="stylesheet" lightblue;
href="mystyle.css"> }
</head>
<body> h1 {
<h1>This is a color: navy;
heading</h1> margin-left: 20px;
<p>This is a }
paragraph.</p>
</body> G-11
 How To Add CSS
16

Internal CSS
 An internal style sheet may be used if one
single HTML page has a unique style.
 The internal style is defined inside the <style>
element, inside the head section.
Example
<head>
body {
background-color: linen; }
h1 {
color: maroon;
margin-left: 20px; }
G-11
</head>
 How To Add CSS
17

Inline CSS
 An inline style may be used to apply a unique
style for a single element.
 To use inline styles, add the style attribute to
the relevant element
Example
<h1 style="color: blue; text-align: center;">This is a
heading</h1>
<p style="color: red;“>This is a paragraph.</p>

G-11
 CSS Comments
18
 Comments are used to explain the code, and
may help when you edit the source code at a
later date.
 Comments are ignored by browsers.
 A CSS comment is placed inside the <style>
element, and starts with /* and ends with */:
c
/* This is a single-line comment */
p{
color: red; /* Set text color to red */
}
G-11
 CSS Colors
19
 Colors are specified using predefined color
names, or values( RGB, HEX, HSL, RGBA,
HSLA).
CSS Color Names
In CSS, a color can be specified by using a
predefined color name:
Example
<h1 style="color: white; background-color:
lightblue;">This is a heading</h1>
<p style="color: red;“>This is a paragraph.</p>

G-11
 CSS Colors
20

RGB Colors
 An RGB color value represents RED, GREEN, and BLUE
light sources.
 In CSS, 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) is displayed as red, because
red is set to its highest value (255) and the others are set
to 0.
 To display black, set all color parameters to 0, like this:
rgb(0, 0, 0).
 To display white, set all color parameters to 255, like this:
G-11
 CSS Colors
21

RGBA Colors
 RGBA color values are an extension of RGB color
values with an alpha channel - which specifies the
opacity for a color.
 An RGBA color value is specified with:
rgba(red, green, blue, alpha)
 The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at all):
Example
 Experiment by mixing the RGBA values below:
style="background-color:rgba(255, 0, 0, 0.3);“
style="background-color:rgba(255, 0, 0, 0.9);"G-11
 CSS Colors
22

HEX Colors
 A hexadecimal color is specified with: #RRGGBB,
where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of
the color.
 In CSS, a color can be specified using a
hexadecimal value in the form:
#rrggbb
 Hexadecimal values between 00 and ff (same as
decimal 0-255).
Example, #ff0000= red, #000000= black,
#ffffff= white
G-11
 CSS Colors
23

HSL Colors
 HSL stands for hue, saturation, and lightness.
 In CSS, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
 Hue is a degree on the color wheel from 0 to 360. 0
is red, 120 is green, and 240 is blue.
 Saturation is a percentage value, 0% means a
shade of gray, and 100% is the full color.
 Lightness is also a percentage, 0% is black, 50% is
neither light or dark, 100% is white
G-11
 CSS Colors
24

Example
style="background-color:hsl(0, 100%, 50%);"
style="background-color:hsl(240, 100%, 50%);“
style="background-color:hsl(147, 50%, 47%);“
style="background-color:hsl(300, 76%, 72%);“
style="background-color:hsl(39, 100%, 50%);“
style="background-color:hsl(248, 53%, 58%);"

G-11
 CSS Colors
25

HSLA Value
 HSLA color values are an extension of HSL color
values with an alpha channel - which specifies the
opacity for a color.
 An HSLA color value is specified with:

hsla(hue, saturation, lightness, alpha)

 The alpha parameter is a number between 0.0

(fully transparent) and 1.0 (not transparent at all):

Example
style="background-color:hsl(0, 100%, 50%,0.2);“
style="background-color:hsl(39, 100%, 50%,0.8);“
style="background-color:hsl(248, 53%, 58%, 1.0);" G-11
 CSS Backgrounds
26
 The CSS background properties are used to add
background effects for elements.
 In these chapters, you will learn about the
following CSS background properties:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

G-11
 CSS Backgrounds
27

Background-color
 The background-color property specifies the
background color of an element.
Example
body {
background-color: lightblue;
}
h1 {
background-color: green;
}

G-11
 CSS Backgrounds
28

Opacity / Transparency
 The opacity property specifies the
opacity/transparency of an element.
 It can take a value from 0.0 - 1.0.

Example
body {
background-color: lightblue;
opacity: 0.3;
}

G-11
 CSS Backgrounds
29

Background Image
 The background-image property specifies an image
to use as the background of an element.
Example
body {
background-image: url(“sample.png");
}
 The background image can also be set for specific
elements, like the <p> element:
Example
p{
background-image: url(“sample.png"); } G-11
 CSS Backgrounds
30

Background-repeat
 By default, the background-image property repeats
an image both horizontally and vertically.
 Some images should be repeated only horizontally
or vertically, or they will look strange, like this:
 If the image above is repeated only horizontally
(background-repeat: repeat-x;), the background
will look better.
 To repeat an image vertically, set (background-
repeat: repeat-y;).
 Showing the background image only once is also
specified by the (background-repeat: no-repeat;)
property: G-11
 CSS Backgrounds
31

Example
Horizontally Repeat
body {
background-image: url(“sample.png");
background-repeat: repeat-x; }
Vertically Repeat
body {
background-image: url(“sample.png");
background-repeat: repeat-y; }
Image only once
body {
background-image: url(“sample.png");
background-repeat: no-repeat;
} G-11
 CSS Backgrounds
32

Background-position
 The background-position property is used to
specify the position of the background image.

Example
body {
background-image: url(“sample.png");
background-repeat: no-repeat;
background-position: right top;
}

G-11
 CSS Backgrounds
33

Background-attachment
 The background-attachment property specifies
whether the background image should scroll or be
fixed (will not scroll with the rest of the page)
Example
 Specify that the background image should be

fixed:
background-attachment: fixed;
 Specify that the background image should scroll

with the rest of the page:

background-attachment: scroll;
G-11
 CSS Backgrounds
34

Background Shorthand
To shorten the code, it is also possible to specify all
the background properties in one single property.
This is called a shorthand property.
Example
body { Shorthand
body {
background-color: #ffffff;
background-image: Background: #ffffff
url(“sample.png"); url(“sample.png") no-repeat right
background-repeat: no-repeat; top;
background-position: right top;
}

}
G-11
 CSS Borders
35
 The CSS border properties allow you to specify the
style, width, and color of an element's border.
Border Style
 The border-style property specifies what kind of
border to display.
 The border-style property can have from one to
four values (for the top border, right border,
bottom border, and the left border).
 The following values are allowed:
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border G-11
 CSS Borders
36
 dotted - Defines a dotted border
 groove - Defines a 3D grooved border. The effect depends
on the border-color value
 ridge - Defines a 3D ridged border. The effect depends on
the border-color value
 inset - Defines a 3D inset border. The effect depends on
the border-color value
 outset - Defines a 3D outset border. The effect depends on
the border-color value
 none - Defines no border
 hidden - Defines a hidden border

G-11
 CSS Borders
37

Border Width
 The border-width property specifies the width of
the four borders.
 The width can be set as a specific size (in px, pt,

cm, etc) or by using one of the three pre-defined

values: thin, medium, or thick.
Example
p.one {
border-style: solid;
border-width: medium;
}
p.two {
border-style: dotted;
border-width: 2px; } G-11
 CSS Borders
38

Specific Border Side Widths

 The border-width property can have from one to
four values (for the top border, right border,
bottom border, and the left border)
Example
p.one {
border-style: solid;
border-width: 5px 20px; /* 5px top and bottom, 20px on the
sides */
}
p.two {
border-style: dotted;
border-width: 25px 10px 4px 35px; /* 25px top, 10px right,
4px bottom and 35px left */
G-11
}
 CSS Borders
39

Border Color
 The border-color property is used to set the color of
the four borders.
 The color can be set by: name - specify a color

name, HEX value, RGB value, HSL

value ,transparent.
Example
P{
border-style: solid;
border-width: 5px;
border-color: red;

}
G-11
 CSS Borders
40

Border Specific Side Colors

 The border-color property can have from one to
four values (for the top border, right border,
bottom border, and the left border).
Example
P{
border-style: solid;
border-width: 5px;
border-color: red green blue yellow;
/* red top, green right, blue bottom and yellow left */

}
G-11
 CSS Borders
41

Border - Individual Sides

 In CSS, there are also properties for specifying
each of the borders (top, right, bottom, and left):
Example
P{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
If the border-style property has four values:
border-style: dotted solid dotted dashed;
G-11
 CSS Borders
42

Border - Shorthand Property

 To shorten the code, it is also possible to specify all
the individual border properties in one property.
 The border property is a shorthand property for the
following individual border properties:
 border-width
 border-style (required)
 border-color
 Example
P{
border-style: 5px solid green;
}
G-11
 CSS Borders
43

Rounded Borders
 The border-radius property is used to add rounded
borders to an element:

Example
P{
border: 5px solid blue;
border-radius: 5px:
}

G-11
 CSS Margins
44
 The CSS margin properties are used to create space around
elements, outside of any defined borders.
 With CSS, you have full control over the margins. CSS has
properties for specifying the margin for each side of an
element:
 margin-top
 margin-right
 margin-bottom
 margin-left
Example
P{ margin-top: 100px
margin-right: 100px
margin-bottom: 150px
margin-left: 80px
border-style: 5px solid red; G-11
 CSS Margins
45

Margins - Shorthand Property

 To shorten the code, it is possible to specify all the
margin properties in one property.
 If the margin property has Four values:
margin: 25px 50px 75px 100px;
 Top margin is 25px;
 Right margin is 50px;
 Bottom margin is 75px;
 Left margin is 100px;
Example
P{
margin: 25px 50px 75px 100px; }
G-11
 CSS Margins
46
 If the margin property has Three values:
margin: 25px 50px 75px;
 Top margin is 25px
 right and left margins are 50px
 Bottom margin is 75px
 If the margin property has Two values:
margin: 25px 50px;
 top and bottom margins are 25px
 right and left margins are 50px
 If the margin property has one values:
margin: 25px;
 all four margins are 25px
G-11
 CSS Padding
47
 The CSS padding properties are used to generate space
around an element's content, inside of any defined borders.
 CSS has properties for specifying the padding for each side of
an element:
 padding-top
 padding-right
 padding-bottom
 padding-left
Example
P{ Padding-top: 50px;
Padding-right: 30px;
Padding-bottom: 50px;
Padding-left: 80px;
border-style: 5px solid red;
} G-11
 CSS Padding
48

Padding - Shorthand Property

 To shorten the code, it is possible to specify all the
Padding properties in one property.
 If the Padding property has Four values:
Padding: 25px 50px 75px 100px;
 Top Padding is 25px
 Right Padding is 50px
 Bottom Padding is 75px
 Left Padding is 100px
Example
P{
Padding: 25px 50px 75px 100px; }
G-11
 CSS Padding
49
 If the Padding property has Three values:
Padding: 25px 50px 75px;
 Top Padding is 25px
 right and left Padding are 50px
 Bottom Padding is 75px
 If the Padding property has Two values:
Padding: 25px 50px;
 top and bottom Padding are 25px
 right and left Padding are 50px
 If the Padding property has one values:
Padding: 25px;
 all four Padding are 25px
G-11
 CSS Box Model
50
 In CSS, the term "box model" is used when talking
about design and layout.
 The CSS box model is essentially a box that wraps
around every HTML element.
 It consists of: margins, borders, padding, and the actual
content.
 The image below illustrates the box model:

G-11
 CSS Box Model
51

Explanation of the different parts:

 Content - The content of the box, where text and
images appear
 Padding - Clears an area around the content. The
padding is transparent
 Border - A border that goes around the padding
and content
 Margin - Clears an area outside the border. The
margin is transparent

G-11
 CSS Box Model
52

Example
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}

G-11
 CSS Links
53
 With CSS, links can be styled in many different
ways.
Styling Links
 Links can be styled with any CSS property (e.g.

color, font-family, background, etc.).

 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:visited - a link the user has visited

 a:hover - a link when the user mouse over it

 a:active - a link the moment it is clicked

G-11
 CSS Links
54

Example
<a href= “Registration.html" > This is a link</a>

<style> /* mouse over link */

/* unvisited link */ a:hover {
a:link { color: hotpink;
color: red; }
} /* selected link */
/* visited link */ a:active {
a:visited { color: blue;
color: green; }
} </style>

G-11
 CSS Links
55

When setting the style for several link

states, there are some order rules:
 a:hover MUST come after a:link and

a:visited
 a:active MUST come after a:hover

G-11
 CSS Links
56

Text Decoration
 The text-decoration property is mostly used to

remove underlines from links

 Example

<a href= “Registration.html" > This is a link</a>

<style> /* mouse over link */
/* unvisited link */ a:hover {
a:link { text-decoration: underline;
text-decoration: none; }
} /* selected link */
/* visited link */ a:active {
a:visited { text-decoration: underline;
text-decoration: none; }
} </style> G-11
 CSS Links
57

Background Color
 The background-color property can be used to

specify a background color for links:

Example
<a href= “Registration.html" > This is a link</a>
<style> /* mouse over link */
/* unvisited link */ a:hover {
a:link { background-color: hotpink;
background-color: red; }
} /* selected link */
/* visited link */ a:active {
a:visited { background-color: blue;
background-color: green; }
} </style> G-11
 CSS Links
58

Link Buttons
 This example demonstrates a more advanced

example where we combine several CSS properties

to display links as boxes/buttons:
Example
<a href= “Registration.html" > This is a link</a>
<style> a:hover, a:active {
a:link, a:visited { background-color: hotpink;
background-color: red; }
color: white;
padding: 14px 25px; </style>
text-align: center;
text-decoration: none;
display: inline-block; }
G-11