Chapter Three

Cascading Style Sheets (CSS)

By: Behayilu M.
Faculty of Computing and Software Eng.,
Arba Minch Institute of Technology(AMiT),
Arba Minch University
Web design and Programming 1
Contents

• What is CSS?
• Why use style sheets?
• Anatomy of a CSS Rule
• CSS Selectors
• The Combinators Selector
• Linking HTML and CSS
• CSS Units
• Common CSS Properties
Web design and Programming 2
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS is a language that describes the style of an HTML document.
• CSS describes how HTML elements should be displayed.
• Describes the appearance, layout, and presentation of information on a web page
• Describes how information is to be displayed, not what is being displayed
• To describe the presentation a document written in a ‘markup language’ like
HTML or XML
• Markup encoding: <p>My paragraph here.</p>
• Defines the style of how things in <p> tags appear.
• Font, color, size, margins, etc.
• Cascading
• Rules to determine how to apply markup that contains
other markup
 Why CSS?
• Separate Content from Form
• Content is the text and images, marked up to define regions of specific types
• Form defines the “style” for the content
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
<font size=“14px”> <p class=“header”>My First Header</p>

Content
My First Header <p class=“info”>My Information 1 goes here</p>
</font> <p class=“header”>My Second Header</p>
<font size=“12px” color=“red” face=“Verdana”> <p class=“info”>Different Information goes here</p>
The Old way

My information 1 goes here.

</font>
<font size=“14px”>
My Second Header .header { font-size:14px;}

Form/style
</font> .info { font-family: verdana;
<font size=“12px” color=“red” face=“Verdana”> font-color: blue;
Different information goes here. font-size: 12px; }
</font>

Can be embedded in HTML document or placed into separate .css file 4

 Anatomy of a CSS Rule
• A CSS rule-set 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.
• Each declaration includes a CSS property name and a value, separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly
braces.

Web design and Programming 5

… e.g.

• In the following example all <p> elements will be center-aligned,

with a red text color:
p {
color: red;
text-align: center;
}

CSS Comments - starts with /* and ends with */.

Web design and Programming 6

CSS Selectors
• CSS selectors are used to "find" (or select) HTML elements based on
their element name, id, class, attribute, and more
• selects elements based on the element name
p {
The element Selector text-
align: center;
color: red;
}
You can select all <p> elements on a page like
this (in this case, all <p> elements will be
center-aligned, with a red text color):

Web design and Programming 7

CSS Selectors
• uses the id attribute of an HTML element to select a specific element
• The id of an element should be unique within a page
• To select an element with a specific id, write a hash (#) character,
followed by the id of the element.

The id Selector
#para1 {
text-
align: center;
color: red;
}
<p id=“para1”> Hello world
</p>
• The style rule above will be applied to the HTML element with
id="para1":
• Note: An idWeb
name cannot
design and start with a number!
Programming 8
 CSS Selectors
• It selects the elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character,
followed by the name of the class.
• HTML elements can also refer to more than one class.

.center {
The Class Selector text-align:
center; <p class=“center”> Hello world
color: red; </p>
}

• In the above example, all HTML elements with class="center" will be red and center-
aligned.
• A class name cannot start with a number!
Web design and Programming 9
 …cont’d
p.center { <h1 class="center">This heading will not be
text-align: affected</h1>
center; <p class="center">This paragraph will be
color: red; red and center-aligned.</p>
}
• You can also specify that only specific HTML elements should be affected by a class.
In the example above, only <p> elements with class="center" will be center-aligned:
p.center { <h1 class="center">heading</h1>
text-align: <p class="center">paragraph one</p>
center; <p class="center large">paragraph two</p>
color: red;
}
p.large {
font-size: 300%;
}
• HTML elements can also refer to more than one class.
• In the example above, the <p> element will be styled according to class="center" and to
class="large": Web design and Programming 10
 CSS Selectors
• If you have elements with the same style definitions, like this:

h1 {
text-
align: center;
color: red;
}
h1, h2, p {
The Grouping Selector text-
h2 {
align: center;
text-
color: red;
align: center;
}
color: red;
}

