Chapter 4:

Cascading Style Sheets (CSS)

 4.1 CSS Basics
Introduction to CSS: What is CSS?
• CSS is a styling language – a set of rules to tell browsers how
your webpage should look.
• Cascading Style Sheets (CSS) is a language that works with
HTML documents to define the way content is presented. The
presentation is specified with styles that are placed directly
into HTML elements, the head of the HTML document, or
separate style sheets.
• Style Sheets contain a number of CSS rules. Each rule selects
elements in an HTML document. These rules then define how
the elements will be styled.
• Any number of HTML files can be linked to a single CSS
file.
 4.2 Why Use CSS? (CSS advantage)
• 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:
• Development of large websites, where fonts and color
information were added to every single page, became
a long and expensive process. So, CSS removed the
style formatting from the HTML page!
– CSS Saves a Lot of Work!
• The style definitions are normally saved in external .css
files. With an external style sheet file, you can change
the look of an entire website by changing just one file!
 4.3 Style sheet rule
4.3.1 CSS Syntax and Selectors
A rule, or rule set is a statement that tells browsers
how to render particular elements on an HTML
page. A rule set consists of a selector followed by a
declaration block. Inside the declaration block, there
can be one or more declarations.
It is look like as follow:
Each declaration contains a property and a value.
The first step is choosing the selector. The selector "selects"
which HTML element to affect on the page by referencing the
rule set.

Examples of Selectors: p, h1, h2

Next, the declaration box must be created. A declaration block is
a container that consists of a property name and a value,
separated by a colon and opened and closed by the use of
curly brackets.
The property is an aspect of the element that you are choosing
to style.

The value however is the exact style you want to set for the
property. Values can include length, percentage, color, url,
and shape.
Declarations tell a browser how to draw any element
on a page that is selected. The end of each
declaration is indicated with a semi colon.
You can use multiple declarations by placing a
semicolon at the end of the declaration.
Examples of Declaration Block:
p {...}
h1 {...}
h2 {...}
p { color: maroon; font-family:arial}
h1 { text-align: center; }
h2 { font-style: italic; }
You may combine selectors when several selectors
share the same declarations.
Each selector must be separated by a comma but, this
prevents the need to write the same rule more than
once.
For example:

h1, h2 { text-align: center; color: navy; }

h2 {font style: italic; }
 CSS Selectors
A) HTML element selectors

B) Class selectors

C) ID selectors
 A) HTML element selectors
