We are on a mission to address the digital
skills gap for 10 Million+ young professionals,
train and empower them to forge a career
path into future tech
Cascading Style Sheets
MARCH, 2025
Cascading Style Sheets
Introduction
• Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.
• Used to describe the presentation of documents
• Define sizes, spacing, fonts, colors, layout.
• Improve content accessibility and flexibility.
• It is a highly effective HTML tool that provides easy control over layout and presentation of website
pages by separating content from design.
• Typical CSS file is a text file with an extension .css and contains a series of commands or rules.
• These rules tell the HTML how to display.
3 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Introduction
• Developed to enable the separation of document content from document presentation
• Initial release in 1996 (CSS1).
• CSS2 published as a recommendation in May 1998 and builds on CSS1.
• CSS3 recommendation in June 1999 and builds on older versions CSS.
4 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
HTML without CSS
• “HTML without CSS is like a piece of candy
without a pretty wrapper.”
• Without CSS, HTML elements typically flow
from top to bottom of the page and position
themselves to the left by default.
• With CSS help, we can create containers or
HTML HTML + CSS
DIVs to better organize content and make a (Structure) (Presentation)
Web page visually appealing.
5 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
CSS
• CSS handles the look and feel part of a web page.
• Using CSS, you can control
– the color of the text
– the style of fonts
– the spacing between paragraphs
– how columns are sized and laid out
– what background images or colors are used
– layout designs and
– variations in the display for different devices and screen sizes
as well as a variety of other effect
6 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
CSS Benefits
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users
• Easy to learn
7 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Style Sheets Syntax
• Style sheets consist of rules, selectors, declarations, properties and values.
• Selectors are separated by commas.
• Declarations are separated by semicolons.
• Properties and values are separated by colons.
8 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet
• HTML (content) and CSS (presentation) can be linked in three ways:
• Inline: the CSS rules in the style attribute
– No selectors are needed
• Embedded/Internal: in the <head> in a <style> tag
• External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag or @import directive in embedded CSS block
• Example: @import url(sheet2.css);
9 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: Inline
• An inline style may be used to apply a unique style for a single element.
• An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly!
• To use inline styles, add the style attribute to the relevant tag.
• The style attribute can contain any CSS property.
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
<p>This is a paragraph.</p>
10 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: Internal
• An internal style sheet may be used if one single page has a unique style.
• Internal styles are defined within the <style> element, inside the head section of an HTML
page
• The <style> tag is used to define style information for an HTML document.
• Inside the <style> element you specify how HTML elements should render in a browser.
11 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: Internal
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
12 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: External
• With an external style sheet, you can change the look of an entire website by changing just
one file.
• Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the head section
• An external style sheet can be written in any text editor. The file should not contain any html tags.
• The style sheet file must be saved with a .css extension.
• Using external files is highly recommended.
• Simplifies the HTML document.
• Improves page load speed as the CSS file is cached.
13 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: External
• The <link> tag defines a link between a document and an external resource.
• The <link> tag is used to link to external style sheets.
rel
• Specifies the relationship between the current document and the linked document
type
• Specifies the media type of the linked document
href
• Specifies the location of the linked document
14 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: External
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
15 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Attaching Style sheet: Combined
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
<p>The style of this document is a combination of an external style sheet, internal style and inline style sheet</p>
16 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
CSS Rule Structure
• A CSS RULE is made up of a selector and a declaration.
• A declaration consists of property and value.
selector {property: value;}
declaration
17 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors
• Selectors determine which element the rule applies to
• 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:
h1 {color: green; }
Selectors
18 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Properties and Values
• Properties and values tell an HTML element how to • CSS code can be written in a linear
display. format or in a block format.
body {background: purple;}
h1 {color: green; } body {
h2 {font-size: large;} background: purple;
p {color: #ff0000;} color: green;
/*hexadecimal for red*/ }
19 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Grouping Selectors
• Group the same selector with different declarations together on one line.
• Example of grouping selectors (both are correct):
h1 {color: black;} h1 {
h1 {font-weight: bold;} OR color: black;
h1 {background: white;} font-weight: bold;
background: white;
20 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Grouping Selectors
• Group different selectors with the same declaration on one line.
• Example of grouping selectors (both are correct):
h1 {color: yellow;}
h2 {color: yellow;}
h3 {color: yellow;}
OR
h1, h2, h3 {color: yellow;}
21 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Grouping Selectors
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 (.): .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, and element with id top-link
22 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
ID’s and Classes
• ID's are unique
– Each element can have only one ID
– Each page can have only one element with that ID
• Classes are NOT unique
– You can use the same class on multiple elements.
– You can use multiple classes on the same element.
– Any styling information that needs to be applied to multiple objects on a page should be done
with a class.
23 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors
Selector Example Example description
.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set
within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an
element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements
24 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors
Selector Example Example description
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 is placed immediately after <div>
elements
element1~element2 p ~ ul Selects every <ul> element that is preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
More Selectors: https://www.w3schools.com/cssref/css_selectors.asp
25 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #1
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
26 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #2
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
27 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #3
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
28 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #4
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
29 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #5
<head>
<style>
[title~=flower]
{
border:5px solid yellow;
}
</style>
</head>
<body>
<p>The image with the title attribute containing the word "flower" gets a yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113" />
<img src="img_flwr.gif" title="flowers" width="224" height="162" />
<img src="landscape.jpg" title="landscape" width="160" height="120" />
<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>
30 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #6
<head>
<style>
input[type=text]:enabled {
background: #ffff00;
}
input[type=text]:disabled {
background: #dddddd;
}
</style>
</head>
<body>
<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled value="Disneyland">
</form>
31 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #7
<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p></form>
32 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Selectors: Example #8
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<p>Click inside the text fields to see a yellow background:</p>
<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>
33 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Comments in CSS
• Explain the purpose of the coding
• Help others read and understand the code
• Serve as a reminder to you for what it all means
• Starts with /*and ends with*/
Example:
p {color: #ff0000;} /*Company Branding*/
/* This is a single-line comment */
/* This is
a multi-line
comment */
34 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Values in CSS Rules
• Colors are set in RGB format (decimal or hex):
– Example: #a0a6aa = rgb(160, 166, 170)
– Predefined color aliases exist: black, blue, etc.
• Numeric values are specified in:
– Pixels, ems, e.g. 12px , 1.4em
– Points, inches, centimeters, millimeters
– E.g. 10pt , 1in, 1cm, 1mm
– Percentages, E.g. 50%
– Zero can be used with no unit: border: 0;
35 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets
Default Browser Styles
• Browsers have default CSS styles
– Used when there is no CSS information or any other style information in the document
• Caution: 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; }
36 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
THANK YOU