p {
text-
align: center;
Web design and Programming 11
color: red;
The Combinator Selectors

• A combinator is something that explains the relationship between the

selectors

• There are four different combinators in CSS:

• descendant selector (space)

• child selector (>)

• adjacent sibling selector (+)

• general sibling selector (~)

Web design and Programming 12
 …cont’d
Selector Example Example description

element element div p Selects all <p> elements inside <div> elements

element>element div > p Selects all <p> elements where the parent is a <div> element

element+element div + p Selects the first <p> element that are placed immediately after
<div> elements

element1~element2 p ~ ul Selects every <ul> element that are preceded by a <p>

element

Web design and Programming 13

…examples
descendant selector (space) child selector (>)

div p { div > p {

background-color: yellow; background-color: yellow;
} }

<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
<div> </div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p> <div>
</div> <span>
<p>I will not be styled.</p>
</span>
</div>

Web design and Programming 14

…examples

Adjacent sibling selector (+) General sibling selector (~)

div + p { div ~ p {
background-color: yellow; background-color: yellow;
} }

<div> <div>
<h2>My name is Donald</h2> <h2>My name is Donald</h2>
<p>I live in Duckburg.</p> <p>I live in Duckburg.</p>
</div> </div>

<p>My best friend is Mickey.</p> <p>My best friend is Mickey.</p>

<p>I will not be styled.</p> <p>I will not be styled.</p>

Web design and Programming 15
 Linking HTML and CSS
• There are three ways of inserting a style sheet:
Inline style sheet
• used to apply a unique style for a single element, by adding the style attribute to the
relevant element.
Internal style sheet
• Defined within the <style> element, inside the <head> section of an HTML page
• An internal style sheet may be used if one single page has a unique style.

External style sheet

• a separate file (.css) where you can declare all the styles that you want to use on your
website
• With an external style sheet, you can change the look of an entire website by changing just one file!
16
 … example

Inline style sheet

<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
<head>
Internal style sheet
<style>
h1{
color: orange;
margin-left: 30px;
}
</style>
External style sheet </head>

<head> h1{
<link rel="stylesheet" type="text/ color: orange;
css" href="mystyle.css"> margin-left: 30px;
</head> }
17
 Cascading Order
• What style will be used when there is more than one style specified for an
HTML element?
• Order:
a) Inline style (inside an HTML element)
b) External and internal style sheets (in the head section)
c) Browser default

• So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value.
Web design and Programming 18
 CSS colors

• CSS uses color values to specify a color.

• Typically, these are used to set a color either for the foreground of an element
(i.e., its text) or else for the background of the element.

• They can also be used to affect the color of borders and other decorative effects.

• Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.

• The first and easiest way to specify a color is using one of the 140 predefined
color keywords specified in CSS.Web design and Programming 19
  With CSS, a color is most often specified by:

<h1 style="color:red;">Hello world</h1> Hello world

<h2 style="background-color:rgb(0, 0, 255);">Hello world</h1> Hello world

<h1 style="border:2px solid #00ff00;">Hello Hello world

World</h1>
Web design and Programming 20
 CSS backgrounds
• The CSS background properties are used to add background effects for elements.
• css properties used for background effects:

 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background (shorthand property)

CSS background-color
• The background-color property specifies the background color of an element.

<h2 style="background-color:red;">Hello world</h1> Hello world

Web design and Programming 21
 CSS Background Image
• The 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.
• The background image can also be set for specific elements, like the <p> element:

