Chapter 3

Cascading Style Sheets (CSS)

What is CSS?

 Introduction to Cascading Style Sheets (CSS)

 CSS Basics, CSS Rule, CSS selectors, Font and Text properties,
Background properties, Layout and Positioning Properties

 Type of CSS Styles

 CSS Introduction
2

 CSS: stands for Cascading Style Sheets (CSS)

 Style Sheets: collection of formatting information (rule) that controls
how an element appears.
 cascading: determines how styles get applied to our webpages.
Styles define how to display HTML elements
 Used to describe the presentation of documents

 Define sizes, spacing, fonts, colors, layout, etc.

 CSS rules are defined as a property name followed by a colon and then

a property value.

01/08/2026
 Introduction to CSS
3

 CSS is a web page layout method that has been added to HTML to give
web developers more control over their design and content layout.
 Using CSS allows a designer to create a standard set of commands that
controls the style of all subsequent pages.
 These commands are embedded inside the web page or from an external
file/page.

01/08/2026
 Introduction to CSS…
4

 With CSS you can add style (fonts, colors, spacing, and size) to
web documents.
 More advanced techniques control the layout of the page without
the use of tables or other cumbersome HTML.
 CSS separates the layout and the styles of a web page.
 Styles such as fonts, font sizes, margins, can be specified in one
place, and then the Web pages feed off this one master list, with the
styles cascading throughout the page or an entire site.

01/08/2026
 Introduction to CSS…
5

Styles Solve a Big Problem

 HTML was never intended to contain tags for formatting a document.

 HTML was intended to define the content of a document, like:

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
 The layout of the document was supposed to be taken care of by the browser,

without using any formatting tags.

 When tags like <font>, and color attributes were added to the HTML 3.2

specification, it started a nightmare for web developers.

 Development of large web sites, where fonts and color information were added

to every single page, became a long and expensive process.

 To solve this problem, W3C created CSS.

 In HTML 4.0, all formatting could be removed from the HTML document, and

stored in a separate CSS file.

 All browsers support CSS today.

01/08/2026
 Introduction to CSS…
6
 CSS is a breakthrough (advance) in web design because it allows
developers to control the style and layout of multiple web pages all
at once.
 As a web developer you can define a style for each HTML element
and apply it to as many web pages as you want.
 To make a global change, simply change the style, and all elements
in the Web are updated automatically.
Benefits of CSS
 The benefits of using style sheets are:
 Better type and layout controls- Presentational HTML never gets
close to offering the kind of control over type, backgrounds, and
layout that is possible with CSS.
01/08/2026
 Introduction to CSS…
7

 Less work - You can change the appearance of an entire site by editing one style
sheet.
 Potentially smaller documents and faster downloads - Old school practices of
using redundant font elements and nested tables make for bloated documents.
 Not only that, you can apply a single style sheet document to all the pages in a
site for further byte savings.
 More accessible sites - When all matters of presentation are handled by CSS,
you can mark up your content meaningfully, making it more accessible for non-
visual or mobile devices.
 Reliable browser support - Nearly every browser in current use supports all of
CSS Level 1 and the majority of CSS Level 2.

01/08/2026
 CSS Revisions/Levels
8

 There are three levels/versions of CSS:

 CSS1,

 CSS2, and

 CSS3

CSS 1
 The first CSS specification to become an official W3C Recommendation is CSS level1

 It was published in December 1996.

 Among its capabilities are support for

 Font properties such as typeface and emphasis

 Color of text, backgrounds, and other elements

 Text attributes such as spacing between words, letters, and lines of text

 Alignment of text, images, tables and other elements

 Margin, border, padding, and positioning for most elements

 Unique identification and generic classification of groups of attributes

01/08/2026
 CSS Revisions/Levels…
9

CSS 2
 CSS level 2 specification was developed by the W3C and published as
a Recommendation in May 1998.
 It is a superset of CSS 1
 CSS 2 includes a number of new capabilities like absolute, relative,
and fixed positioning of elements and z-index, the concept of media
types, support for aural style sheets and bidirectional text, and new
font properties such as shadows.
 CSS level 2 revision 1 or CSS 2.1 fixes errors in CSS 2
 It removes poorly-supported or not fully interoperable features and
adds already-implemented browser extensions to01/08/2026
the specification.
 CSS Revisions/Levels..
10

CSS3
 CSS Level 3 builds on CSS Level 2 module by module, using the CSS2.1
