1

Outline

1. CSS Syntax
2. CSS Selectors
3. Basic Text Styles
4. Margin, Border and Padding

2
CSS Syntax

3
 CSS – Cascading Style Sheets
• CSS is used to control the presentation (look and
feel) and layout (positioning) of web page
elements
• Allows separating web page content from its
design and visual appearance
• Used in conjunction with HTML
• HTML is used for describing the content of a web
page, CSS is used for describing its presentation
• CSS a flexible, cross-platform, standards-based
styling language developed by the W 3 C
4
 Style Sheets Syntax
• Stylesheets consist of rules that describe the
styling to be applied
o Each rule has selectors and declarations. A
declaration specifies a property and its value

o Declarations are separated by semicolons

o Properties and values are separated by colons
• Comment in CSS /* comment */

5
Ways to incorporate CSS in an HTML document
• Inline – style included as the attribute of an HTML tag:

• Embedded – CSS rules are contained in the head section:

• External - separate .css file referenced in the HTML:

√ Improve consistent look and feel, reusability and maintainability

6
 The “Cascade”
• The last rule applied wins: Styles are applied in the
order that they're found, and last styles always
overwrite earlier styles in case of a conflict
<link rel="stylesheet" href="styles/qu-styles.css">
<link rel="stylesheet" href="styles/ceng-styles.css">
<link rel="stylesheet" href="styles/cse-styles.css">

cse styles will win in

case of a conflict

inline styles will win

in case of a conflict

7
 Inheritance
• Inheritance means that child elements will inherit
the properties applied to a parent element

• Body selector has a

font, font-size, and
color applied to it:
o Every element inherits
those styles from the
body selector
o The style applied to h1
overrides the inherited
color => h1 element
appears in red berry
color 8
CSS Selectors

9
Selectors: used to select elements to style on an HTML page
• Element Selectors - matches a HTML element directly

10
Specificity
• We have 3 selectors for the
h1 with different colors
o What will the color be?

=> h1 would be blue

because the ID selector is more
specific than the others
• The style for a more specific
selector will be applied to
the element

11
 Universal
• [*]: Selects all elements
o Used to override the browser default styles

*{
font-family: "Times New Roman";
color: blue;
}

12
An element can have more than one class

• Class Selector selects all

elements whose class
attribute matches the
selector
o The selector starts with a
period (.) followed by the
class name
o An element can have
more than one class

13
 Combined Selectors
element, element div, p Selects all <div> elements and all <p>
elements
element element div p Selects all <p> descendant elements
inside <div> elements
element > element div > p Selects all <p> elements that are
direct child of <div> element

e.g.,
li a {text-decoration: none}
o This will match all <a> tags that are inside of <li>

https://www.w3schools.com/cssref/css_selectors.asp
14
 Attribute Selectors
• Selects the elements whose attribute-value pair
matches the selector

[attribute ^= value] a[href ^= "https"] Selects every <a> element whose href
attribute value begins with "https"

[attribute $= value] a[href $= ".pdf"] Selects every <a> element whose href
attribute value ends with ".pdf"

[attribute *= value] a[href *= "qu"] Selects every <a> element whose href
attribute value contains "qu"

https://www.w3schools.com/cssref/css_selectors.asp

15
 Pseudo-classes
• Pseudo-classes are used to define an element
state. E.g.,
•Style an element when a mouse is over it (:hover)
• Style visited and unvisited links differently (:visited , :link)
• Style an element when it gets focus (:focus)
e.g.,
a:hover { color: red; } -> Style link on mouse over

16
 Structural Pseudo-classes
:first-child tr:first-child First row of an HTML table

:last-child tr:last-child Last row of an HTML table

:nth-child(n) tr:nth-child(2) Second row of an HTML table

:nth-last-child(n) tr:nth-last-child(2) Second row of an HTML table,

