http://a3nm.net/work/teaching/
Technologies du Web:
Fabian M. Suchanek
With material from a course by Antoine Amarilli
CSS
Introduction
Styling Text
Styling other elements
Styling blocks
Extreme styling
Overview
2
CSS (
Cascading StyleSheets
) serve to define the layout
of an HTML page.
•
W3C
standards:
CSS 1
: 1996
CSS 2
: 1998
CSS 2.1
: 2011, 487 pages
CSS 3.0
: In development, varied support
• Idea: HTML describes the
content
and the
structure
,
CSS describes the
presentation
.
=>
We can have
several designs
for the same page,
e.g. for
differents media types
such as screens, print,
phones, screen readers, etc.
=>
We can re-use the same design on
different pages
Overview of CSS
3
important
unimportant
• CSS uses pairs of
attribute and value
,e.g.
color: red;
font-weight: bold;
• Can be applied
directly
to the HTML elements
with the attribute
style
:
This will appear in
<em style="color: red;">
red
</em>
.
• If there is no suitable tag, we can use the
neutral
tags
<span>
(inline) and
<div>
(blocks).
Text
<span style="font-weight: bold">
in bold
</span>
.
=>
Problem
: mixes style and content; works only on one page
CSS & HTML (solution 1)
4
=>
Separation
and
reusability
. (But external dependency)
• Put the rules in a different
.css
file
• Reference the file by the tag
<link>
.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
Texte
<em>
en rouge
</em>
.
</body>
</html>
CSS & HTML (solution 2)
5
•
Selectors
indicate to which tags the style applies
•
Tag
<style>
in the
<head>
:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
em { color: red; }
</style>
</head>
<body>
Texte
<em>
en rouge
</em>
.
</body>
</html>
important:
there are 3
ways to use
CSS
CSS & HTML (solution 3)
6
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span { color: red; }
</style>
</head>
<body>
Texte
<span>
en rouge
</span>
.
</body>
</html>
<span>
is the neutral element
Try it out!
7
span {
color: red;
font-weight: bold;
/* font-size: 150%; */
/* I sometimes think the browser
ignores all my comments :-( */
}
• white space does not matter
• declarations are separated by semicolons
• comments take the form
/* ... */
and are ignored
Syntax
8
span#me { color: red; }
We can give a style to an individual
occurrence
:
Elvis: “Le roi, c'est
<span id="me">
moi
</span>
”
Elvis: “Le roi, c'est
moi
”
•
#
in the CSS,
id
in the HTML
• every tag can have an
id
(not just
<span>
)
• An id can only appear once in the body
Individuals
9
+
=
span.important { color: red; }
span.boring { color: gray; }
We can also give a style to a
class
of occurrences:
C'est pour
<span class="important">
moi
</span>
,
<span class="boring">
toi
</span>
,
et
<span class="boring">
elle
</span>
C'est pour
moi
,
toi
, et
elle
•
Point
dans le CSS,
class
dans le HTML
• every tag can have a class (not only
<span>
)
• A class can be used several times
Classes
10
+
=
• tags in general
strong {
color: red;
}
• tags of certain classes
p.important {
font-weight: bold;
}
• all tags of a certain class
.person {
text-decoration: underline;
}
• One occurrence
span#elvis {
font-size: 150%;
}
Examples
11
Introduction
Styling Text
Styling other elements
Styling blocks
Extreme styling
Overview
12
Colors can be given
• by
name
:
blue, green, red, ...
• by
rgb values
:
rgb(0, 0, 0)
: black
rgb(255, 0, 0)
: red
rgb(100, 0, 0)
: dark red
rgb(255, 0, 255)
: purple
rgb(30, 0, 30)
: very dark purple
rgb(255, 255, 255)
: white
• in
hexadecimal
notation:
#FF00FF
: purple
strong {
color: red;
}
See colors
Colors
13
Make Fifty Shades of Grey! (ok, make 3)
important
%
em
px
cm
Percentage of the
current value
Height of the
current font
.
Absolute size in
pixels
. 16px=1em
=>
Depends on the
resolution
.
Absolute size in
centimeters
.
=>
Mainly for
printing
.
Units of measurement
14
text-align: left / right / center / justify ;
text-decoration: underline / overline / line-through ;
text-transform: uppercase / lowercase / capitalize ;
line-height: 150% / 1.2em / ... ;
text-shadow:
horizontal
vertical
blur
color
;
•
horizontal
: horizontal position of the shadow
•
vertical
: vertical position of the shadow
•
blurr
: blur distance (optional)
•
color
: shadow color (optional)
Play it!
Try it out!
More about text
15
font-style: italic / oblique ;
font-variant:small-caps;
font-size: 150% / 1.2em / ... ;
More convincing example
Font Variations
16
• On a computer screen, sans-serif fonts
are supposed to be more readable
[W3schools]
Font Families
17
important
See them
• Users do not alwas have the same
fonts
installed.
• Some fonts are considered
Web safe
• There is a list of predefined
generic font families
serif
,
sans-serif
,
cursive
,
fantasy
,
monospace
.
• We can specify several fonts, the browser takes
the first that works:
font-family: "DejaVu Sans Mono", monospace;
Using Fonts
18
Ex2
Ex1
• With CSS3, we can
download fonts
:
@font-face {
font-family: attentionPolice;
src: url('attentionPolice.woff');
}
body {
font-family: attentionPolice;
}
• Common formats:
•
WOFF
(Web Open Font Format), W3C, 2012.
•
SVG
(to my great sorrow now deprecated)
•
TTF
• The
@font-face
declaration can specify font variants such as bold.
Including Fonts
19
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
Try it out!
Styling Links
20
p:first-line { /* First line of a paragraph */ }
h2:first-letter { /* First letter of a title */ }
p:before { /* Before a paragraph */ }
p:after { /* After a paragraph */ }
* { /* Universal selector */ }
Try it out!
Pseudo-classes
21
Introduction
Styling Text
Styling other elements
Styling blocks
Extreme styling
Overview
22
ul {
list-style-type: circle / square / disc / ... ;
list-style-image: url('evis.jpg');
}
ol {
list-style-type:
decimal / lower-alpha / lower-roman / ...
hebrew / hiragana / ... ;
}
Try it out!
Lists
23
td {
border-style: solid / dotted ;
border-width: 5px;
border-color: red;
}
table {
border-collapse: collapse / separate ;
}
caption {
caption-side: top / bottom;
}
By default, two neighboring
cells each have their own
border (
separate
)
This is ugly. Use
collapse
!
Tables
24
td:nthchild(2) { ... }
td:nthchild(even) { ... }
td:nthchild(odd) { ... }
td:nthchild(
x
n +
y
) { ... }
The pseudo-class
nthchild(...)
allows to style
• a specific child node
• every odd/even child node
• cycles of nodes
This is useful for tables (but not only for tables)
Try it out!
nthchild
25
<table>
<colgroup>
<col span="2" style="background-color: red">
<col span="3" style="background-color: blue">
</colgroup>
<tr> ...
</table>
Tables can group columns by
<colgroup>
and
<col>
:
Try it out!
Column groups
26
/* Make the text white */
color: white;
/* Choose a background color */
background-color: black;
/* Picture has preference over color */
background-image: url("background.jpg");
/* Do not scroll the background picture */
background-attachment: fixed;
/* Repeat the background picture (default) */
background-repeat: repeat;
see example
Background
27
background: linear-gradient(to bottom right,
red,orange,yellow,green,blue,indigo,violet);
• the first value can be
to right
,
to bottom right
, etc.
• a sequence of colors follows (either by name or by RGB)
• transparency can be added by
rgba(r,g,b,t)
Try it out!
Gradients
28
Introduction
Styling Text
Styling other elements
Styling blocks
Extreme styling
Overview
29
• There are two types of HTML elements:
blocks
:
<div>, <p>, <h1>, <ul>
...
inline
elements:
<span>, <a>, <img>, <em>
...
• We will now talk about
blocks
• Main properties of a block:
display: none; /* removes the element from screen*/
visibility: hidden; /* hides the element
display: inline ; /* displays inline*/
Try it out!
Blocks
30
Try it out!
Box model
31
Margin
Border
Padding
Content
important
margin: 5px / ... ;
padding: 3em / ...;
It is possible to set the margins and paddings
per side
:
margin-left: 5px / 1em / ... ;
margin-right: ...
..
padding-left:
...
To
center
an element, use
margin: auto;
Padding and Margin
32
border-style: dotted / dashed / solid / double /
groove / ridge / inset / outset ;
border-width: 5px / 1em / ... ;
border-color: red / ... ;
border-left-style: ...;
border-right-style: ... ;
...
border-left-width: ... ;
...
border-left-color: ... ;
...
Borders can also be styled
individually
:
Example
Borders
33
mandatory
mandatory
Example
Make the border rounded by giving a
radius
to the corners:
border-radius: 10px;
/* Rounded NW, NE, SE, SW */
border-radius: 0px 10px 10px 0px;
/* Elliptic corners */
border-radius: 20px/10px;
Give the border a
shadow
/* Horizontal, vertical, blurr, color */
box-shadow: 5px 5px 1px black;
/* Same with shadow inside */
box-shadow: 5px 5px 1px black inset;
>|
Fun with Borders
34
•
height
and
width
can be specified for each block
(and also for images, even if, strictly speaking, images are inline)
• The default value is
auto
:
The elements are as wide as possibly, and as high as necessary
•
min-width
and
max-width
specify
limits
.
=>
E.g. to avoid that an element is
too large
.
Width and Height
35
• If the available space is limited, an element can
overflow
.
• Specify the
overflow
:
visible
: The content just walks out of the box (default)
hidden
: Overflowing content is
invisible
.
scroll
: Adds
scrollbars
.
auto
Adds scroll bars only
if needed
.
•
overflow-x
and
overflow-y
specify the
overflow in both dimensions
• Words that are
too long
will still peek out of the space
=>
word-wrap: break-word
forces line-break
within a word
.
Try it out
Overflow
36
A block can be positioned in several ways by
position
:
•
static
: default, the block
flows
with the content
•
fixed
: the block is positioned relative to the
window
,
i.e., it does not move when we scroll, and it does
not occupy space inside the document.
•
relative
: the block is positioned
relative to its default position
.
The block still occupies its normal static space in the document!
•
absolute
: similar to
relative
, but the block does
not occupy space
.
The element is positioned relative to the nearest static ancestor
For
relative
,
absolute
, and
fixed
, use
top
and
right
to specify the offset.
Try it out!
Positioning
37
Try it out!
• By default, elements are drawn in the order they are given
=>
The last element is on the top
• To modify the order, we can specify the
z-index
:
z-index: -1; /* Move the element to background*/
Z-Index
38
Floating elements
have the text float around them.
float: left / right ;
To resynchronize, use
clear
:
footer {
clear: both;
}
Try it out
Floating Elements
39
It is possible to have the text flow in
columns
:
p {
/* Minimal width of a column, maximal number of columns*/
columns: 300px 3;
/* Separation between columns */
column-gap: 20px;
/* Line between columns */
column-rule: 1px solid black;
}
See it
Columns
40
Side remark about the
ugly reality
:
Not all browsers support all CSS commands.
=>
Wait until they do
=>
Or use browser-specific prefixes:
-webkit-
for Safari and Chrome,
-moz-
for Firefox.
>|
Meanwhile, in reality...
41
Introduction
Styling Text
Styling other elements
Styling blocks
Extreme styling
Overview
42
article {
counter-reset: section subsection;
}
article h2 {
counter-increment: section;
counter-reset: subsection;
}
article h2:before {
content: counter(section) ". ";
}
article h3 {
counter-increment: subsection;
}
article h3:before {
content: counter(section) "." counter(subsection) ". ";
}
See it
Counters
43
div, p { /* All div and all p /* }
div p { /* All p inside a div */ }
div>p { /* All p that are
direct children
of a div /* }
div+p { /* All p immediately after a div */ }
::selection { /* whatever is selected by the user */ }
Try selection
Advanced selectors
44
a[href] {
/* All <a> with href attribute */
}
a[href="xyz"] {
/* All <a> with href attribute with this value */
}
a[href~="xyz"] {
/* All <a> with href attribute that contain this value */
}
Try it out!
>|
Attribute selectors
45
What if we have
p { color: red; }
p { color: blue; }
Conflict resolution: Order
46
?
=>
The last specification overwrites previous ones
Conflict resolution: Order
47
?
What if we have
p { color: red; }
p { color: blue; }
What if we have
<style type="text/css">
p { color: red; }
</style>
...
<body>
<p style="color:blue">
Oh, baby, I am so blue
</p>
</body>
Conflict resolution: Style
48
?
=>
style
attribute
prevails
Conflict resolution: Style
49
?
What if we have
<style type="text/css">
p { color: red; }
</style>
...
<body>
<p style="color:blue">
Oh, baby, I am so blue
</p>
</body>
What if we have
<style type="text/css">
a { color: black; }
a[target="_blank"] { color: red; }
</style>
<a target="_blank">
black is beautiful
</a>
Conflict resolution: Specificity
50
?
=>
The
more specific
style prevails
Conflict resolution: Specificity
51
?
What if we have
<style type="text/css">
a { color: black; }
a[target="_blank"] { color: red; }
</style>
<a target="_blank">
black is beautiful
</a>
What if we have
<style type="text/css">
div { color: red; }
</style>
<div>
<p>
Show your true colors!
</p>
</div>
Conflict resolution: Heritage
52
?
=>
The style is
inherited
from the parent node
Conflict resolution: Heritage
53
?
What if we have
<style type="text/css">
div { color: red; }
</style>
<div>
<p>
Show your true colors!
</p>
</div>
What if we have
style.css
div {
color: red !important;
}
index.html
<link rel="stylesheet" href="style.css">
<style type ="text/css">
div { color: black; }
</style>
Conflict resolution: Important
54
?
=>
Important styles always prevail
Conflict resolution: Important
55
?
What if we have
style.css
div {
color: red !important;
}
index.html
<link rel="stylesheet" href="style.css">
<style type ="text/css">
div { color: black; }
</style>
=>
Browsers have
different default behaviors
=>
Use a
CSS reset
to unify the behavior
Example
>|
Conflict resolution
!important
prevails.
The attribute
style
prevails
The most
specific
selector prevails
The
last
rule prevails
Without a rule,
inheritance
from the parent
Otherwise
default
behavior of the browser
56
/* Comments */
@charset "UTF-8"; /* Only in external style sheets*/
@import url(autre.css);
@media screen {
/* ... specific rules ... */
}
selector
{
property
:
value
;
}
External Stylesheets
57
We can use different styles depending on the
medium
• In the CSS code by
@media ...
<style type="text/css">
@media handheld
{
body{ font-size: 0.0001em; }
/* Let's really annoy these smarta**es :-) */
}
</style>
• By link
<link rel="stylesheet" type="text/css" href="style.css"
media="screen"
>
Media queries
58
@media all
@media aural
@media braille
@media embossed
@media handheld
@media print
@media projection
@media screen
@media tty
@media tv
all media type devices
speech and sound synthesizers
braille tactile feedback devices
paged braille printers
small or handheld devices
printers
projected presentations, like slides
computer screens
teletypes and terminals
television-type devices
[w3schools]
Try this!
Media types
59
@media screen and (max-width: 1024px)
• By default, smartphones render the page in a
viewport
that is larger than the screen
=>
All pages optimized for computer screens
are rendered
correctly
.
=>
users can
zoom
and scroll.
=>
The text is usually
very small
.
• Pages for mobiles can force display in real width
<meta name="viewport" content="width=device-width">
• What works well in practice is
@media (max-device-width: 480px) {
body { font-size: 400%; }
}
Subtleties for smartphones
60
• HTML describes the
structure
of a document,
CSS describes its
presentation
/ layout
• CSS can be used by the
style
attribute,
the
<style>
header, or by inclusion with a
<link>
• basic structure:
selector
{
property
:
value
;
}
Summary CSS
61
important