p{
background-image: url(“dog.jpeg");
}

Property
The CSS BackgroundDescription
Image Property

background-image Sets the background image for an element

Web design and Programming 22

 CSS Background Image Repeat
CSS background-repeat
• By default, the background-image property repeats an image both horizontally and vertically.
• Some images should be repeated only horizontally or vertically.
p{
background-image: url(“dog.jpeg");
}
• To repeat an image horizontally, set background-repeat: repeat-x;
• To repeat an image vertically, set background-repeat: repeat-y;
• To repeat an image vertically and horizontally set background-repeat: repeat;
p{
background-image: url(“xyz.jpeg");
background-repeat: repeat-x;
} Web design and Programming 23
 CSS background-repeat: no-repeat
• Showing the background image only once is also specified by the background-repeat
property:
p{
background-image: url(“xyz.jpeg");
background-repeat: no-repeat;
}

CSS background-position
• The background-position property is used to specify the position of the background image.
p{
background-image: url(“xyz.jpeg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
} Web design and Programming 24
 CSS Background Attachment
CSS 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):

p{
background-image: url(“xyz.jpeg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}

• Or Specify that the background image should scroll with the rest of the page:
background-attachment: scroll;
Web design and Programming 25
 CSS background - Shorthand property
• To shorten the code, it is also possible to specify all the background properties in one single
You can use the shorthand property
property. This is called a shorthand property. background:

p{
background-color: #ffffff;
p{
background-image: url(“xyz.png"); background: #ffffff url(“xyz.png") no-repeat right top;
background-repeat: no-repeat; }
background-position: right top;
}

• When using the shorthand property the order of the property values is:
• background-color, background-image, background-repeat, background-attachment, background-
position
• It does not matter if one of the property values is missing, as long as the other ones are
Web design and Programming 26
in this order.
 CSS Borders
• 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 following values are allowed:
p{
 dotted - Defines a dotted border border-style: solid; <p>Hello world.</p>
 dashed - Defines a dashed border }
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-color value Hello world
 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
• The border-style property can have fromWebone to four values (for the top border, right border,
design and Programming 27
bottom border, and the left border).
 …cont’d
• The border-width property specifies the width of the four borders.
• The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border).

Border Color
• The border-color property is used to set the color of the four borders.

Border - Individual Sides

• From the examples above you have seen that it is possible to specify a different border for each side.
• In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

p{
border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
Web design and Programming 28
}
 Border - Shorthand Property

The border property is a shorthand property for the following individual border properties:
• border-width
p{
• border-style (required) border: 5px solid red; <p>Some text</p>
• border-color }

Rounded Borders
• The border-radius property is used to add rounded borders to an element:
p{
border: 2px solid red;
border-radius: 5px;
}

Web design and Programming 29

 CSS Margins

• The CSS margin properties are used to create space around elements, outside of any defined
borders.
Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an element:
• margin-top
• margin-right p{
margin-top: 100px;
• margin-bottom margin-bottom: 100px;
• margin-left margin-right: 150px;
• All the margin properties can have the following values: margin-left: 80px;
}
• 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.
Web design and Programming 30
 Margin - 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
• If the margin property has two values:
If the margin property has one values:
• margin: 25px 50px;
margin: 25px;
• top and bottom margins are 25px
All margins are 25px
• right and left margins are 50px
• The auto Value
You can set the margin property to auto to horizontally center the element within its container.
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
Web design and Programming 31
 The inherit Value

• This example lets the left margin of the <p class="ex1"> element be inherited from the
parent element (<div>):
<html>
<head>
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<p>Paragraph one</p>
<div>
<p class="ex1">Paragraph two</p>
</div>
</body>
Web design and Programming 32
</html>
 Margin Collapse

• Top and bottom margins of elements are sometimes collapsed into a single margin that is
equal to the largest of the two margins.
• This does not happen on left and right margins! Only top and bottom margins!

<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</htm>
Web design and Programming 33
 CSS Padding

• 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
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
Web design and Programming 34
 Setting height and width

• The height and width properties are used to set the height and width of an element.

div {
width: 500px;
height: 100px;
background-color: powderblue;
}

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

• 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!
Web design and Programming 35
 Minimum and Maximum Width and Heights

• The following properties define CSS minimum and maximum width and heights.
 min-width: sets the minimum width of an element
 max-width: sets the maximum width of an element
 min-height: sets the minimum height of an element
 max-height: sets the maximum height of an element
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}

div {
min-width: 50px;
height: 100px;
background-color: powderblue;
}
• Note: The value of the max-width property overrides width. Resize the window to see the effect.
Web design and Programming 36
 CSS Box Model

CSS box model is the foundation of design and layout of the web.
It is simply box or a rectangular box.
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:

Web design and Programming 37

 …cont’d

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
The box model allows us to add a border around elements, and to define space between elements.
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}

• The box-sizing property allows us to include the padding and border in an element's total width and height.
Web design and Programming 38
• box-sizing: border-box;
 Width and Height of an Element

 In order to set the width and height of an element correctly in all browsers, you need to know how the box
model works.

 When you set the width and height properties of an element with CSS, you just set the width and height of the
content area.

 To calculate the full size of an element, you must also add padding, borders and margins.

 Assume we want to style a <div> element to have a total width of 350px:

div {
width: 320px;
padding: 10px; Here is the calculation:
border: 5px solid red; 320px (width)
margin: 0; + 20px (left + right padding)
text-align:center; + 10px (left + right border)
} + 0px (left + right margin)
= 350px
Web design and Programming 39
 CSS Outline

• An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element "stand out".
CSS has the following outline properties:
 outline-style
 outline-color
 outline-width
 outline-offset
 outline

• Outline differs from borders! Unlike border, the outline is drawn outside the element's
border, and may overlap other content.

• Also, the outline is NOT a part of the element's dimensions; the element's total width and
height is not affected by the width of the outline.
Web design and Programming 40
 …cont’d

CSS Outline - Shorthand property

• The outline property is a shorthand property for setting the following individual outline
properties:
p.ex3 {
outline-width border:4px solid blue; <p class="ex3">A 5px solid red outline.</p>
outline-style (required) outline: 5px solid red;
}
outline-color
CSS Outline Offset
• The outline-offset property adds space between an outline and the edge/border of an element.
• The space between an element and its outline is transparent.
p{
margin: 30px;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px;
} Web design and Programming 41
 CSS units

• CSS has several different units for expressing a length.

• There are two types of length units: absolute and relative.
Absolute Lengths

• The absolute length units are fixed and a length expressed in any of these will appear as
exactly that size.

• Absolute length units are not recommended for use on screen, because screen sizes vary so
much. However, they can be used if the output medium is known, such as for print layout.

unit cm mm in px pt pc

description centimeters Millimeters inches(inches (1in = 96px = pixels (1px = points (1pt = picas (1pc = 12
1cm =37.7px 1mm=3.77 2.54cm) 1/96th of 1in) 1/72 of 1in) pt)
px
Web design and Programming 42
 CSS units

Relative Lengths
• Relative length units specify a length relative to another length property. Relative length
units scales better between different rendering mediums.
Unit Description

em Relative to the font-size of the element (2em means 2 times the size of the current
font)
rem Relative to font-size of the root element

vw Relative to 1% of the width of the viewport*

vh Relative to 1% of the height of the viewport*

% Relative to the parent element

Web design and Programming 43
 CSS Text

• CSS has a lot of properties for formatting text.

CSS text properties:
• color: specifies the color of text.
• text-align: A text can be left or right aligned, centered, or justified.
• text-decoration: underline, overline, line-through
• text-transform: uppercase, lowercase, capitalize
• letter-spacing: property is used to specify the space between the characters in a text.
• line-height: property is used to specify the space between lines:
• word-spacing: property is used to specify the space between the words in a text.
• text-indent: property is used to specify the indentation of the first line of a text:
• text-shadow: property adds shadow to text. {
h1{
text-shadow: 2px 2px 2px red;
}
Web design and Programming 44
 •

CSS Fonts

• Choosing the right font for your website is important!

• In CSS there are five generic font families:
1. Serif fonts have a small stroke at the edges of each letter. They create a sense of formality
and elegance.
2. Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
3. Monospace fonts - here all the letters have the same fixed width. They create a mechanical
look.
4. Cursive fonts imitate human handwriting.
5. Fantasy fonts are decorative/playful fonts.
• All the different font names belong to one of the generic font families.

Web design and Programming 45

 •

…cont’d

body{ font-family: Arial, Verdana, sans-serif;}

Applying a list of fonts

• By defining multiple values for font-family, the browser will look for the first value Arial
and use it. If it’s not available, it will use the following one Verdana. Finally, if that one isn’t
Web design and Programming 46
available either, it will use the browser’s default sans-serif font.
 •

…cont’d

.p1 { The font property is a shorthand property for:

font-family: "Times New Roman", Times, serif;  font-style
font-style: italic;  font-variant
font-weight: bold;  font-weight
font-variant: normal;  font-size/line-height
font-size: 40px;  font-family
}
• The CSS Font Property
p{
font: italic small-caps bold 12px/30px Georgia, 47
Web design and Programming
serif;
}
 •

CSS Links

• With CSS, links can be styled in many different ways.

• Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
/* unvisited link */
a:link {
color: red;
}

/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
Text Decoration }
• The text-decoration property is mostly used to remove underlines from links: /* selected link */
a:active {
a:hover { color: blue;
text-decoration: underline;
} This is a link
Web design and Programming 48
 •

CSS Pseudo-classes

• A pseudo-class is used to define a special state of an element.

For example, it can be used to:
/* unvisited link */
Style an element when a user mouses over it a:link {
color: #FF0000;
Style visited and unvisited links differently }
Style an element when it gets focus
/* visited link */
• The syntax of pseudo-classes: a:visited {
color: #00FF00;
selector:pseudo-class }
{
/* mouse over link */
property:value; a:hover {
color: #FF00FF;
} }
• Anchor Pseudo-classes
/* selected link */
Links can be displayed in different ways: a:active {
color: #0000FF;
}
Web design and Programming 49
 •

…cont’d

Pseudo-classes and CSS Classes a.highlight:hover {

• Pseudo-classes can be combined with CSS classes: color: #ff0000;
}
• When you hover over the link in the example, it will change color:

Hover on <div> div:hover {

background-color: blue;
• An example of using the :hover pseudo-class on a <div> element: }

CSS - The :first-child Pseudo-class

• The :first-child pseudo-class matches a specified element that is the first child of another
element.
This is some text.
p:first-child { <p>This is some text.</p>
color: blue; <p>This is some text.</p> This is some text.
}
Web design and Programming 50
 •

…cont’d

All CSS Pseudo Elements

Selector Example Example description

::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element

::selection p::selection Selects the portion of an element that is selected by a user

p::after { My name is Rodas - Remember this

<p>My name is Rodas</p>
content: " - Remember this"; I live in Arba Minch - Remember this
<p>I live in Arba Minch</p>
}

Web design and Programming 51

 •

CSS tables

• To specify table borders in CSS, use the border property.

• The example below specifies a solid border for <table>, <th>, and <td> elements:
Collapse Table Borders
• The border-collapse property sets whether the table borders should be collapsed into a single
border:

table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 50%;
}
th
{
background-color:green; tr:nth-child(even) { tr:first-child {
} background-color: yellow; background-color: red;
} }
Web design and Programming 52
 •

CSS Layout - The display Property

• The display property is the most important CSS property for controlling layout.
• The display property specifies if/how an element is displayed.

• Every HTML element has a default display value depending on what type of element it is.
The default display value for most elements is block or inline.
Block-level Elements
• A block-level element always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can).
Examples of block-level elements:
• <div>, <h1> - <h6>, <p>, <form>, <header>, <footer>, <section>
Inline Elements
• An inline element does not start on a new line and only takes up as much width as necessary.
• Examples of inline elements:
• <span>, <a>, <img> Web design and Programming 53
 •

…cont’d

• every element has a default display value. However, you can override this.
• Changing an inline element to a block element, or vice versa, can be useful for making the
page look a specific way, and still follow the web standards.
• A common example is making inline <li> elements for horizontal menus:
<ul>
li { <li><a href="/html/default.asp" target="_blank">HTML</a></li>
display: inline; <li><a href="/css/default.asp" target="_blank">CSS</a></li>
} <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

• Note: Setting the display property of an element only changes how the element is displayed, NOT what kind
of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.

<a href="/html/default.asp" target="_blank">HTML</a>

a{ <a href="/css/default.asp" target="_blank">CSS</a>
display: block; <a href="/js/default.asp" target="_blank">JavaScript</a>
}
Web design and Programming 54
 •

CSS Layout - The position Property

• The position property specifies the type of positioning method used for an element.
• There are five different position values:
static relative fixed absolute sticky

• Elements are then positioned using the top, bottom, left, and right properties.

• However, these properties will not work unless the position property is set first. They also work differently
depending on the position value.

position: static
• HTML elements are positioned static by default.

• Static positioned elements are not affected by the top, bottom, left, and right properties.

• An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page: Web design and Programming 55
 •

…cont’d

position: relative
• An element with position: relative; is positioned relative to its normal position.

• Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position.

• Other content will not be adjusted to fit into any gap left by the element.

div.relative { <div class="relative">

position: relative; This div element has position: relative;
left: 30px; </div>
border: 3px solid #73AD21;
}

Web design and Programming 56

 •

…cont’d

position: fixed
• An element with position: fixed; is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top, right, bottom, and left
properties are used to position the element.

• A fixed element does not leave a gap in the page where it would normally have been
located.
div.fixed {
position: fixed;
<h2>position: fixed;</h2>
bottom: 0;
<div class="fixed">
right: 0; This div element has position: fixed;
width: 300px; </div>
border: 3px solid #73AD21;
}
Web design and Programming 57
 •

…cont’d

position: absolute
• An element with position: absolute; is positioned relative to the nearest positioned ancestor
(instead of positioned relative to the viewport, like fixed).

• However; if an absolute positioned element has no positioned ancestors, it uses the

document body, and moves along with page scrolling.

• Note: Absolute positioned elements are removed from the normal flow, and can overlap
elements.

Web design and Programming 58

 •

…cont’d

position: absolute
div.relative {
<h2>position: absolute;</h2>
position: relative; <div class="relative">This div element has position: relative;
width: 400px; <div class="absolute">This div element has position:
height: 200px; absolute;</div>
border: 3px solid #73AD21; </div>
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
} Web design and Programming 59
 •

…cont’d

position: sticky
• An element with position: sticky; is positioned based on the user's scroll position.
• A sticky element toggles between relative and fixed, depending on the scroll position.
• It is positioned relative until a given offset position is met in the viewport - then it "sticks"
in place (like position:fixed).
• You must also specify at least one of top, right, bottom or left for sticky positioning to work.

<p>Try to <b>scroll</b> inside this frame to

div.sticky { understand how sticky positioning works.</p>
position: -webkit-sticky;
position: sticky; <div class="sticky">I am sticky!</div>
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
Web design and Programming 60
 •

CSS Layout - The z-index

• When elements are positioned, they can overlap other elements.

• The z-index property specifies the stack order of an element (which element should be placed in front
of, or behind, the others).

• An element can have a positive or negative stack order:

img {
position: absolute;
left: 0px;
top: 0px; <h1>This is a heading</h1>
z-index: -1; <img src="img_tree.png">
} <p>Because the image has a z-index of -1, it will be placed behind the
text.</p>

• Note: z-index only works on positioned elements (position: absolute, position: relative, position: fixed, or
Web design and Programming 61
position: sticky) and flex items (elements that are direct children of display: flex elements).
 •

CSS Overflow

• The overflow property specifies whether to clip the content or to add scrollbars when the
content of an element is too big to fit in the specified area.

The overflow property has the following values: visible, hidden, scroll and auto.

• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
Note: The overflow property only works for block elements with a specified height.

div {
background-color: coral;
width: 200px;
height: 65px;
border: 1px solid black;
overflow: auto;
}
Web design and Programming 62
 •

CSS Layout - float and clear

• The CSS float property specifies how an element should float.

• The CSS clear property specifies what elements can float beside the cleared element and on
which side.
The float Property

• The float property is used for positioning and formatting content e.g. let an image float left
to the text in a container.
• The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in the text). This is
default
inherit - The element inherits the float value of its parent
• In its simplest use, the float property can be used to wrap text around images.
Web design and Programming 63
•

…cont’d

img {
float: left;
}

img {
float: right;
}

Web design and Programming 64

 •

The clear Property

• When we use the float property, and we want the next element below (not on right or left), we will have to use the
clear property.

• The clear property specifies what should happen with the element that is next to a floating element.
div {
• The clear property can have one of the following values: float: left;
padding: 15px;
 none - The element is not pushed below left or right floated elements. This is default }
.div1 {
<div class="div1">Div 1</div> background: red;
 left - The element is pushed below left floated elements <div class="div2">Div 2</div> }
.div2 {
<div class="div3">Div 3</div> background: yellow;
 right - The element is pushed below right floated elements
}
.div3 {
 both - The element is pushed below both left and right floated elements background: green;
}
 inherit - The element inherits the clear value from its parent

• When clearing floats, you should match the clear to the float: If an element is floated to the left, then you should
clear to the left. Your floated element will continue to float, but the cleared element will appear below it on the
Web design and Programming 65
web page.
•

The clear Property

.div3 {
float: left;
padding: 10px;
<h2>With clear</h2>
border: 3px solid #73AD21;
<div class="div3">div3</div>
}
<div class="div4">div4 - Here, clear: left; moves div4 down
below the floating div3. The value "left" clears elements floated
.div4 {
to the left. You can also clear "right" and "both".</div>
padding: 10px;
border: 3px solid red;
clear: left;
}

Web design and Programming 66

 •

CSS Layout - display: inline-block

• display: inline-block allows to set a width and height on the element.

• with display: inline-block, the top and bottom margins/paddings are respected, but with
display: inline they are not.
• Compared to display: block, the major difference is that display: inline-block does not add a
line-break after the element, so the element can sit next to other elements.

.nav {
background-color: yellow; <ul class="nav">
list-style-type: none; <li><a href="#home">Home</a></li>
text-align: center; <li><a href="#about">About Us</a></li>
margin: 0; <li><a href="#clients">Our Clients</a></li>
padding: 0; <li><a href="#contact">Contact Us</a></li>
} </ul>
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
} Web design and Programming 67
 •

CSS Opacity / Transparency

• The opacity property specifies the opacity/transparency of an element.

Transparent Image
• The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent:

img {
opacity: 0.5;
filter: alpha(opacity=50); /*
<img src="img_forest.jpg" alt="Forest" width="170" height="100">
For IE8 and earlier */
}
Web design and Programming 68
 •

CSS Specificity

What is Specificity?

• If there are two or more CSS rules that point to the same element, the selector with the
highest specificity value will "win", and its style declaration will be applied to that HTML
<html>
element.
<html>
<html>
<head>
<html> <head>
<head> <style>
<head> <style>
<style> #demo {color: blue;}
<style> #demo {color: blue;}
p{ .test {color: green;}
.test {color: green;} .test {color: green;}
color: red; p {color: red;}
p {color: red;} p {color: red;}
} </style>
</style> </style>
</style> </head>
</head> </head>
</head> <body>
<body> <body>
<body>
<p id="demo" class="test"
<p class="test">Hello!</p> <p id="demo"
<p>Hello!</p> style="color:
class="test">Hello!</p>
orange;">Hello!</p>
</body>
</body>
</html> </body>
</html> </body>
Web design and</html>
Programming 69
</html>
 •

…cont’d

Specificity Hierarchy
• Every CSS selector has its place in the specificity hierarchy.

• There are four categories which define the specificity level of a selector:
<style>
Inline styles - Example: <h1 style="color: orange;"> h1 {background-color: yellow;}
h1 {background-color: red;}
IDs - Example: #navbar </style>

Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]