specification as its core.
 Each module adds functionality and/or replaces part of the CSS2.1
specification.
 The CSS Working Group intends that the new CSS modules will not
contradict the CSS2.1 specification: only that they will add functionality
and refine (improve) definitions.

01/08/2026
 CSS Syntax
11

 A CSS rule has two main parts:

 a selector, and

 one or more declarations.

 The selector is normally the HTML element you want to style.

 Usually, it is the HTML tags to be styled. E.g. <p>, <h1>
 Each declaration consists of:
 property and

 a value.

 The property is the style attribute you want to change.

 Each property has a value.

01/08/2026
 CSS Syntax…
12

The selector is followed by the formatting property definitions, which are

enclosed in braces ({ }).
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 "*/", like this:

01/08/2026
 CSS Syntax…
13

A CSS rule has two main parts: a selector, and one or more
declarations block (contain properties and values).

 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; }
01/08/2026
 Selectors
14

Selector: which tells the rule what elements it should apply to.
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to
specify your own selectors called "id" and "class".
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
"#".

01/08/2026
15

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 “.”
 You can also specify that only specific HTML elements should be affected by a class.

eg. [Link] {text-align:center;}

01/08/2026
 Selectors cont…
16

Generally you can use selector to apply:

 All elements of specific type (tag)

 Those that mach a specific attribute (id, class)

 Elements may be matched depending on how they are

nested in the document tree (HTML)

 Examples:

.header {color: green}

#menu {padding-top: 8px}

01/08/2026
 Selectors cont…
17

Three primary kinds of selectors:

 By tag (type selector):
h1 { font-family: verdana,sans-serif; }
 By element id:
#element_id { color: #ff0000; }
 By element class name (only for HTML):
.myClass {border: 1px solid red}
 Selectors can be combined with commas:
h1, .link, #top-link {font-weight: bold}
This will match <h1> tags, elements with class link,
01/08/2026
and element with id top-link
 Pseudo classes
18

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.

01/08/2026
 Property Value Metrics in the CSS Rules
19

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

01/08/2026
 Property Value Metrics in the CSS Rules

20

 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): 1pc is equal to 12 points
✦ Screen measures in pixels (px) e.g. 12px,
✦ Relational to font size (font size (em) eg. 1.4 em
✦ Percentages (%)
 Zero can be used with no unit: border: 0;
 em is relative to the font-size of the element (2em
means 2 times the size of the current font)
01/08/2026
 Default Browser Styles
21

 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
body, h1, p, ul, li { margin: 0; padding:
0; }

01/08/2026
 Font/Text-related CSS Properties
22

color: specifies the color of the text

Values: color value (name or numeric)
Default: depends on the browser
The 17 standard color names defined in
CSS2.1:
• yellow • purple • black • red
• navy • fuchsia • silver • orange
• blue • green • gray
• teal • lime • white
• aqua • olive • maroon

01/08/2026
 Font/Text-related CSS Cont…
23

font-size: size of font. The default text size in browsers is 16px

Values: length unit, percentage, xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, larger.
font-weight: boldness
Values can be normal, bold, bolder, lighter or a number in range [100 …
900] and it’s default is normal
 font-family: 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

01/08/2026
24

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: "Trebuchet MS", Verdana, sans-serif; }
Use quotation if the font type has
space

01/08/2026
 Font limitations
25

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 should your first
choice 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

01/08/2026
26

The majority of professional web sites use Verdana because it was

specially designed to be legible at small sizes on computer monitors.

01/08/2026
 Cont.….
27

 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 a elements.
values: normal, small-caps and it’s default is normal
 text-decoration – The text-decoration property is used to set or remove
decorations from text.
 The text-decoration property is mostly used to remove underlines from links
for design purposes.
Values: none, underline, line-through, overline, blink
 text-align – defines the alignment of text or other content
 Values: left, right, center, justify
01/08/2026
28

 Text-transformation: The text-transform property is used to

specify uppercase and lowercase letters in a text.
Values: none, uppercase, lowercase, capitalize
 text-indent: The text-indentation property is used to specify

the indentation of the first line of a text.

 Value: px, em, percent

01/08/2026
 Shorthand notations text/font Property
29

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;

01/08/2026
 Linking HTML and CSS
30

 HTML (content) and CSS (presentation) can be linked in three ways:

1. Inline: the CSS rules in the style attribute
2. Embedded: inside the <head> section in a <style> tag
3. External: CSS rules in separate file.

01/08/2026
 1. Inline CSS Linking
