CSS
H. Turgut Uyar, M. Tahir Sandıkkaya
Date:
2022-11-27
Version:
0.2
CSS
Cascading Style Sheets
styles are defined through properties
properties are name-value pairs
color: red;
Applying Style
applying to a single element: style attribute
applying to selected elements: style rules
Style Attribute
property as value of style attribute
<em style="color: red;">
British invasion
</em>
the ending semicolon can be omitted
Multiple Properties
multiple properties are allowed
<em style="color: red; font-style: normal;">
British invasion
</em>
Style Rules
element selectors
SELECTOR {
PROPERTY-NAME: PROPERTY-VALUE;
PROPERTY-NAME: PROPERTY-VALUE;
…
}
Name Selector
element name: all elements with this name
em {
color: red;
font-style: normal;
}
Style Element
style element in head <head>
…
<style>
em {
color: red;
font-style: normal;
}
</style>
…
</head>
External Stylesheets
separate <head>
…
style file
<link rel="stylesheet" href="[Link]"/>
link …
</head>
element in
head
better separation of content and style
apply same rules to multiple files
Rule Inheritance
a rule applied to an element affects all elements under it
Font Properties
family
size
weight
style
Font Family
name: font-family
value: list of fonts to try in order
include a fallback: serif, sans-serif, monospace
same as desktop defaults: system-ui, ui-monospace
body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
Web Fonts
is the font available on the visitor's computer?
web fonts: let the visitor download the font first
generates a lot of traffic
Font Size
name: font-size
value: absolute or relative size
absolute relative
pixels: px to current size: em
to base (root) size: rem
to parent size: %
Font Size Example
body {
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
font-size: 20px;
}
h1 {
font-size: 2em;
}
Font Size Problems
fonts at same px size might have different sizes
box sizes are different from perceived sizes
Font Weight
name: font-weight em {
font-weight: bold;
values:
}
bold
normal
numeric: 100 - 900 (multiples of 100)
Font Style
name: font-style h2 {
font-weight: normal;
values:
font-style: italic;
italic }
oblique
normal
Alignment
text: text-align vertical: vertical-align
left top
center middle
right bottom
justify
Line Height
property: line-height
value: scale (without units)
p {
line-height: 1.5;
}
List Properties
list-style-type ul {
list-style-type: circle;
bullet values:
}
circle
square ol {
list-style-type: upper-roman;
… }
numbering values:
upper-roman
lower-alpha
…
Color
foreground (text) color: color
background color: background-color
values:
name (non-primary color names are difficult to interpret)
hex
rgb
hsl: degrees, percent, percent
Color Example
body {
color: black;
background-color: #eaeaea;
}
footer {
background-color: rgb(20, 20, 20);
}
a {
color: hsl(240, 75%, 50%);
}
Border
width: border-width
values: thin, thick, size
style: border-style
values: solid, dashed, dotted, …
color: border-color
Border Example
td {
border-width: 1px;
border-style: dashed;
}
dt {
border: thin solid blue;
}
Border Sides
border can be given for individual sides
border-top, border-right, border-bottom, border-left
dt {
border-left: 5px solid gray;
}
Length Units
absolute: px
relative to font size: em, rem
number of characters: ch
relative to parent size: %
1% of viewport width and height: vw, vh
no unit when zero
Element Sizes
width
height
max-width
max-height
Margins
space outside the box
margin-left, margin-right,
margin-top, margin-bottom
combined: margin (top-right-bottom-left)
one value: all sides
two values: vertical-horizontal
auto: center
Margin Examples
li {
margin: 0;
}
h2 {
margin: 0 1em 10px 1.5em;
}
footer {
border: 2px solid #00d800;
margin: 1rem 2rem;
}
Paddings
space inside the box
padding-left, padding-right,
padding-top, padding-bottom
combined: padding (top-right-bottom-left)
footer {
border: 2px solid #00d800;
margin: 1rem 2rem;
Grouping Selector
a rule can contain multiple selectors
separate selectors with commas
td,
th {
border: 1px solid black;
}
Selecting by Id
id attribute value after #
works with or without the element name
section#history {
background-color: #c4c4c4;
}
#discography {
margin-top: 2rem;
}
Classes
marking various elements for common styling: class attribute
<p>The Beatles are regarded as
<span class="callout">the most important and
influential band</span> in the history of rock music.</p>
<p class="callout">Their famous lineup, called
<strong>The Fab Four</strong>, consisted
of the following members:</p>
Styling Classes
class attribute value after .
.callout {
background-color: pink;
}
Advanced Selectors
a selector under another selector: separate with space
a selector immediately under another selector: separate with >
a selector immediately after another selector: separate with +
Custom Properties
we can define our own properties: starting with --
then use them for other property values: var()
set global properties for the :root element
Custom Property Example
:root {
--space-m: 1rem;
}
header {
margin-bottom: var(--space-m);
}
footer {
margin-top: var(--space-m);
}
Cascade
what if multiple rules apply to the same element?
specificity (in decreasing order)
inline
id
class
tag type
position