• The most basic form of CSS selector is an HTML
element. Example: h1, h2, p, ol, ul, table, etc.
• This is the simple or element selector. Example:
p { color: #003366; }
• This will set every occurrence of content marked up the
<p> paragraph tag to be a dark blue color.
• Element selectors can be grouped together if you want to
apply one CSS rule to a range of elements. Example:
h1, h2, h3, h4, h5, h6 { color: #FF0000; }
• Each element is separated by a comma (except for the last
element before the start of the declaration).
• Multiple declarations also possible in element selection.
 B) CSS Class Selectors
• The class selector selects elements with a specific
class attribute. To select elements with a specific
class, write a period (.) character, followed by the
name of the class. Example:
h1.special { color: #FF0000; }
The actual definition of the value “special” is defined in a
CSS class selector. So, in body section:
<h1 class=“special”> this is heading </h1>
• This will now make all <h1> elements with the class
“special” display text with a red color. <h1> elements that
don’t have the class attribute “special” will continue to
display in the default <h1> color.
• A CSS class selector can also be defined more generally,
without the element name (just the dot):
.special { color: #FF0000; }
• This class can now be applied to any HTML element that
has the class attribute “special”.
• Actually the full CSS syntax is *.special, where * is a
selector that matches anything. However, CSS shorthand
means we can drop the *.
• HTML elements can also refer to more than one class.
Example : .center {background-color:yellow;}
.large {color:blue;}
• <p class="center large">This paragraph refers to two
classes.</p>
 C) CSS ID Selectors
• HTML elements can also have id selectors
assigned to them. Example:
<p id=“summary”>blah, blah, blah.</p>
• In the CSS, the id “summary” can be styled in a
rule, thus:
#summary { font-style: italic; }
Note: An id and class name cannot start with a
number!
 CSS How To...
Type of CSS Styles

• When a browser reads a style sheet, it will format

the HTML document according to the information
in the style sheet.
There are three ways of inserting a style sheet:
– External style sheet
– Internal or embedded style sheet
– Inline style
Default style: provides values for all element properties,
unless you change it. (Note: user can customize
browser to change defaults!)
 Inline Styles
• Defined for individual elements, at the point of use (in the
HTML).
• Useful for “one-off” styles that are not likely to be used
elsewhere.
• Method:
• <tag style="attribute: value; attribute: value ...">
HTML text</tag>
• The attribute: value pairs are what would go between
{ } if this were a style-sheet rule. There is no selector since the
style applies to this element only.
Tip: An inline style loses many of the advantages of a style sheet
(by mixing content with presentation). Use this method
sparingly
 Internal/ Embedded Style Sheet
Simply add definition in the head section.
• Styles declared in the Embedded style sheet will affect all matching elements on the
page. In this example, all <h2> elements on the page will be displayed in Georgia
font and in red color.
<html>
<head>
<title>Page with embedded style</title>
<style>
selector { attribute : value ;
•Style definitions go into a <style> element in
attribute : value ... }
document head.
selector { attribute : value ; •Selector determines what elements the style rule
attribute : value ... } applies to.
... •Style definitions separated by ; are enclosed in { }
</style>
</head>
<body>
...
</html>
 Example
<html>
<head>
<title>Example page with embedded style</title>
<style >
body { font-family : sans-serif;
color : blue;
background-color : yellow }
h1 { font-style : italic }
p { font-size : 14pt }
ol { font-size : 12pt;
color : red;
font-family : serif }
</style>
</head>
Here the selectors are simply tag names. The style rules
... will apply to elements defined by those tags. Result
</html> (Example 1)
 External Style Sheets
• A style sheet can be placed in a separate file (usually
named with suffix .css) and referenced by HTML
files that need it.
• Useful for centralizing control of style and ensuring
uniform appearance across many pages of a web
site.
• The contents of the file are what would go between
<style> ... </style> of an embedded style sheet.
Note: this file is not HTML!
• The file is referenced using a <link> tag in the
HTML document's head portion.
 Example of External style sheet
Here is what an external style sheet (named style.css) could
contain:
/* This style sheet defines an "excerpt" class
for paragraphs that is much like blockquote. */

p.excerpt { font-style : italic;

margin-right : 2em;
margin-left : 2em;
}
Note that there is no HTML in this file! This example also
illustrates a CSS comment between /* and */ . Such
comments can be placed in external or embedded style sheets.
Example of Linked external style sheet
<html>
<head>
<title>Style Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
... <p class="excerpt">affected text</p> ...
</html>

• The rel attribute specifies the relationship of the

referenced file to this page.
• The type attribute must be "text/css".
• The href attribute is a URL pointing to the external
style sheet.
 Style Rules Precedence
Multiple Style Sheets:
• If some properties have been defined for the same selector
(element) in different style sheets, the value from the last read style
sheet will be used.
• Example
• Assume that an external style sheet has the following style for the
<h1> element:
• h1 {
color: navy;
}
• then, assume that an internal style sheet also has the following style
for the <h1> element:
• h1 {
color: orange;
}
• If the internal style is defined after the link to the
external style sheet, the <h1> elements will be
"orange":
Example
• <head>
<link rel="stylesheet" type="text/
css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
• However, if the internal style is defined before the
link to the external style sheet, the <h1> elements
will be "navy":
Example
• <head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyl
e.css">
</head>
 Cascading Order
• We use the term cascading because there is an
established order of priority to resolve these
formatting conflicts:
1) Inline style (highest priority)
2) Internal style sheet (second priority)
3) External style sheet (third priority)
4) Web browser default (only if not defined
elsewhere)
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.
 CSS- Background

The CSS background properties are used to define