Elements and pseudo-elements - Example: h1, :before <h1>This is heading 1</h1>

• Equal specificity: the latest rule wins - If the same rule is written twice into the external
style sheet, then the latest rule wins: Web design and Programming 70
 •

CSS Gradients

CSS gradients let you display smooth transitions between two or more specified colors.
• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)
CSS Linear Gradients
• To create a linear gradient you must define at least two color stops. Color stops are the
colors you want to render smooth transitions among. You can also set a starting point and a
direction (or an angle) along with the gradient effect.
Syntax <div id="grad1"></div>

• background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

#grad1 {
background-image: linear-gradient(to
height: 200px;
right, red , yellow);
background-image: linear-gradient(red, yellow); Web design and Programming 71
 •

CSS 2D Transforms

• CSS transforms allow you to move, rotate, scale, and skew elements.

• With the CSS transform property you can use the following 2D transformation methods:

• translate(), rotate(), scaleX(), scaleY(), scale(), skewX(), skewY(), skew(), matrix()

• The translate() method moves an element from its current position (according to the
div {
parameters given for the X-axis and the Y-axis). transform: translate(50px, 100px);
}
• The rotate() method rotates an element clockwise or counter-clockwise according to a given
degree. div { transform: rotate(20deg); }

• The scale() method increases or decreases the size of an element (according to the
div { transform: scale(2, 3); }
parameters given for the width and height).
Web design and Programming 72
 •

