COMP519 Web Programming
Lecture 6: Cascading Style Sheets: Part 2
Handouts
Ullrich Hustadt
Department of Computer Science
School of Electrical Engineering, Electronics, and Computer Science
University of Liverpool
Document Style Sheets Overview
Document Style Sheets
•
Inline styles apply to individual elements in an HTML document
•
Using inline styles can lead to inconsistencies, as similar elements might
end up formatted differently as this approach is error-prone
•
Also, inline styles mix content and presentation, which violates the
(current) general philosophy of HTML and CSS
•
As a general rule, inline styles should be used as sparingly as possible
•
Alternatively, document style sheets allow for a cleaner separation of
content and presentation
•
Style definitions are placed in a style-element within the head-element of
an HTML document
•
The style-element contains a list of style directives
•
Each style directive consists of a selector together with one ore more
property:value pairs separated by semi-colons and enclosed inside braces
•
Selectors allow us to apply style definitions to all elements, a subclass of
elements, or individual elements throughout the document
COMP519 Web Programming Lecture 6 Slide L6 – 2
Document Style Sheets Overview
Document Style Sheets: Example
< html lang =" en - GB " >
<head >
<title > Documen t St yle Sheets </ title >
< st yle type =" text / css ">
h1 { color : Red;
text - align : center ;
font - style : italic ; }
p. inden ted { text - indent : 2 em ; }
</ style >
</head >
<body >
<h1 > Centre d Red Heading </h1 >
<p c lass =" ind ented "> This parag raph
will have the first line indented ,
but sub seque nt lines wi ll be
left - alig ne d .
</p >
<p > This p aragr ap h will not be
indented , all lines are
left - alig ne d as per de fault .
</p >
</body >
</html >
The h1 selector means that the style
will be applied to all h1-elements
The p.indented selector means
that the style will only be applied to
p-elements of class indented
COMP519 Web Programming Lecture 6 Slide L6 – 3
Document Style Sheets Selectors: Basic Forms
Selectors: Basic Forms
•
Selectors allow us to apply style definitions to all elements, a subclass of
elements, or individual elements throughout the document
•
The basic forms of selectors are:
Selector Example
Selects
* * All elements
element h1 All h1-elements
element, element h1, h2 All h1- and h2-elements
.class .indented All elements with
class="indented"
element.class p.indented All p-elements with
class="indented"
#id #name The element with id="name"
COMP519 Web Programming Lecture 6 Slide L6 – 4
Document Style Sheets Selectors: Basic Forms
Basic Selectors: Example
< st yle type =" text / css ">
/* Make hea dings at levels h1 to h3 blue , cen tr ed
with an italic font */
h1 , h2 , h3 { co lor : Blue ;
text - align : center ;
font - style : italic ; }
/* Remove u nderlin e from hyp erlin ks and make them red */
a { text - decor ation : none ;
color : Red ; }
/* Any elem en t of cl ass " al ert " should be un de rlined ,
have a bold font , orange b ackground , and 3 px of extr a
bo tt om pa dding to make the und erl ining more vis ib le */
. alert { text - de corat ion : under line ;
padding - bottom : 3 px ;
background - co lor : orange ;
font - weight : bold ; }
/* Use a font of 150% normal size for the ele me nt
with id " c1 " */
# c1 { font - size : 150%; }
</ style >
COMP519 Web Programming Lecture 6 Slide L6 – 5
Document Style Sheets Selectors: Basic Forms
Selectors, Classes and Inheritance
The style directive
. alert { text - de corat ion : under line ; padding - bottom : 10 px ;
background - co lor : orange ; font - weight : bold ; }
creates a style for the class “alert” that can (in principle) be applied to
any HTML element by associating it with that class.
•
Applied to a p-element
<p c lass =" alert " > Help Me ! I ’m t rapped on a COMP519 slide ! </p>
we obtain the following:
COMP519 Web Programming Lecture 6 Slide L6 – 6
Document Style Sheets Selectors: Basic Forms
Selectors, Classes and Inheritance
The style directive
. alert { text - de corat ion : under line ; padding - bottom : 10 px ;
background - co lor : orange ; font - weight : bold ; }
creates a style for the class “alert” that can (in principle) be applied to
any HTML element by associating it with that class.
•
Applied to an li-element
<ol >
<li class =" alert " > Help Me ! </li >
<li >I’m trap pe d on a COMP519 slide ! </ li >
</ol >
we obtain the following:
•
As one might expect, the first list item appears as specified by the style
while the second item is unaffected
•
Note the vertical space between the first and second item due to
padding-bottom
COMP519 Web Programming Lecture 6 Slide L6 – 7
Document Style Sheets Selectors: Basic Forms
Selectors, Classes, and Inheritance
The style directive
. alert { text - de corat ion : under line ; padding - bottom : 10 px ;
background - co lor : orange ; font - weight : bold ; }
creates a style for the class “alert” that can (in principle) be applied to
any HTML element by associating it with that class.
•
Applied to an ol-element
<ol class =" alert ">
<li > Help Me ! </ li >
<li >I’m trap pe d on a COMP519 slide ! </ li >
</ol >
we obtain the following: in contrast to:
•
Note the extra vertical space between the two list items is gone while there
is extra padding below the list
•
The li-elements have inherited text decoration, font weight and background
colour from the ol-element, but not padding-bottom
COMP519 Web Programming Lecture 6 Slide L6 – 8
Document Style Sheets Inheritance
Inheritance
•
In CSS, inheritance controls what happens when no value is explicitly
specified for a property of an element
•
CSS distinguishes between inherited properties and
non-inherited properties
•
When no value for an inherited property has been specified for an
element, it inherits the value of that property from its parent element
Example:
<ol class =" alert ">
<li > Help Me ! </ li >
<li >I’m trap pe d on a COMP519 slide ! </ li >
</ol >
Here, the ol-element is the parent element of both li-elements
•
The inheritance chain potentially goes up to the root element
•
The root element is the html-element of a document
•
The root element is given some initial, default value for each property
COMP519 Web Programming Lecture 6 Slide L6 – 9
Document Style Sheets Inheritance
Inheritance
•
In CSS, inheritance controls what happens when no value is explicitly
specified for a property of an element
•
CSS distinguishes between inherited properties and
non-inherited properties
•
When no value for a non-inherited property has been specified for an
element, the property is given the initial, default value for that property
COMP519 Web Programming Lecture 6 Slide L6 – 10
Document Style Sheets Inheritance
Inheritance
•
CSS distinguishes between inherited properties and
non-inherited properties
•
When no value for an inherited property has been specified for an
element, it inherits the value of that property from its parent element
•
When no value for a non-inherited property has been specified for an
element, the property is given the initial, default value for that property
Example:
color is an inherited property,
padding-bottom is a non-inherited property
; If color and padding-bottom are not specified for an li-element,
then color is inherited from the parent ol-element (or other list
construct) while padding-bottom gets the initial value 0
COMP519 Web Programming Lecture 6 Slide L6 – 11
Document Style Sheets Inheritance
Inheritance
Consider the style directive
table { backgroun d - color : yellow ;
bo rd er : 1 px so lid b lack ; pa dding : 10 px ; margin : 10 px ; }
together with that will be rendered as
<table >
<tr ><td > Cell </td > <td > Cell </ td > </ tr >
<tr ><td > Cell </td > <td > Cell </ td > </ tr >
</ table >
•
background-color will be inherited by the table cells (td-elements)
from the table element
•
border and padding are not inherited by the table cells (td-elements)
from the table element
; table cells have no individual borders and no padding
•
border and padding only apply to the table as a whole
COMP519 Web Programming Lecture 6 Slide L6 – 12
Document Style Sheets Inheritance
Inheritance
We can change what properties are inherited as follows:
table { backgroun d - color : yellow ;
bo rd er : 1 px so lid b lack ; pa dding : 10 px ; margin : 10 px ; }
tbody , tr , td { border : inher it ; padding : inherit ; }
together with that will now be rendered as
<table >
<tr ><td > Cell </td > <td > Cell </ td > </ tr >
<tr ><td > Cell </td > <td > Cell </ td > </ tr >
</ table >
•
border and padding are now inherited by the table cells (td elements)
from the table element
; table cells now have individual borders and extra padding
•
Note that tbody and tr not just td must be set to inherit
; there must be an uninterrupted chain of inheritance
from table to td
COMP519 Web Programming Lecture 6 Slide L6 – 13
Document Style Sheets Specificity
Specificity
•
Several kinds of style directives can apply to the same HTML element
•
It is also possible that these style directives assign different values to the
same property
Example: Consider the style directives
h1 { ba ckground - co lo r : yellow ; color : blue; }
. orange { ba ckground - color : oran ge ; text - decor ation : und erline ; }
# i1 { background - color : red ; font - style : i ta li c ; }
together with
<h1 id =" i1 " class =" or ange "> What pro perti es does this heading have ? </ h1 >
that will be rendered as
•
The selector #i1 is the most specific one and therefore determines
background-color
•
For other properties, the heading inherits from all three directives
COMP519 Web Programming Lecture 6 Slide L6 – 15
Document Style Sheets Specificity
Specificity
•
Several kinds of style directives can apply to the same HTML element
•
It is also possible that these style directives assign different values to the
same property
•
For such ‘conflicting’ assignments, CSS uses specificity to determine
which assignment applies to an element:
COMP519 Web Programming Lecture 6 Slide L6 – 16
Document Style Sheets Multiple Classes
Multiple Classes
•
It is possible to declare that an HTML element belongs to more than
one class:
< tagName class =" c lass1 clas s2 ..." >
Example: Consider the style directives
p. aler t { text - decor ation : under line ; padding - b ot to m : 10 px ;
background - co lor : orange ; font - weight : bold ; }
p. blue { color : blue ; }
together with the HTML markup
<p c lass =" alert blue " > What col ou rs do I h ave ?" </ p >
that will be rendered as
The properties of the paragraph come from both p.alert and
from p.blue
COMP519 Web Programming Lecture 6 Slide L6 – 17
Document Style Sheets Multiple Classes
Multiple Classes
Consider the style directives
. re d1 { colo r : red; background - color : ye llow ; ma rgin : 5 px ; }
. bl ue { colo r : blue ; ma rgin : 5 px ; }
. re d2 { colo r : red; background - color : ye llow ; ma rgin : 5 px ; }
together with the HTML markup
<p c lass =" red1 blue "> class =" red1 blue " , blue after red1 in style sheet </p>
<p c lass =" blue red1 "> class =" blue red1 " , blue after red1 in style sheet </p>
<p c lass =" red2 blue "> class =" red2 blue " , red2 after blue in style sheet </p>
<p c lass =" blue red2 "> class =" blue red2 " , red2 after blue in style sheet </p>
that will be rendered as
•
For two class style directives with conflicting assignments that apply to
the same element, the assignment that comes last in the style sheet is
applied
; problematic, as the style sheet might change
COMP519 Web Programming Lecture 6 Slide L6 – 18
Document Style Sheets Multiple Classes
Multiple Classes: Resolving ‘conflicts’
•
‘Conflicts’ between multiple classes can be resolved in advance by
defining a directive that specifically applies to their combination
Consider the style directives
. re d1 . blue { color : wh ite ; background - color : or an ge ; }
. re d1 { co lor : red ; background - color : ye llow ; ma rgin : 5 px ; }
. bl ue { co lor : blue ; margi n : 5 px ; }
. re d2 { co lor : red ; background - color : ye llow ; ma rgin : 5 px ; }
together with the HTML markup
<p c lass =" red1 blue "> class =" red1 blue " , blue after red1 in style sheet </p>
<p c lass =" blue red1 "> class =" blue red1 " , blue after red1 in style sheet </p>
<p c lass =" red2 blue "> class =" red2 blue " , red2 after blue in style sheet </p>
<p c lass =" blue red2 "> class =" blue red2 " , red2 after blue in style sheet </p>
that will be rendered as
•
.red1.blue has higher specificity than both .red1 and .blue
•
margin is still determined by .blue
COMP519 Web Programming Lecture 6 Slide L6 – 19
Document Style Sheets Relative Selectors
Relative Selectors
•
It is possible to specify selectors that take into account the context in
which a matching HTML element occurs:
Selector Example
Selects
element element ol a All a elements inside ol elements
element>element ol>li All li elements where the parent
is an ol element
element+element p+ol All ol elements placed immedi-
ately after a p element
element
∼
element p
∼
ol All ol elements preceded by a
p element
COMP519 Web Programming Lecture 6 Slide L6 – 20
Document Style Sheets Relative Selectors
Relative Selectors: Example
Consider the style directives
ol a { co lor : red ; text - d ec or at ion : n one } /* Hyp er li nk in ol */
ol > li { font - style : ital ic ; } /* li children of ol */
p+ol { font - weig ht : bol d ; } /* ol imm ed ia tely a fter p */
p
∼
ol { background - color : yellow ; } /* ol af ter p */
together with the HTML markup
<p >A pa ra gr ap h wi th a <a href ="/
∼
ul lr ich /" > hyperlin k </ a > </p>
<ol ><li >A list item in an ordere d list with
a < a href ="/
∼
ul lr ich /" > hyperlin k </ a > </ li > </ol >
<ul ><li >A list item in an unsorted list with
a < a href ="/
∼
ul lr ich /" > hyperlin k </ a > </ li > </ul >
<ol ><li >A list item in an ordere d list with
a < a href ="/
∼
ul lr ich /" > hyperlin k </ a > </ li > </ol >
that will be rendered as
COMP519 Web Programming Lecture 6 Slide L6 – 21
Document Style Sheets Relative Selectors
Why Do We Need All These Selectors?
•
All ‘styling’ could be done by #id selectors, but should not be
(just assign a unique id to every element and define its style)
; just emulating inline style directives
; enourmous duplication of style directives
; error-prone (difficult to get uniform style)
•
All ‘styling’ could be done by .class selectors, but should not be
(just assign a (unique) class to every element and define its style)
; in extremis just emulating inline style directives
; classes should be based on semantics not style
(e.g., shopping lists versus shopping baskets versus playlist)
; still error-prone
(you could miss an element or assign the wrong class)
If possible we should use existing properties of elements to determine
what style to apply, e.g., relative selectors and attribute selectors
COMP519 Web Programming Lecture 6 Slide L6 – 22
Further Reading
Revision and Further Reading
Read about Selectors and Inheritance in
•
Chapter 11: Introducing Cascading Style Sheets
•
Chapter 12: Formatting Text
•
Chapter 13: Colors and Backgrounds
of
J. Niederst Robbins: Learning Web Design: A Beginner’s Guide to
HTML, CSS, JavaScript, and Web Graphics (5th ed).
O’Reilly, 2018.
E-book https://library.liv.ac.uk/record=b5647021
COMP519 Web Programming Lecture 6 Slide L6 – 23