the background effects for elements.
CSS background properties are:
• background-color : body {background-
color: lightblue;}
• background-image:
Body {background-image: url("paper.gif");}
• By default, the image is repeated so it covers the
entire element which makes the text is hardly
readable. So it should’t set like above code.
So to avoid the above complexity, we can use background-
repeat property. Like:
Body {
background-image:url (“computer.gif”);
background-repeat: repeat-x; horizontaly or
background-repeat:repeat-y; vertically or
background-repeat: no-repeat;
}
• background-position
In the example above, the background image is shown in the
same place as the text. We want to change the position of
the image, so that it does not disturb the text too much.
• The position of the image is specified by the background-
position property:
• Background-position property values are:
– right top, right bottom, left top and left bottom. To
see the effect, use margin.
• Background-attachment: used to specify that
the background image should be fixed or
scroll.
– body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
margin-right:200px;
}
• 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 in this order.
Forexample,
body
{ background: #ffffff url("img_tree.png") no-repeat right top;}
 CSS- border
• Border properties are: style, color and width
• Some border-style properties values are: dotted,
dashed, none, solid, double, ridge, etc.
– Example: p.dotted {border-style: dotted;}
• Border-width property values are: top, right, bottom
and left sequentially. But width can have one of the
values.
– Border-width will have an effect if border-style is set first.
– p.one {
border-style: solid;
border-width: 5px;
border-color: green;
}
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 is also properties for specifying each of
the borders (top, right, bottom, and left):
• If the border-style property has four values:
• border-style: dotted solid double dashed;
– top border is dotted
– right border is solid
– bottom border is double
– left border is dashed
• If the border-style property has three values:
• border-style: dotted solid double;
– top border is dotted
– right and left borders are solid
– bottom border is double
• If the border-style property has two values:
• border-style: dotted solid;
– top and bottom borders are dotted
– right and left borders are solid
• If the border-style property has one value:
• border-style: dotted;
– all four borders are dotted
Border - Shorthand Property
• The border property is a shorthand property for the
following individual border properties:
– border-width
– border-style (required)
– border-color
Example
• p{
border: 5px solid red;
}
– Left Border
• p{
border-left: 6px solid red;
background-color: lightgrey;
}
 CSS- margin
• the CSS margin properties are used to generate space
around elements.
• The margin properties set the size of the white space
outside the border.
– Example, body {margin:5px}
Margin - Individual Sides
CSS has properties for specifying the margin for each side of
an element: margin-top, right, bottom, left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px
• % - specifies a margin in % of the width of the containing
element
Tip: Negative values are allowed.
• The following example sets different margins for all four sides
of a <p> element:
• Example
• p{
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
Margin short hand property. Example
• p{
margin: 100px 150px 100px 80px;
}
• You can set the margin values as shorten as border width.
 CSS- padding
• The CSS padding properties are used to generate space around content.
• The padding clears an area around the content (inside the border) of an
element.
• All the settings are similar with css margin.
Example:
div.ex1 {
padding: 25px 50px 75px 100px;
}

div.ex2 {
padding: 25px 50px 75px;
}

div.ex3 {
padding: 25px 50px;
}

div.ex4 {
padding: 25px;
}
 CSS- font: font style
The following properties can be specified for any element that contains
text, such as <h1> thru <h6>, <p>, <ol>, <ul>, and <a>:
Property Some Possible Values
color: blue, green, yellow, red, white, etc.
font-family: Arial, Verdana, "Times New Roman"
font-size: large, 120%, 20px (pixels)
font-weight: bold, normal
font-style: italic, normal
Note: The font-family property should hold several font names as a
"fallback" system. If the browser does not support the first font, it tries
the next font, and so on. Start with the font you want, and end with a
generic family, to let the browser pick a similar font in the generic family,
if no other fonts are available.
Example: p {
font-family: "Times New Roman", Times, serif; }
 CSS- text: text formatting
Text formatting properties are:
• Text Color,
• text-align
• text-decoration with values of overline; line-through,
underline, and none; used to set or remove
decorations from text.
– Example: a { text-decoration: none;}
– h1 {
text-decoration: overline;
}
h2 { text-decoration: line-through;}
h3 { text-decoration: underline; }
• Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text.
• It can be used to turn everything into uppercase or lowercase
letters, or capitalize the first letter of each word:
Example
• p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
• Text Indentation
The text-indent property is used to specify the indentation of the first line of a text:
Example
• p{
text-indent: 50px;
}
• Letter Spacing
The letter-spacing property is used to specify the space between the characters in a
text.
The following example demonstrates how to increase or decrease the space
between characters:
Example
• h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}
• Line Height
The line-height property is used to specify the space between lines:
Example
• p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}
Word Spacing
The word-spacing property is used to specify the space between the words in a text.
The following example demonstrates how to increase or decrease the space between
words:
Example
• h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
 CSS- links