…cont’d

div {
• The scaleX() method increases or decreases the width of an element. transform: scaleX(2);
}
• The scaleY() method increases or decreases the height of an element.
div {
transform:
• The skewX() method skews an element along the X-axis by the given angle. skewX(20deg);
}
• The skewY() method skews an element along the Y-axis by the given angle.
div {
• The skew() method skews an element along the X and Y-axis by the given angles. transform:
skew(20deg,
10deg);
• The matrix() method combines all the 2D transform methods into one. }

• The parameters are as follow:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
div {
transform: matrix(1, -0.3, 0, 1, 0, 0);
Web design and Programming 73
}
 •

CSS Transitions

• CSS transitions allows you to change property values smoothly, over a given duration.
How to Use CSS Transitions? div {
width: 100px;
To create a transition effect, you must specify two things: height: 100px;
the CSS property you want to add an effect to background: red;
transition: width 2s;
the duration of the effect }
div:hover {
<div></div>
width: 300px;
}

Note: If the duration part is not specified, the transition will have no effect, because the
default value is 0.
• Notice that when the cursor mouses out of the element, it will gradually change back to its
original style.
div {
Change Several Property Values transition: width 2s, height 4s;
}
Web design and Programming 74
 •

…cont’d

Specify the Speed Curve of the Transition

