Chapter Three

Cascading Style Sheets (CSS)

Compiled by Dawit Uta. (M. Tech.)

Department of Computer Science , WSU
website address: www.davidtechnotips.com
1
 Cascading Style Sheets (CSS)
Contents
→ Basics of CSS?
→ Introduction Cascading Style Sheets (CSS)
→ Advantages of using CSS
→ CSS versions
→ CSS syntax (CSS Selectors & Declarations)
→ Attaching CSS with HTML (External , Embedded and Inline)
→ Style Sheet Rules
→ Style Inheritance
→ Style Rules Precedence
→ Style Properties:
→ Font, Text, Foreground and Background properties
→ Layout & Positioning Properties.
→ CSS Box Model, Table Styling Properties
→ More on Styling List (Creating Navigation bars)
→ CSS Measuring Units Compiled by Dawit U. (M. Tech.) 2
 CSS Introduction
 CSS: stands for Cascading Style Sheets (CSS)
 Style Sheets: collection of formatting information (rule) that controls how an HTML
element appears.
 Cascading Style Sheets is a style sheet language used for describing the presentation
of a document written in a markup language such as HTML. CSS is a cornerstone
technology of the World Wide Web, alongside HTML and JavaScript
 cascading: determines how styles get applied to our webpages when there are
conflicting rules.
Styles define how to display HTML elements
– Define sizes, spacing, fonts, colors, layout, etc.
Compiled by Dawit U. (M. Tech.) 3
Example

Compiled by Dawit U. (M. Tech.) 4

 Tags like <font>, and color attributes were added to the HTML 3.2
specification.
 Development of large websites, where <font> tag and color attributes were
added to every single page, became a long and expensive process and
terrible for web developers.
 To solve this problem, the group of people in World Wide Web Consortium
(W3C) created and maintains CSS.
 CSS removed the style formatting from the HTML 4.0 and stored in a
separate CSS file.
 This file enable you to change the appearance and layout of all the pages in
a Web site, just by editing one single file. All browsers support CSS today.

Compiled by Dawit U. (M. Tech.) 5

 Advantages of CSS
 CSS saves time: we can write CSS once and reuse same CSS file in
multiple HTML pages.

 Pages load faster: if we are using CSS, we do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply to all
the occurrences of that tag. So less code means faster download times.

 Easy maintenance: to make a global change, simply change the style and
all elements in all web pages will be updated automatically.

Compiled by Dawit U. (M. Tech.) 6

 Global web standards: Now HTML attributes are being deprecated and
its being recommended to use CSS.
 Multiple devices compatibility: Style sheets allow content to be optimized
for many types of devices. E.g. PDA and cell phones.

Responsive Web 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)
 A web page should look good on any device!
Compiled by Dawit U. (M. Tech.) 7
Setting The Viewport
 When making responsive web pages, add the following <meta> element in all
your web pages
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Responsive Images
 Responsive images are images that scale nicely to fit any browser size.
 If the CSS width property is set to 100%, the image will be responsive and scale
up and down.
<img src="image2.jpg" style="width:100%;">

Compiled by Dawit U. (M. Tech.) 8

 CSS versions
There are three versions of CSS.

The main differences between the three levels are as follows:

✦ CSS1 defines basic style functionality, with limited font and limited positioning
support.

✦ CSS2 adds aural properties, paged media, better font and positioning support. Many
other properties have been refined as well.

✦ CSS3 adds presentation-style properties, allowing you to effectively build presentations.

 Keep in mind that you don’t have to specify the level/version of CSS you are using for
your documents.

Compiled by Dawit U. (M. Tech.) 9

 The Style Syntax (CSS Selectors & Declarations)
All style rules follow the same basic format. A CSS rule has two main parts: a selector, and
one or more declarations:

 The selector points to the HTML element you want to style.

 The selector is followed by the formatting property definitions, which are enclosed in
braces ({ }).

 When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.

Compiled by Dawit U. (M. Tech.) 10

 Style Sheets Syntax (CSS Selectors & Declarations) cont.
 Selectors are separated by commas

 Declarations are separated by semicolons

 Properties and values are separated by colons

h1,h2,h3 { color: green; font-weight: bold; }

