Chapter Four

CSS (Cascading Style Sheets)

1
 Objectives
⚫ Understand what CSS is, how it works, and its relationship
with HTML.
⚫ Learn the syntax of CSS and how to use different types of
selectors to style HTML elements.
⚫ Gain knowledge of various CSS properties such as color,
font, background, border, and more.
⚫ Learn how to use CSS to control the layout of a webpage,
including techniques like flexbox and grid.
⚫ Understand how to make a website responsive using CSS,
ensuring it looks good on all devices.
⚫ Develop skills to debug and solve common CSS issues.

2
 Introduction
• The markup that we’ve seen so far creates the
structure of the document, upon which the
presentation layer can be applied
• A style sheet is made up of one or more style
instructions (called rules or rule sets) that
describe how an element (or group of
elements) should be displayed
• Example:
• p{ color: red;}
• This CSS rule selects an element and
declares how it should look
• It specifies that the paragraphs in the document
3 should look red
 CSS Rules
• The two main sections of a rule are:
• the selector that is used to "find" (or
select) html elements.
• the declaration that provides the
rendering instructions
• The declaration, is made up of a property
(such as color) and its value (red), separated
by a colon and a space.
• One or more declarations can be placed
inside curly brackets, as shown below

4
 Takeaway question
• What is the difference between a CSS Rule, a
selector and a declaration
• Write a CSS rule that selects a button element
and declares it should look red
• Write a CSS rule that selects all paragraph
elements and declares they should all look
brown

5
 CSS Declaration
• The declaration is made up of a property/value
pair.
• Values are dependent on the property.
• Some properties take length measurements,
some take color values, and others have a
predefined list of keywords.
• Each declaration must end with a semicolon to
keep it separate from the subsequent
declaration
• If you omit the semicolon, the declaration and
the one following it will be ignored.
• The curly brackets and the declarations they
6 contain are often referred to as declaration
block
 CSS Selectors
• There are multiple ways to identify and tell
CSS which element in your HTML page it
should style,
• however the most popular methods are the
following,
• The element selector
• The element selector selects elements based on the
element name.
• The id selector
• The id selector uses the id attribute of an HTML tag to
find the specific element.
• The class selector
• The class selector finds elements with the specific class.
7
 Type selectors (element selectors)

• The simplest selector is the name of an

element called a type selector.
• Type selectors match all instances of the
element type in the document.
• For example, the following rule matches all H1
elements in a document:
• H1 { font-family: Helvetica }

8
 Attribute selectors
• CSS allows us to specify rules that match
according to attributes defined in the
document.
• A rule may match based on
• the simple presence of the attribute, or
• on one or more values for the attribute.

9
 Matching attributes, single values, and
multiple values
• An attribute selector can select on the
simple presence or absence of an attribute,
on the attribute and its value, or on the
attribute and one word in its value.
• The syntax is
• [att] (simple attribute selector)
• [att=val] (exact attribute value selector)
• [att~=val] (partial attribute value selector )

10
 Example
• For example, the following rule matches all
H1 elements that specify the "href"
attribute, whatever its value:
• H1[href ] { color: blue; }
• However, this rule matches all SPAN
elements whose "class" attribute has the
value "example":
• SPAN[class=example] { color: blue; }
• /* matches only <span class=“example">*/

11
 • CSS defines the following two types of equality:
the "=" sign and the "~=" sign
• For the rule to apply, the value following "="
must match the whole attribute value.
• img[title="first grade"] {border: 3px solid;}
• For the rule to apply, the string following "~="
must match at least one member
• img[title~="grade"] {border: 3px solid;}
• matches the word “grade” in the title, so
images with the title value “first grade” and
“second grade” would be selected

12
 The class and id attribute in HTML
• The HTML "class" attribute allows us to
group elements together and specify style
information for the entire group
• The HTML "id" attribute allows us to assign
a unique name to an element.
• Although we may refer to any attributes
with the generic syntax "[attribute=value]"
and "[attribute~=value]",
• CSS defines a special syntax for two
attributes: "class" and "id“

13
 The class attribute
• The shortcut syntax for "[class~=value]" is a
"." followed by the class value, with no
intervening white space.
• For example, we can assign style
information to all elements with
class="pastoral“ as,
• .pastoral { color: green }
• or just to H1 elements with class="pastoral“
as
• H1.pastoral { color: green }

14
 The ID attribute
• The shortcut syntax for "[ID~=value]" is a
“#" followed by the id value, with no
intervening white space.
• For example, we can assign style
information to all elements with id=“alert“
as,
• #alert { color: red }
• or just to H2 elements with id=“alert“ as
• H2.alert { color: green }

15
 Grouping
• When element selectors share the same
declarations, they may be grouped into
comma-separated lists.
• This
• H1 { font-family: Helvetica }
• H2 { font-family: Helvetica }
• H3 { font-family: Helvetica }
• is equivalent to:
• H1, H2, H3 { font-family: Helvetica }

16
 Contextual selectors
• At times, we may want selectors to match
elements that appear in a certain context, such
as "only those EM elements that are contained
by an H1 element".
• Context is defined as an ancestor/descendent
relationship between elements in the
document tree.
• The HTML Document Tree:
• Each HTML document can actually be
referred to as a document tree.
• There are ancestors, descendants, parents,
children and siblings.
17
 A diagram of an HTML document tree