The transition-timing-function property specifies the speed curve of the transition effect.

The transition-timing-function property can have the following values:

• ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)

• linear - specifies a transition effect with the same speed from start to end
by using the shorthand property
• ease-in - specifies a transition effect with a slow start transition:

div {
• ease-out - specifies a transition effect with a slow end transition: width 2s linear 1s;
}
• ease-in-out - specifies a transition effect with a slow start and end

• cubic-bezier(n,n,n,n) - lets you define your own

Web design values in a cubic-bezier function
and Programming 75
 •

…cont’d

div {
width: 100px;
height: 100px; Delay the Transition Effect
background: red; The transition-delay property specifies a delay (in
transition: width 2s; seconds) for the transition effect.
}
div {
#div1 {transition-timing-function: linear;} transition-delay: 1s;
#div2 {transition-timing-function: ease;} }
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Transition + Transformation
div:hover { The following example adds a transition
width: 300px; effect to the transformation:
}
div {
<div id="div1">linear</div><br> transition: width 2s, height 2s, transform 2s;
<div id="div2">ease</div><br> }
<div id="div3">ease-in</div><br>
<div id="div4">ease-out</div><br> div:hover {
<div id="div5">ease-in-out</div><br> Webwidth:
design and300px; height: 300px; transform: rotate(180deg);
Programming 76
}
 •

CSS Animations

• CSS animations allows animation of most HTML elements without using JavaScript or Flash!

What are CSS Animations? /* The element to apply the

animation to */
• An animation lets an element gradually change from one style to another. div {
width: 100px;
• You can change as many CSS properties you want, as many times you want. height: 100px;
background-color: red;
• To use CSS animation, you must first specify some keyframes for the animation. animation-name: example;
animation-duration: 4s;
• Keyframes hold what styles the element will have at certain times. }

/* The animation code */

The @keyframes Rule
@keyframes example {
from {background-color:
• When you specify CSS styles inside the @keyframes rule, the animation red;}
to {background-color:
will gradually change from the current style to the new style at certain times. yellow;}
}
• To get an animation to work, you must bind the animation to an element.
Web design and Programming 77
 •

…cont’d

Note: The animation-duration property defines how long time an animation

div {
should take to complete. width: 100px;
height: 100px;
If the animation-duration property is not specified, no animation will occur,
background-color: red;
because the default value is 0s (0 seconds). animation-name: example;

• It is also possible to use percent. By using percent, you can add animation-duration: 4s;
}
as many style changes as you like.
@keyframes example {
• The following example will change the background-color of the <div> 0% {background-color: red;}
25% {background-color: yellow;}
element when the animation is 25% complete, 50% complete,
50% {background-color: blue;}
and again when the animation is 100% complete: 100% {background-color: green;}
}
Web design and Programming 78
 •

…cont’d

Delay an Animation
div {
• The animation-delay property specifies a delay width: 100px;
height: 100px;
background-color: red;
for the start of an animation. position: relative;
animation-name: example;
• The following example has a 2 seconds delay animation-duration: 4s;
animation-delay: 2s;
before starting the animation: }

@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
animation-play-state:running; /*or pause */ 50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
animation-iteration-count: 2; /* infinite */ 100% {background-color:red; left:0px; top:0px;}
}