31

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

01/08/2026
 Inline CSS Linking…
32

 You can apply styles to a single element using the

style attribute in the element itself.
 Inline styles have the structure:
<tag style=”property: value”>

 Example:
<h1 style="color: red">Introduction</h1>

01/08/2026
 2. Embedded/internal Styles
33

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

01/08/2026
 Embedded CSS in HTML Example#1
34

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:
powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html> 01/08/2026
 Embedded Styles: Example#2

35

<!DOCTYPE html>
<head> <title>Style Sheets</title>
<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> 01/08/2026
 3. External CSS Styles
36
♣ 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="[Link]">

♣ link elements should be in the <head> section.

01/08/2026
 External CSS cont…
37
@import
 Another way to link external CSS files

 Example:
<style type="text/css">
@import
url("[Link]");
/* same as */
@import "[Link]";
</style>
 Old browsers do not recognize @import

 Using external files is highly recommended

 Simplifies the HTML document

 Improves page load speed as the CSS file is cached

01/08/2026
38
 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; }
01/08/2026
 Multiple Style Sheets
39

 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;
}

01/08/2026
40

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

01/08/2026
 Style inherited
41

 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 affect the boxed area
around the element tend not to be inherited.
01/08/2026
 .

42

01/08/2026
 Cascading order
43

What style will be used when there is more than one style specified for an
HTML element?
 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 (predominate) all other style:
1. Browser default
2. External style sheet
3. Embedded (Internal) style sheet
4. Inline style (inside an HTML element)
In general
 Id declaration are more powerful than class declarations and will override

them.
 Explicitly declared styles will always override implicitly inherited styles.

 Last declared and /or closest to the content will applied.

01/08/2026
 CSS Background Style
44
 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("[Link]");
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
01/08/2026
 Backgrounds cont.…
45
 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%;

01/08/2026
 Background Shorthand Property
46

shorthand rule for setting background properties at the same time:

background: #FFF0C0 url("[Link]") no-
repeat fixed top;

is equal to writing:
background-color: #FFF0C0;
background-image: url("[Link]");
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

01/08/2026
 The Box Model
47

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
HTML elements, and it consists of: margins, borders,
padding, and the actual content.
The box model allows us to place a border around elements
and space elements in relation to other elements.
01/08/2026
 Borders
48

 border-width: thin, medium, thick or numerical value (e.g.

10px)
 border-color: color alias or RGB value
 border-style: none, hidden, dotted, dashed, solid, double,
groove, ridge, inset, outset
 Each property can be defined separately for left, top, bottom and
right
 border-top-style, border-left-color, …

01/08/2026
 Border Shorthand Property
49

shorthand rule for setting border properties at once:

border: 1px solid red
is equal to writing:
border-width:1px;
border-style:solid;
border-color:red;
 Specify different borders for the sides via shorthand rules:
border-top-style/width/color, border-right-style/width/color,
border-bottom-style/width/color,
border-left-style/width/color
 When to avoid border:0
01/08/2026
50

The border-style property can have from one to four values.

border-style: dotted solid double dashed;
top border is dotted
right border is solid
bottom border is double
left border is dashed
border-style: dotted solid double;
top: dotted, right & left: solid, bottom: double
border-style: dotted solid;
top & bottom borders are dotted, right &left borders are solid
border-style: dotted;
all four borders are dotted

01/08/2026
 Width and Height
51

 width – defines numerical value for the width of element, e.g. 200px
 height – defines numerical value for the height of element, e.g. 100px
Margin and Padding
 margin and padding define the spacing around the element
 Numerical value, e.g. 10px or -5px

 Can be defined for each of the four sides separately - margin-top, padding-

left, …
 margin is the spacing outside of the border

 padding is the spacing between the border and the content

01/08/2026
 Margin and Padding: Short Rules
52

 margin: 5px;
 Sets all four sides to have margin of 5 px;

 margin: 10px 20px;

 top and bottom to 10px, left and right to 20px;

 margin: 5px 3px 8px;

 top 5px, left/right 3px, bottom 8px

 margin: 1px 3px 5px 7px;

 top, right, bottom, left (clockwise from top)

Same for padding

01/08/2026
 Display
53

 display: controls the display of the element and the way it is

rendered and if breaks should be placed before and after the
element or not.
 Values: inline, block
inline: no breaks are placed before and after element
block: breaks are placed before AND after the element.

01/08/2026
54

Reading Assignment

Position, float, visibility

01/08/2026