CSS

“Cascading Style Sheet”

CSS
is the language that we use to style an HTML file, and
tell the browser how should it render the elements on
the page.

A CSS file contains several CSS rules.

2
CSS
Each rule is composed by 2 parts:
❑ the selector
❑ the declaration block

3
CSS
Selector is a string that identifies one or more
elements on the page, following a special syntax that
will soon talk about extensively.

Declaration block contains one or more declarations,

in turn composed by a property and value pair.

4
Introduction to CSS
How does CSS look like
How does CSS look like

A CSS rule set has one part called selector, and the
other part called declaration. The declaration
contains various rules, each composed of a
property, and a value.

7
CSS BASIC SYNTAX
 CSS Basic Syntax

selector { body {
property: value; background-color: cyan;
} }

CSS Basic Syntax 9

In this example,
p is the selector and applies one rule which sets the value
20px to the font-size property:

p{
font-size: 20px;
}

10
Multiple rules are stacked one after the other:

h1 {
font-size: 20px;
}
p{
color: blue;
}
11
A selector can target one or more items:

h1, p {
font-size: 20px;
}

12
Semicolons
Semicolons (;)

Every CSS rule terminates with a semicolon.

Semicolons are not optional, except after the last
rule, I suggest always using them for consistency
and to avoid errors if you add another property and
forget to add the semicolon on the previous line.

14
Semicolons (;)
❌ Wrong ✅ Correct

p{ p{
color: blue color: blue;
font-size: 16px font-size: 16px;
} }

15
Formatting &
Indentation
 Formatting and Indentation
There is no fixed rule for formatting. This CSS is
valid:
p{ p {font-size: 20px;}
font-size: 20px;}
a{
a {color: blue; color: blue;
} }
17
 Adding CSS
to an HTML page
Using the link tag
Using the link tag
The <link> tag connects your HTML file to a separate
CSS file.
╺ Instead of writing CSS on every page, you write it
once in a separate file.
╺ If you change one line in the CSS file, it updates
the whole website!

<link rel="stylesheet" type="text/css"

20
href="myfile.css" />
 Using the link tag
The <link> tag connects your HTML file to a separate
CSS file.
╺ Instead of writing CSS on every page, you write it
once in a separate file.
╺ If you change one line in the CSS file, it updates
the whole website!

<link rel="stylesheet" type="text/css" href="myfile.css" />

21
Using the style tag
Using the style tag
Instead of using the link tag to point to a separate
stylesheet containing CSS, we can add the CSS
directly inside a style tag.

<style>
...our CSS...;
</style>

23
Inline Styles
Inline Styles
Inline styles are the third way to add CSS to a page.
We can add an attribute to any HTML tag and add
CSS to it.

<p style="">...</p>

Example:
<p style="background-color: yellow">...</p>

25
CSS COMMENTS
 CSS Comments
Single Line Multiple Line

/* This is a CSS comment */ /* This

div { is
color: red; /* This is a CSS comment */ a
} CSS
comment */
div {
color: red;
}

CSS Comments 27
28
Next Class

29
30
CSS SELECTORS
 CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

❑ Simple selectors (select elements based on name, id, class)
❑ Combinator selectors (select elements based on a specific relationship between
them)
❑ Pseudo-class selectors (select elements based on a certain state)
❑ Pseudo-elements selectors (select and style a part of an element)
❑ Attribute selectors (select elements based on an attribute or attribute value)

CSS Selectors 32
 CSS Selectors
are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

❑ Simple selectors (select elements based on name, id, class)
❑ Combinator selectors (select elements based on a specific
relationship between them)
❑ Pseudo-class selectors (select elements based on a certain state)
❑ Pseudo-elements selectors (select and style a part of an element)
❑ Attribute selectors (select elements based on an attribute or
attribute value)

CSS Selectors 33
 CSS element Selector
❑ The element selector selects HTML elements based on the element
name.

Example
❑ Here, all <p> elements on the
page will be center-aligned,
with a red text color:

CSS Selectors > element Selector 34

 CSS element Selector

CSS Selectors > element Selector 35

 CSS id Selector
❑ The id selector uses the id attribute of an HTML element to select a
specific element.

❑ The id of an element is unique within a page, so the id selector is used

to select one unique element!

❑ To select an element with a specific id, write a hash (#) character,

followed by the id of the element.

CSS Selectors > id Selector 36

 CSS id Selector
Example
❑ The CSS rule below will be
applied to the HTML element
with id="para1":

CSS Selectors > id Selector 37

 CSS id Selector

CSS Selectors > id Selector 38

 CSS class Selector
❑ The class selector selects HTML elements with a specific class attribute.

CSS Selectors > class Selector 39

 CSS class Selector
To select elements with a specific class, write a period (.) character,
followed by the class name.

Example
❑ In this example all HTML
elements with class="center"
will be red and center-aligned:

CSS Selectors > class Selector 40

 CSS class Selector

CSS Selectors > class Selector 41

 CSS class Selector
You can also specify that only specific HTML elements should be
affected by a class.

Example
❑ In this example only <p>
elements with class="center"
will be red and center-aligned:
CSS Selectors > class Selector 42
 CSS class Selector

CSS Selectors > class Selector 43

 CSS class Selector
HTML elements can also refer to more than one class.

Example
❑ In this example the <p> element will be styled according to
class="center" and to class="large":

CSS Selectors > class Selector 44

 CSS class Selector

CSS Selectors > class Selector 45

 CSS Universal Selector
❑ The universal selector (*) selects all HTML elements on the page.

Example
❑ The CSS rule below will affect
every HTML element on the page:

CSS Selectors > Universal Selector 46

 CSS Universal Selector

CSS Selectors > Universal Selector 47

 CSS Grouping Selector
❑ The grouping selector selects all the HTML elements with the same
style definitions.

CSS Selectors > Universal Selector 48

 CSS Grouping Selector
❑ Look at the following CSS code (the h1, h2, and p elements have the
same style definitions):

╺ It will be better to group the selectors, to minimize the

code.
╺ To group selectors, separate each selector with a comma.

CSS Selectors > Universal Selector 49

 All CSS Simple Selector

CSS Selectors > Universal Selector 50