Week 7 & 8
Introduction to
Cascading Style Sheets (CSS)
Prepared by:
ITP102 Faculty
At the end of the lesson, the learner
will be able to:
• Define Cascading Style Sheets;
• Compare and contrast the different CSS selectors;
and
• Create a simple web page using CSS.
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be
displayed on screen, paper, or in other
media.
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.
(w3schools.com)
Why use CSS?
CSS is used to define styles for your web
pages, including the design, layout and
variations in display for different devices and
screen sizes.
HTML was NEVER intended to contain tags
for formatting a web page.
CSS removed the style formatting from the
HTML page.
Benefits of CSS
Solves a big problem
Saves a lot of time
Provide more attributes
CCS Syntax
A CSS rule consists of a selector and a
declaration block.
CSS Syntax:
CCS Syntax (continuation)
where:
Selector: Selector indicates the HTML
element you want to style. It could be any
tag like <h1>, <title> etc.
Declaration Block: The declaration
block can contain one or more
declarations separated by a semicolon.
Each declaration contains a property
name and value, separated by a colon.
CCS Syntax (continuation)
Property: A Property is a type of
attribute of HTML element. It could be
color, border etc.
Value: Values are assigned to CSS
properties.
Example:
p is a selector in CSS (it points to the
HTML element you want to style: <p>).
color is a property, and red is the
property value
text-align is a property, and center is
the property value
CSS Selector
CSS selectors are used to select the
content you want to style. Selectors are the
part of CSS rule set. CSS selectors select
HTML elements according to its id, class,
type, attribute etc. (javatpoint.com)
Different types of CSS Selectors
CSS Element Selector
The element selector selects the HTML element
based on the element name. (select elements
based on name, id, class)
Different types of CSS Selectors
(continuation)
CSS Id Selector
The id selector selects the id attribute of
an HTML element to select a specific
element. An id is always unique within
the page so it is chosen to select a single,
unique element.
It is written with the hash character (#),
followed by the id of the element.
Different types of CSS Selectors
(continuation)
CSS Class Selector
The class selector selects HTML elements
with a specific class attribute.
To select elements with a specific class,
write a period (.) character, followed by
the class name.
Different types of CSS Selectors
(continuation)
CSS Universal Selector
The universal selector is used as a
wildcard character (*). It selects all the
elements on the pages.
Different types of CSS Selectors
(continuation)
CSS Group Selector
The grouping selector is used to select all
the elements with the same style
definitions.
Grouping selector is used to minimize the
code. Commas are used to separate each
selector in grouping.
Different types of CSS Selectors
(continuation)
CSS Group Selector (continuation)
All CSS Selectors
Selector Example Example Description
#id #firstnam Selects the element with
e id="firstname"
.class .intro Selects all elements with
class="intro"
element.class p.intro Selects only <p> elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element, div, p Selects all <div> elements and
element all <p> elements
Video Tutorial
https://www.youtube.com/watch?
v=ZNskBxLVOfs&list=PLP9IO4UYNF0UCaUSF
3XNZ1U9f01E5h5PM
How to add CSS
CSS is added to HTML pages to format the
document according to information in the
style sheet. There are three ways to insert
CSS in HTML documents:
Inline CSS
Internal CSS
External CSS (javatpoint.com)
Inline CSS
Inline CSS is used to apply CSS on a single
line or element.
Internal CSS
Internal CSS is used to
apply CSS on a single
document or page. It can
affect all the elements of
the page. It is written
inside the style tag
within head section of
html.
External CSS
External CSS is used to apply CSS on
multiple pages or all pages. Here, we write all
the CSS code in a css file. Its extension must
be .css for example style.css.
References:
https://www.w3schools.com/css/
https://www.tutorialspoint.com/css/index.ht
m
https://www.javatpoint.com/css-tutorial
Thank
you!
