CSC309 – LECTURE 03

CASCADING STYLE SHEETS (CSS)

Khai Truong
The big problem with HTML
HTML was intended to describe the content of a Web page, such as:
<h1>This is a heading</h1>
<p>This is the first paragraph</p>

HTML originally did not contain tags for formatting a Web page
Tags (e.g., <font>) and color attributes were eventually added to enable
formatting, but…
1. this made HTML documents contain both elements that described
content as well as style / format the content
2. this made Web development long and expensive
Example
Cascading Style Sheets (CSS)
Describes the presentation of a document written in markup
languages

Separates the content (HTML) from the formatting/appearance (CSS)

Saves a lot of work: can be used to control the layout of multiple web
pages all at once
Example

https://www.w3schools.com/css/demo_default.htm
CSS rule (a.k.a, ruleset)
Selector: identifies element(s) to be
styled
Declaration: specifies which of the
element’s properties to style
Property: defines the style or
behaviour of an element

Full list of properties: https://www.w3schools.com/cssref/index.php

CSS rule locations
External CSS: referenced by an HTML page inside the <link> element
inside the head section
● Useful for creating a consistent look across multiple pages

Internal CSS: defined inside the <style> element, inside the head
section
● Typically used when a single HTML page has a unique style

Inline CSS: defined within the style attribute of an element

● Applies a unique style for a single element
● Loses the advantages of a style sheet by mixing content with
presentation
https://www.w3schools.com/css/css_howto.asp
External CSS

adapted from:
https://www.w3schools.com/css/css_howto.asp
Internal CSS

adapted from:
https://www.w3schools.com/css/css_howto.asp
Inline CSS

adapted from:
https://www.w3schools.com/css/css_howto.asp
CSS selectors
Selects the HTML element(s) you want to style

Five types
● Simple: select elements based on name, id, class
● Combinator: select elements based on a specific relationship
between them
● Pseudo-class: select elements based on a certain state
● Pseudo-elements: select and style a part of an element
● Attribute: select elements based on an attribute or attribute value
Simple selector
Element selector
● Syntax: tagname
● Example:
Simple selector
ID selector
● Syntax: #idname
● Example:
Simple selector
Class selector
● Syntax: .classname
● Example:
Simple selector
Universal selector
● Syntax: *
● Example:
More than 1 rule can apply (example 1)

What does “cascading” mean?

Multiples rules can affect the same element
More than 1 rule can apply (example 2)

What does “cascading” mean?

Multiples rules can affect the same element
Problem with
More than 1 rule can apply
Properties of a selector might be defined in different CSS rules
● The value defined in the last read rule will be used

More on this later, when we talk about

CSS specificity

adapted from:
https://www.w3schools.com/css/css_howto.asp
Combining CSS selectors
AND condition
● Syntax: join multiple selectors without space in between
● Example:
Selector Example
element.class p.red_text
element#id p#paragraph1
.class1.class2 .red_text.centered_text
.class#id .centered_text#paragraph1
How do you select an element that is both p and a?
● Not possible!
● An element an only be of one type

How would you do this?

Combining CSS selectors
OR condition
● Syntax: join multiple selectors with comma in between
● Example:
h1, h2, p {...}
h1, .red_text {...}
#paragraph1, #paragraph2 {...}
p.red_text, #paragraph1 {...}
Combinators
A combinator describes the relationship between the selectors

4 different CSS combinators

● descendant selector (space)
● child selector (>)
● adjacent sibling selector (+)
● general sibling selector (~)
Combinator
Descendant selector: select
elements matched by second
selector if they have an ancestor
(i.e., the parent, parent’s parent,
parent’s parent’s parent, etc.)
matching the first selector
● Syntax: join multiple selectors
with space in between
● Example: form div
ul div
Combinator
Child selector: select elements
matched by second selector if
they have a parent matching the
first selector
● Syntax: join multiple selectors
with a less than sign (>) in
between
● Example: form > input
Combinator
Adjacent sibling selector: select elements
matched by second selector that are
the next sibling element to the first
selector
● Syntax: join multiple selectors with a
plus sign (+) in between
● Example: div + p
General sibling selector: select
elements matched by second
selector that are sibling elements
after the first selector
● Syntax: join multiple selectors
with a tilde sign (~) in between
● Example: div ~ p
Pseudo-class & pseudo-element selectors
Pseudo-class selector: selects elements based on a certain state
● Syntax: :pseudoclass
● Example:
a:hover {
color: hotpink;
}

Pseudo-element selector: selects a part of an element

● Syntax: ::pseudoelement
● Example:
p::first-letter {
font-size: 200%;
}

Full list of all CSS pseudo-classes & pseudo-elements:

https://www.w3schools.com/css/css_pseudo_classes.asp
Attribute selectors
Selects elements based on attribute name
● Syntax: [attributename]
● Example:
[href] {
color: hotpink;
}

Selects elements based on attribute value

● Syntax:[attributename relationaloperator “attributevalue”]
● Example:
[href=”http://www.disney.com”] {...}
[href*=”disney”] {...}

Full list of all CSS attribute selectors:

https://www.w3schools.com/css/css_attribute_selectors.asp
Recall
 CSS specificity
When two or more CSS rules that point to the same element, the style
declared by selector with the highest specificity value will be
applied to that HTML element
Different categories of selectors have different specificity values
highest 1. Inline styles
2. IDs
3. Classes, pseudo-classes, and attribute selectors
lowest 4. Elements and pseudo-elements

For more detail about how to calculate specificity, see:

https://www.w3schools.com/css/css_specificity.asp
Also: https://wattenberger.com/blog/css-cascade
Why does this matter?
Example

What color will this be?

CSS !important rule
Places more importance to a property/value than normal
Overrides all previous styling rules for that specific property on that
element
Example:
p { background-color: red !important; }
 Take a
Short Break
Common

CSS properties
Font properties
color
● Selects text color

font-family
● Selects one or more fonts, in that order (in case former one is
unavailable)
● Web safe fonts:
https://www.w3schools.com/cssref/css_websafe_fonts.php
font-style
● Either normal or italic

font-weight
● normal or bold are most used options, others are possible
Font properties (continued)
text-decoration
● none, underline, overline, or line-through

text-align
● left, right, center, or justify (all lines of text are same width)
● You likely want to use the hyphens property with justify

font-size
● Set size of text

Further reading: https://developer.mozilla.org/en-US/docs/Web/CSS/font

Units
Used by any property that specifies size or length
Absolute units: cm (centimeter), in (inch), px (pixels)
Relative units
● rem: root element’s font-size (default is 16px)
● em: parent element’s font-size
● %: a percent relative to the size of the parent element
● vh, vw: current screen’s (viewport) height or width
● fr: fraction (of the available space)

calc function: allows you to do math on different units

width: calc(100% - 100px)
Box model
A set of boxes that wraps around every visible HTML element
The width and height of an element includes border, padding, and
content, but not margin

https://www.w3schools.com/css/css_boxmodel.asp
Spacing properties
Many ways to specify the margin, padding, and border-width
Specify all edges
border-width: 1px 2px 3px 5px; (top-right-bottom-left)
margin: 0; (all edges)
padding: 1rem 2px; (top & bottom, left & right)

Specify specific edges that you want to change

border-top-width: 1rem;
margin-bottom: 12px;

Trick
Margin can be negative to pull other elements closer
Border properties
border-style: none, solid, or dotted
border-color
border-radius
● Adds rounded corners to elements
● Trick: creates a circle when the width and height of an element are
equal and the radius is set to 50%
Position property
Specifies the type of positioning method used for an element
Five different positioning options:
● static (default)
● relative
● absolute
● fixed
● sticky

https://www.w3schools.com/css/css_positioning.asp
Relative positioning
Relative to its static position (where it would have been)
Absolute positioning
Relative to the nearest “positioned” ancestor
Fixed positioning
Stays in the same place on the screen, relative to the viewport, even
when the user scrolls
Transform property
Allows for translating (moving), rotating, scaling, and skewing of an
element
Examples:
div {
transform: translate(50px, 100px);
}

div {
transform: rotate(20deg);
}

div {
transform: scale(2, 3);
}
https://www.w3schools.com/css/css3_2dtransforms.asp
Display property
Specifies how to render an element and/or its children
Some display behaviours affects how child elements are placed

https://medium.com/@kathanpatel0000/display-property-8bc97b965800
Element size properties
width, height
● Defines the exact width/height of an element

max-width, max-height
● Defines the maximum width/height an element is allowed to have
● Good for sizing images

box-sizing
● content-box (default): Does not take border and padding into account
when calculating size of element
● border-box: Use this to save a lot of headaches

* { box-sizing : border-box; }
Summary
You have learned about CSS selectors and common CSS properties
Learn more on your own: http://www.w3schools.com/css/
Experiment, search online, and/or read reference manuals

Wednesday: Responsive design & more about CSS layouts

Much of this lecture was taken from content previously created by Jack Sun & Kianoosh Abbasi

Reproduction and/or sharing of course materials is prohibited. Course materials include lecture slides, course notes,
assignments, data and documents provided by the instructors. Course materials created by the instructors of this course
are their intellectual properties. They may not be shared, posted, rehosted, sold, or otherwise distributed and/or
modified without expressed permission from the authors. All such reproduction or dissemination is an infringement of
copyright and is prohibited. All rights are reserved by the instructors.

Thank you & questions?