CSS Comments: are used to explain your code, and may help you when
you edit the source code at a later date. Comments are ignored by browsers.

 A CSS comment begins with /* and ends with */

Compiled by Dawit U. (M. Tech.) 11

 Selectors
Selector: which tells the rule what elements it should apply to.

 Type selector: in this case the selectors are HTML tags. Like body, h1..h6,
p, table, ul, li etc.

h1 {

font-family: verdana,sans-serif; }

 The id Selector

The id selector is used to specify a style for a single, unique element. It uses
the id attribute of the HTML element, and is defined with a hash sign (#).
Compiled by Dawit U. (M. Tech.) 12
 The class Selector
 The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
 This allows you to set a particular style for any HTML elements with the same
class.
 The class selector uses the HTML class attribute, and is defined with a period (.)
 You can also specify that only specific HTML elements should be affected by a
class.
eg. h1.center {text-align:center;}

Compiled by Dawit U. (M. Tech.) 13

 Selectors cont…
 Descendant Selector
Elements may be matched depending on how they are nested in the
document tree (HTML)
Examples:
ul li { color: #30FF0A; }// apply for li under ul
.header a { color: green; }

 Multiple selectors can be combined with commas:

h1, .link, #top-link {font-weight: bold}

Compiled by Dawit U. (M. Tech.) 14

 Pseudo classes
In the style sheet, a pseudo-class name is preceded by a colon.
Some of link related pseudo classes are:
a:link { color : red }
 Applies when the link has not yet been visited.
a:visited { color : green }
 Applies when the link has been visited.
a:hover { color: yellow }
 Applies when the mouse is over the link.
a:active { color: purple }
 Applies when the link is just clicked

Compiled by Dawit U. (M. Tech.) 15

 Attaching CSS with HTML
 HTML (content) and CSS (presentation) can be
Integrated in three ways:
1. Inline: the CSS rules applied inside body
section using style attribute.
2. Embedded: CSS rule applied inside the
<head> section using <style> tag
3. External: CSS rules in separate file. This is
also applied inside the <head> section using
<link> tag.

Compiled by Dawit U. (M. Tech.) 16

 1. Inline CSS

 To use inline styles you use the style attribute in the relevant tag. The
style attribute can contain any CSS property.
 No selectors are needed in this type.
 The example shows how to change the color and the left margin of a
paragraph:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
 An inline style loses many of the advantages of style sheets by mixing content
with presentation.

Compiled by Dawit U. (M. Tech.) 17

 2. Embedded/internal Styles
 Embedded in the HTML in the <style> tag:
<style type="text/css">
The <style> tag is placed in the <head> section of the document. style
tag must contain a type attribute that identifies the content of the style
element as “text/css”
type attribute specifies the MIME (Multipurpose Internet Mail
Exchange) type of the enclosed style sheet.
 MIME describes the format of the content
 Other MIME types include text/html, image/gif, text/javascript.
 Used for document-specific styles
 An internal style sheet should be used when a single document has a
unique style.
Compiled by Dawit U. (M. Tech.) 18
<!DOCTYPE html> Embedded Styles: Example
<head>
<title>Style Sheets</title> Output
<style type="text/css">
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
Compiled by Dawit U. (M. Tech.) 19
 3. External CSS Styles
♣ External linking
 Separate pages can all use a shared style sheet
 Only modify a single file to change the styles across your entire Web
site.
 An external style sheet is ideal when one style sheet file is applied to
many pages.
♣ link tag (with a rel attribute)
Specifies a relationship between current document and another document.
<link rel="stylesheet" type="text/css"
href="styles.css">
♣ link elements should be in the <head> section.

Compiled by Dawit U. (M. Tech.) 20

 An external style sheet can be written in any text
editor. The file should not contain any html tags.
Your style sheet should be saved with a .css
extension.
An example of a style sheet file is shown below:
a { text-decoration: none ;}
a:hover { text-decoration: underline;
color: red;
background-color: #CCFFCC; }
em { color: red;
font-weight: bold; }
ul { margin-left: 2cm; }

Compiled by Dawit U. (M. Tech.) 21

 Styles inheritance
 A descendant is an element that is enclosed (nested) in another, its
ancestor. (If it is an immediate descendant, it is a child of the
enclosing element, its parent. Elements having the same parent are
siblings.)
 All descendants of an element inherit its style properties, unless these
are overridden by their own style rules.
 If two styles could apply to the same element, the one defined by the
more specific rule will be used.
 In general, properties related to the styling of text font size, color,
style, etc. are inherited.
 Properties such as borders, margins, backgrounds, and so on, that
affects the boxed area around the element tend not to be inherited.
Compiled by Dawit U. (M. Tech.) 22
 Style Sheet Rules Default Browser Styles
Browsers have default CSS styles
– Used when there is no CSS information or any
other style information in the document
Attention: default styles differ in browsers
– E.g. margins, paddings and font sizes differ most
often and usually developers reset them
* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: 0; }

Compiled by Dawit U. (M. Tech.) 23

 Multiple Style Sheets
 If some properties have been set for the same selector in different style
sheets, the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3{
text-align:right;
font-size:20pt;
}
Compiled by Dawit U. (M. Tech.) 24
If the page with the internal style sheet also links to the external style sheet
the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment
and the font-size is replaced by the internal style sheet.

Compiled by Dawit U. (M. Tech.) 25

 Style Rules Precedence or Cascading order
What style will be used when there is more than one style
specified for an HTML element?
 Generally speaking we can say that all the styles will
"cascade" into a new "virtual" style sheet by the
following rules, where number four has the highest
priority, which means that it will override all other
style:
1. Browser default
2. External style sheet
3. Embedded (Internal) style sheet
4. Inline style (inside an HTML element)

Compiled by Dawit U. (M. Tech.) 26

In generally:
 Id declaration are more powerful than class declarations and will
override them.
 Last declared and /or closest to the content will applied.
 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.

Compiled by Dawit U. (M. Tech.) 27

 Property Value Metrics in the CSS Rules
You can specify your values using several different metrics, depending
upon your needs and use.
CSS styles support the following metrics:
✦ CSS keywords such as: thin, thick, transparent, ridge, and so forth
✦ Real-world measures
• inches (in)
• centimeters (cm)
• millimeters (mm)
E.g. 1in, 1cm, 1mm

Compiled by Dawit U. (M. Tech.) 28

 Property Value Metrics in the CSS Rules
 Colors are set in RGB format (decimal or hex):
Example: #a0a6aa = rgb(160, 166, 170)
Predefined color aliases exist: black, blue, etc.
 points (pt)- the points used by CSS2 are equal to
1/72th of an inch
 picas (pc)- 1 picas is equal to 12 points
✦ Screen measures in pixels (px) eg. 12px ,
✦ Relational to font size (font size (em) eg. 1.4em
✦ Percentages (%)
 Zero can be used with no unit: border: 0;
Compiled by Dawit U. (M. Tech.) 29
 Style Properties
CSS Font related properties
 font-size: is used to increase or decrease font size.
The default font size in browsers is 16px/1em
Values: length unit, percentage, xx-small, x-small, small, medium, large, x-
large, xx-large, smaller, larger. The only acceptable values for font-size in
modern web design are em measurements, percentage values, and keywords.
These are preferred because they allow users to resize text using the text-zoom
feature on their browser.
 font-weight: is used to increase or decrease how bold or light a font appears.
Values can be normal, bold, bolder, lighter or a number in range [100, 200,300
… 900] and it’s default is normal
Compiled by Dawit U. (M. Tech.) 30
 font-family: is used to change the face of a font.
Values: one or more font or generic font family
names, separated by commas.
Example: verdana, sans-serif, etc.
– The browser loads the first one that is available
– There should always be at least one generic font
The majority of professional web sites use Verdana
because it was specially designed to be legible at
small sizes on computer monitors.

Compiled by Dawit U. (M. Tech.) 31

five generic font families:
Serif - Times, Georgia, and New Century Schoolbook
Sans-serif - Helvetica, Geneva, Verdana, and Arial,
Monospace - Courier, and Courier New
Cursive - Zapf Chancery, and Comic Sans.
Fantasy - Algerian, and Cooper Black
eg.
body { font-family: Arial; }
tt { font-family: Courier, monospace; }
p { font-family: "Times New Roman", Verdana, sans-
serif; }
Use quotation if the font type has space

Compiled by Dawit U. (M. Tech.) 32

 Cont.….
font-style: this property affects the posture of the text.
Values: normal, italic, oblique
 Font-Variant (Small Caps): allow designers to specify such a
small-caps font for an elements.
values: normal, small-caps and it’s default is normal

Compiled by Dawit U. (M. Tech.) 33

 Shorthand notations font Property
Shorthand rule for setting multiple font properties at the same
time
font:italic small-caps bold 12px/16px verdana
is equal to writing this:
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;

Compiled by Dawit U. (M. Tech.) 34

 Font limitations
Why specify more than one font?
 Browsers are limited to displaying fonts that are already installed
on the user’s machine.
 CSS allows you to provide a list of back-up fonts if your first
choice is not be available.
 When you specify a generic font family, the browser chooses an
available font from that stylistic category.
p { font-family: "Trebuchet MS", Verdana, sans-serif; }
1 2 3

Font-type Font-family

Compiled by Dawit U. (M. Tech.) 35

 CSS Text-related Properties
 color: – specifies the color of the text
Values: color value (name or numeric), RGB
Default: depends on the browser
The 17 standard color names defined in CSS2.1:

1. yellow
2. navy 6. purple 11. black 16. red
3. blue 7. fuchsia 12. silver 17. orange
4. teal 8. green 13. gray
5. aqua 9. lime 14. white
10. olive 15. maroon
 direction: used to set the text direction
Values: rtl means right to left

Compiled by Dawit U. (M. Tech.) 36

 text-decoration this property is used to set or remove
decorations(underlines) from text and links.
Values: none, underline, line-through, overline, blink
 text-align: defines the alignment of text or other content. Values: left,
right, center, justify
 Text-transformation: This property is used to specify uppercase and
lowercase letters in a text.
Values: none, uppercase, lowercase, capitalize
 text-indent: This property is used to specify the indentation of the first
line of a paragraph.
Value: px, em, percent
 letter-spacing: is used to add or subtract the space b/n letters
Compiled by Dawit U. (M. Tech.) 37
 CSS Background Style
 CSS background properties are used to define the background effects for
each element.
 background-image: property specifies an image to use as the background of
an element.
 URL of image to be used as background, e.g.:
background-image:url("back.gif");
 background-color: property specifies the background color of an element.
Values: color name, hexadecimal, rgb(), transparent.
 Its possible to use color and image at the same time.
 background-repeat: control display of the image.
Values: repeat-x, repeat-y, repeat, no-repeat
 background-attachment: Sets whether a background image is fixed or
scrolls with the rest of the page
values: fixed / scroll
Compiled by Dawit U. (M. Tech.) 38
 Backgrounds cont.…
background-position: specifies vertical and horizontal
position of the background image
Vertical position: top, center, bottom
Horizontal position: left, center, right
Both can be specified in percentage or other numerical values
– Examples:

background-position: top left;

background-position: -5px 50%;

Compiled by Dawit U. (M. Tech.) 39

 Background Shorthand Property
Shorthand rule for setting background properties at the same time:
background: #FFF0C0 url("back.gif") no-repeat
fixed top;
is equal to writing:
background-color: #FFF0C0;
background-image: url("back.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
– Some browsers will not apply both color and image for background
if using shorthand rule

Compiled by Dawit U. (M. Tech.) 40

 CSS Box Model
 All HTML elements can be considered as boxes.
 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:

Compiled by Dawit U. (M. Tech.) 41

 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.

 In order to set the width and height of an element correctly in all browsers,
you need to know how the box model works.
Compiled by Dawit U. (M. Tech.) 42
 CSS Margin properties
 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. There are CSS properties
for setting the margin for each side of an element (top, right, bottom, and
left).

Compiled by Dawit U. (M. Tech.) 43

 CSS Margin properties cont…
Example
Set different margins for all four sides of a
<p> element:

p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

To shorten the code, it is possible to specify all the margin properties in one property. Use the
margin shorthand property with four values:

Compiled by Dawit U. (M. Tech.) 44

 CSS Padding properties
Padding is used to create space around an element's content,
inside of any defined borders.

Compiled by Dawit U. (M. Tech.) 45

Read about: table and list styling, layout and positioning
properties

The end of Chapter three

Compiled by Dawit U. (M. Tech.) 46