Web design and Programming 79

 •

CSS Media Queries

• CSS3 Media Queries are useful when you want to modify your webpage depending on a device’s general type or specific
characteristics and parameters. @media only screen and (orientation:portrait)
• Media queries can be used to better do responsive web design.
{
body
• For instance, you can set distinct styles for device’s with different: {
background-color:red;
 width and height of the viewport
}
 orientation (is the tablet/phone in landscape or portrait mode?) }
 Screen resolution

• Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops, tablets, and mobile phones (such as iPhone
and Android phones).

Media Query Syntax

• A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {

CSS-Code;
Web design and Programming 80
}
 •

…cont’d

• The result of the query is true if the specified media type matches the type of device the document is being
displayed on and all expressions in the media query are true. Unless you use the not or only operators, the
media type is optional and the all type will be implied.

CSS3 Media Types

Value Description @media only screen and (min-width: 500px)

{
all Used for all media type devices p
{
font-size:50px;
print Used for printers
}
}
screen Used for computer screens, tablets, smart-phones etc.

speech Used for screen readers that "reads" the page out loud
<p> Resize the device to see the effect </p>

Web design and Programming 81

 •

…cont’d

Media Queries Simple Examples

• One way to use media queries is to have an alternate CSS section right inside your style sheet.

• The following example changes the background-color to blue if the viewport is 480 pixels wide or wider (if the
viewport is less than 480 pixels, the background-color will be pink):