counting from the last row
:nth-child(odd) tr:nth-child(odd) Every odd row of an HTML table
:nth-child(even) tr:nth-child(even) Every even row of an HTML
table

https://www.w3schools.com/cssref/trysel.asp
17
 has selector
• CSS :has() selector allows us to style an element
based on its descendants
• e.g., assign a green background to any div having
p as its descendent

18
 Pseudo-elements
• A CSS pseudo-element is used to style specified
parts of an element. E.g.,
o Style the first letter or line of an element

• Insert content around the selected element

p::before { content: "«"; }
Insert « before the content of each <p> element
p::after { content: "»"; }
Insert » after the content of each <p> element
19
 Selectors Summary
• A style consists of a selector, followed by
property/value pairs
• Selectors:
o Element Selectors
o Class Selectors Examples
o ID Selectors
o Combined Selectors
o Attribute selectors
o Pseudo-classes
o Structural pseudo-classes
o Pseudo-elements
20
Basic Text Styles

21
Text-related CSS Properties

22
Text-related CSS Properties (2)

23
 Font Sizing
Two ways to define font sizes in CSS
• Fixed Font Sizing: defines the size of fonts using
absolute units such as points (pt) or pixels (px)
• Relative Font Sizing: defines the size of fonts
using relative units such as em and rem units
o This allows fonts to scale appropriately to different
resolutions, browsers or platforms
o em is relative to the font-size of its direct or nearest
parent
o rem is relative to the font-size of the html (root)
element
24
 Relative Font Sizing
body {font-size: .8em;
font-family: Verdana, Helvetica, Sans-Serif;}
h1 {font-size: 1.2em;}
div {font-size: .8em;}
li {font-size: .8em;}
p {font-size: .8em;}

25
 Styles for Lists
• List properties are used to define the look and
feel of the list items
o Values for <ul>: circle, square,…
o Values for <ol>: upper-roman, lower-alpha
o Values for both: none

26
 Practice …
• Use the W3Schools try-it-yourself editor to try
styling each of these properties
• Background
http://www.w3schools.com/css/css_background.asp
• Text
http://www.w3schools.com/css/css_text.asp
• Fonts
http://www.w3schools.com/css/css_font.asp
• Lists
https://www.w3schools.com/css/css_list.asp
27
Margin, Border and Padding

28
 Box Model

• Each tag is a box, and its properties can be styled:

o Margin - the space that separates the boxes
o Border - the line around each edge of the box
o Padding - the space between the border and the contents

29
 Margin and Padding
• Margin and padding define the spacing around the
element
o Numerical value, e.g. 0.8rem
o Can be defined for each of the four sides separately: margin-
top, padding-left, … or using short rules:
• margin: 0.8rem;
o Sets all four sides to have margin of 0.8rem

• margin: 10px 20px;

o top and bottom to 10px, left and right to 20px

• margin: 1px 3px 5px 7px;

o top, right, bottom, left (clockwise from top)

• Same for padding

30
Borders
• Border style:
border-width:1px;
border-style:solid;
border-color:red;
o border-width: thin, medium, thick or numerical value
o border-color: color alias or RGB value
o border-style: none, dotted, dashed, solid, double, …
• Shorthand rule for setting border properties:
border: 1px solid red;
• Can specify different borders for the sides using: border-
top, border-left, border-right, border-bottom
31
 Rounded Corner & Centered Box

.centered-rounded-box {
display: flex;
column-gap: 1rem;
align-items: center;

padding: 0.5rem;
border: 1px solid saddlebrown;
border-radius: 15px; Rounded Corner
box
width:80%;
margin: auto;
} Centered box

32
 References
• CSS Tutorials http://www.w3schools.com/css/
• CSS Course https://web.dev/learn/css/
• Cheat sheet https://htmlcheatsheet.com/css/
• CSS developer guide
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
• Selectors
http://code.tutsplus.com/tutorials/the-30-css-selectors-
you-must-memorize--net-16048

33