• <body>
• <div id="content">
• <h1>Heading here</h1>
• <p>Lorem ipsum dolor sit
amet.</p>
• <p>Lorem ipsum dolor
<em>sit</em> amet.</p>
• <hr>
• </div>
• <div id="nav">
• <ul>
• <li>item 1</li>
• <li>item 2</li>
• <li>item 3</li>
• </ul>
• </div>
• </body>

18
 Contextual selectors terminology
• An ancestor refers to any element that is
connected but further up the document tree -
no matter how many levels higher.
• A descendant refers to any element that is
connected but lower down the document tree -
no matter how many levels lower.
• A parent is an element that is directly above
and connected to an element in the document
tree.
• A child is an element that is directly below and
connected to an element in the document tree.
• A sibling is an element that shares the same
19 parent with another element.
 contextual selector
• For example, in a sample web page, if we want to
add an emphasis to a headline (h1) and an em
by changing their colors. We can apply the
following rules:
• H1 { color: red } and
• EM { color: red }
• However, the effect will be lost in a case such
as:
• <H1>This headline is <EM>very</EM>
important</H1>
• We address this case by adding a contextual
rule to the previous two:
20
• H1 { color: red }
• EM { color: red }
 Example
• Thisrule targets em elements, but only
when they appear in h1, h2, and h3
headings.
• h1 em, h2 em, h3 em
• { color: red; }

21
 Child selector
• A child selector targets only the direct
children of a given element.
• There may be no other hierarchical levels
in between.
• They are indicated with the greater-than
symbol (>).
• Example, p > em {font-weight: bold;}
• This rule affects emphasized text, but only
when it is directly contained in a p element.
• An em element inside a link (a) within the paragraph
would not be affected

22
 Adjacent sibling selector
• An adjacent sibling selector targets an element
that comes directly after another element with
the same parent.
• It is indicated with a plus (+) sign.
• Example, h1 + p {font-style: italic;}
• This rule gives special treatment to
paragraphs that follow an h1.
• Other paragraphs are unaffected.

23
 Takeaway question
• Using the diagram shown below, write style rules that
make each of the elements given below red (color: red;).
Write the selectors as efficiently as possible.
1. h2 elements
2. h1 elements and all
paragraphs
3. Elements belonging
to the class “special”
4. All elements in the
“intro” section
5. strong elements in
the “main” section
6. The paragraph that
appears just after an
24
h2
 Pseudo-selectors
⚫ Browsers keep track of states of elements
⚫ such as whether a user’s cursor is over it
(hover state), whether has been checked or
disabled (for form elements) etc,
⚫ In CSS, we can apply styles to elements in these
states using a special kind of selector called a
pseudo-class selector.
⚫ Elements in these states belong to the same
class but, since the class name isn’t in the
markup, it’s called a pseudo-class.
⚫ pseudo-class selectors allow us to assign styles
to structures that don't necessarily exist in the
25 document, but are inferred by the state of the
elements
 Pseudo-Class Selectors
• Pseudo-class selectors are indicated by the
colon (:) character.
• They typically go immediately after an
element name,
• Examples of commonly used pseudo-class
selectors:
• Link pseudo-classes
• :Link applies a style to unclicked (unvisited)
links
• :Visited applies a style to links that have
already been clicked
• User action pseudo-classes
• :Focus applies when the element is selected
26
and ready for input
 Example
a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */

a:hover {
color: #FF00FF;
}
27 ⚫ input:focus { background-color: yellow; }
 Inheritance
• In general, properties related to the styling of
text: font-size, color, font-style, etc. are passed
down.
• Properties such as borders, margins,
backgrounds, and so on, that affect the boxed
area around the element tend not to be passed
down.
• For example, if you put a border around a
paragraph, you wouldn’t want a border around
every inline element (such as em, strong, or a)
it contains as well.
• You can use inheritance to your advantage
28
when writing style sheets.
 Attaching style to a document
1. External style sheet
• An external style sheet is ideal when the
style is applied to many pages
2. Internal style sheet
• An internal style sheet should be used when
a single document has a unique style.
3. Inline style
• may be used to apply a unique style for a
single element

29
 External style sheets
• An external style sheet is a separate, text-only
document that contains a number of style rules.
• It must be named with the .css suffix. The .css
document is then linked to or imported into one or
more HTML documents
• Each page must include a link to the style sheet
with the <link> tag.
• <head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
• In this way, all the files in a website may share the
same style sheet
30 • This is the most powerful and preferred method
for attaching style sheets to content
 HTML <link> Tag
• <link rel="stylesheet" type="text/css“
href="mystyle.css">
• The <link> tag defines the relationship between
the current document and an external
resource.
• It is most often used to link to external style
sheets to your website.
• The rel attribute specifies the relationship
between the current document and the linked
resource
• The href attribute specifies the location (URL) of
the external resource (most often a style sheet
file)
31
• The type attribute specifies the media type of the
 Internal style sheets
• This is the type of style sheet is placed in a
document using the style element, and its rules
apply only to that document.
• The style element must be placed in the head
of the document.
• <head>
• <title>Required document title here</title>
• <style>
• /* style rules go here */
• </style>
• </head>

32
 Inline styles
⚫ You can apply properties and values to a single
element using
the style attribute in the element itself, as
shown here:
⚫ <h1 style=color: red>Introduction</h1>
⚫ To add multiple properties, just separate them
with semicolons, like this:
⚫ <h1 style=color: red; margin-top:
2em>Introduction</h1>
⚫ Inline styles apply only to the particular
element in which they appear.
⚫ Inline styles should be avoided, unless it is
33 absolutely necessary to override styles from an
embedded or external style sheet.