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