styling links
• Links can be styled with any CSS property
(e.g. color, font-family, background, etc.).
Example: a {
color: hotpink; background-color: yellow; Font-family: arial; }
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
– The text-decoration: property with none value is mostly
used to remove underlines from links.
• Example
a:link { color: red; background-color: yellow; text-
decoration: none; }
a:visited { color: green; background-color: cyan; text-
decoration: none; }

a:hover { color: hotpink; background-color: lightgreen;

text-decoration: underline; }

a:active { color: blue; background-color: hotpink;

text-decoration: underline; }
You can set each property of links in one line separating by
comma if each state share similar settings like this:
A:link, a:visited , a:hover, a:active { color: blue;
background-color: hotpink;
text-decoration: underline; }
 CSS layout
1. CSS Layout - The display Property
• The display property specifies if/how an
element is displayed so it is the most
important CSS property for controlling layout.
• 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>
• 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>
common example is making inline <li> elements for horizontal menus:
Example
• li {
display: inline; or display: block; display: none
}
 2. CSS Layout Positioning Properties
Syntax=position:static|absolute|fixed|relative|initial|inherit;
static
Default value. Elements render in order, as they appear in the document
flow
absolute
The element is positioned relative to its first positioned (not static)
ancestor element
fixed
The element is positioned relative to the browser window
relative
The element is positioned relative to its normal position, 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
• Example
div.static {
position: static;
border: 3px solid #73AD21; }
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;}
div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
• An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like
fixed).
• Example :
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}

div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
 Overlapping Elements

Overlapping Elements 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:
Example
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
Positioning Text In an Image
• How to position text over an image:
• You can position text over image using position
property at left-right, left-bottom, center, right-top and
right-bottom by assigning values for each alignment.
• Example:
.topleft {
position: absolute;
top: 8px;
left: 16px; }
img { width: 100%;
height: auto;
opacity: 0.3;
 3. CSS Layout - Overflow
• The CSS overflow property specifies whether to
clip content or to add scrollbars when the content
of an element is too big to fit in a specified area.
• Example
div {
width: 200px;
height: 50px;
background-color: #eee;
border: 1px solid black;
overflow: visible;
}
• The overflow property has the following
values:
– visible - Default. The overflow is not clipped. It
renders outside the element's box
– hidden - The overflow is clipped, and the rest of
the content will be invisible
– scroll - The overflow is clipped, but a scrollbar is
added to see the rest of the content
– auto - If overflow is clipped, a scrollbar should be
added to see the rest of the content
• Note: The overflow property only works for
block elements with a specified height.
 4. CSS Layout - float
• The float property specifies whether or not an
element should float.
• In its simplest use, the float property can be used
to wrap text around images.
• The following example specifies that an image
should float to the right in a text:
Example
img {
float: right; or you can say left
margin: 0 0 10px 10px;
}
 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:
• Note: IE8 (Internet explorer 8) and earlier
use filter:alpha(opacity=x). The x can take a
value from 0 - 100. A lower value makes the
element more transparent.
• Transparent Hover Effect
The opacity property is often used together with
the :hover selector to change the opacity on mouse-
over:

• Example on image opacity

img {
opacity: 0.5;
}

img:hover {
opacity: 1.0;
}