body
{
background-color: red;
}

@media screen and (min-width: 480px)

{
body
{
background-color: blue;
}
}
Web design and Programming 82
 •

CSS Flexbox

• The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using
float or positioning.

Flexbox Elements

• To start using the Flexbox model, you need to first define a flex container.
.flex-container {
display: flex;
align-items: center;
justify-content: center;
background-color: Blue;
• The element above represents a flex container (the blue area) with three flex items. }
Parent Element (Container)
.flex-container > div {
• The flex container becomes flexible by setting the display property to flex: background-color: red;
<div class="flex-container"> margin: 10px;
<div>1</div> padding: 20px;
<div>2</div> font-size: 30px;
<div>3</div> }
Web design and Programming 83
</div>
•

…cont’d

Web design and Programming 84

 •

Responsive Website Design

• Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink,
or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):
• Responsive web design is about creating web pages that look good on all devices!
• A responsive web design will automatically adjust for different screen sizes and viewports.

Web design and Programming 85

 Common CSS Properties
Text Background Positioning

color background-color position

:color|initial|inherit color|transparent|initial| static|absolute|

inherit fixed|relative|
font-size background-size sticky|init..
float
:length|initial| auto|length|cover|
inherit contain| none|left|right|
Text-align initial|inherit; init..
background-image clear
:left|right|center|
justify| url|none|initial| none|left|right|both|
initial|inherit inherit; init…
text-decoration background-repeat overflow
:Line|color|style| repeat|repeat-x|repeat-y| visible|hidden|scroll|
initial| no-repeat|initial|inherit; auto…
inherit Position offsets
Web design and Programming