1

CHAPITRE 2
CASCADING STYLE SHEETS (CSS)

2023/2024 Olfa Gaddour

 Plan
 Qu'est-ce que CSS ?
 Style avec des feuilles de style en cascade (CSS)
 Sélecteurs et définitions de style
 Lier HTML et CSS
 Polices, arrière-plans, bordures
 Le modèle de boîte
 Alignement, Z-Index, Marge, Rembourrage
 Positionnement et éléments flottants
 Visibilité, Affichage, Débordement
 Outils de développement CSS
CSS: une nouvelle Philosophie
 Séparer le contenu de la présentation!
Contenu Présentation
(document HTML) (Document CSS)

Title
Lorem ipsum dolor sit amet,
Bold
consectetuer adipiscing elit.
Suspendisse at pede ut purus Italics
malesuada dictum. Donec vitae
neque non magna aliquam
dictum.
Indent
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
tortor purus, luctus non, aliquam
nec, interdum vel, mi. Sed nec
quam nec odio lacinia molestie.
Praesent augue tortor, convallis
eget, euismod nonummy, lacinia
ut, risus.

3
La page résultante
Title
Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.
Suspendisse at pede ut purus
malesuada dictum. Donec vitae neque
non magna aliquam dictum.
• Vestibulum et odio et ipsum
• accumsan accumsan. Morbi at
• arcu vel elit ultricies porta. Proin
Tortor purus, luctus non, aliquam nec,
interdum vel, mi. Sed nec quam nec
odio lacinia molestie. Praesent augue
tortor, convallis eget, euismod
nonummy, lacinia ut, risus. 4
 5

CSS INTRODUCTION
Styling with Cascading Stylesheets
CSS Introduction
 Feuilles de style en cascade (CSS)
 Utilisé pour décrire la présentation des documents
 Définissez les tailles, l'espacement, les polices, les
couleurs, la mise en page, etc.
 Améliorer l'accessibilité du contenu
 Améliorer la flexibilité

 Conçu pour séparer la présentation du contenu

 En raison de CSS, toutes les balises et attributs de
présentation HTML sont obsolètes, par ex. police,
centre, etc.

6
CSS Introduction (2)
 CSS peut être appliqué à n'importe quel document
XML
 Pas seulement en HTML / XHTML
 CSS peut spécifier différents styles pour différents
médias
À l'écran
 Sur papier

 Portable, projection, etc.

 … même par la voix ou un lecteur en braille

7
Pourquoi “en cascade”?
 Schéma de priorité déterminant quelles règles de
style s'appliquent à l'élément
 Les priorités de cascade ou la spécificité (poids) sont
calculées et affectées aux règles
 Les éléments enfants de l'arborescence HTML DOM
héritent des styles de leur parent
 Peutles remplacer
 Contrôle via la règle !important

8
 Pourquoi “en cascade”?
9
Pourquoi “en cascade”?

 Certains styles CSS sont hérités et d'autres non

 Les propriétés liées au texte et liées à la liste sont
héritées - color, font-size, font-family, line-
height, text-align, list-style, etc
 Les styles de boîte et de positionnement ne sont pas
hérités - width, height, border, margin,
padding, position, float, etc
 Les éléments <a> n'héritent pas de la couleur et de la
décoration de texte

10
Syntaxe des feuilles de style
 Les feuilles de style se composent de règles, de
sélecteurs, de déclarations, de propriétés et de
valeurs

[Link]
 Les sélecteurs sont séparés par des virgules
 Les déclarations sont séparées par des points-virgules
 Les propriétés et les valeurs sont séparées par des
deux-points
h1,h2,h3 { color: green; font-weight:
11
bold; }
 Sélecteurs
12

 Les sélecteurs déterminent à quel élément la règle

s'applique :
 Tous les éléments de type spécifique (balise)
 Ceux qui correspondent à un attribut spécifique (id,
class)
 Les éléments peuvent être mis en correspondance en
fonction de la manière dont ils sont imbriqués dans
l'arborescence du document (HTML)
 Exemples:
.header a { color: green }
#menu>li { padding-top: 8px }
 Sélecteurs (2)
13

 Trois principaux types de sélecteurs :

 Par balise (sélecteur de type) :
h1 { font-family: verdana,sans-serif; }
 Par l’élément id:
#element_id { color: #ff0000; }
 Par le nom de la classe (seulement pour HTML):
.myClass {border: 1px solid red}

 Les sélecteurs peuvent être combinés avec des virgules :

h1, .link, #top-link {font-weight: bold}
Cela correspondra aux balises <h1>, aux éléments avec
la classe link et à l'élément avec l'id top-link
Sélecteurs (3)
 Les pseudo-classes définissent l'état
 :hover, :visited, :active , :lang
 Les pseudo-éléments définissent des "parties"
d'élément ou sont utilisés pour générer du contenu
 :first-line , :before, :after

a:hover { color: red; }

p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }

14
 Sélecteurs (4)
15

 Correspondance relative au placement de l'élément :

p a {text-decoration: underline}
Cela correspondra à toutes les balises <a> qui sont à
l'intérieur de <p>
 * – sélecteur universel (à éviter ou à utiliser avec précaution !) :
p * {color: black}

Cela correspondra à tous les descendants de l'élément <p>

 + sélecteur - utilisé pour correspondre à "prochain frère”:

img + .link {float:right}

Cela correspondra à tous siblings avec un lien de nom de
classe qui apparaît immédiatement après la balise <img>
 Sélecteurs (5)
16

 > sélecteur - correspond aux nœuds enfants directs :

p > .error {font-size: 8px}
Cela correspondra à tous les éléments avec une erreur de
classe, enfants directs de la balise <p>
 [ ] – correspond aux attributs de balise
par expression régulière :
img[alt~=logo] {border: none}
Cela correspondra à toutes les balises <img> avec
l'attribut alt contenant le mot logo
 .class1.class2 (no space) - correspond aux
éléments avec les deux (toutes) classes appliquées en même
temps
 Valeurs dans les regles CSS
17

 Les couleurs sont définies au format RVB (décimal ou

hexadécimal) :
 Exemple : #a0a6aa = rgb(160, 166, 170)
 Des alias de couleur prédéfinis existent : noir, bleu, etc.

 Les valeurs numériques sont spécifiées dans :

 Pixels, ems, par ex. 12px , 1.4em
 Points, pouces, centimètres, millimètres

 Par exemple. 10pt, 1po, 1cm, 1mm

 Pourcentages, par ex. 50%

 Zéro peut être utilisé sans unité : bordure : 0 ;

Styles de navigateur par défaut
 Les navigateurs ont des styles CSS par défaut
 Utilisélorsqu'il n'y a pas d'informations CSS ou toute
autre information de style dans le document
 Attention : les styles par défaut diffèrent selon les
navigateurs
 Par exemple. les marges, les rembourrages et les tailles
de police diffèrent le plus souvent et les développeurs
les réinitialisent généralement
* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: 0; }

18
 Lier HTML et CSS
19

 HTML (contenu) et CSS (présentation) peuvent être liés

de trois manières :
 Inline: les règles CSS dans l'attribut style
 Aucun sélecteur n'est necessaire
 Embedded: dans le <head> dans une balise <style>
 External: Règles CSS dans un fichier séparé (meilleur)
 Généralement un fichier avec l'extension .css
 Lié via la balise <link rel="stylesheet" href=…>
Lier HTML et CSS (2)
 L'utilisation de fichiers externes est fortement
recommandée
 Simplifie le document HTML
 Améliore la vitesse de chargement des pages lorsque
le fichier CSS est mis en cache

20
 Styles Inline: Exemple
21

[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "[Link]
DTD/[Link]">
<html xmlns="[Link]
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
Styles Inline: Exemple
[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "[Link]
DTD/[Link]">
<html xmlns="[Link]
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
22
</html>
Cascade CSS (priorité)
 Il existe des feuilles de style navigateur, utilisateur
et auteur avec des déclarations "normal" et
"important"
 Styles de navigateur (priorité la plus basse)
 Styles utilisateur normaux

 Styles d'auteur normaux (externe, en tête, en ligne)

 Styles d'auteur importants

 Styles utilisateur importants (priorité maximale)

a { color: red !important ; }

[Link]
23
Spécificité CSS
 La spécificité CSS est utilisée pour déterminer la
priorité des déclarations de style CSS avec la
même origine. Les sélecteurs sont ce qui compte
 Calcul simple : #id = 100, .class = 10, :pseudo = 10,
[attr] = 10, tag = 1, * = 0
 Même nombre de points ? L'ordre compte.

 Voir également:
 [Link]
know/
 [Link]

24
 Styles intégrés

 Incorporé dans le HTML dans la balise <style> :

<style type="text/css">
 Labalise <style> est placée dans la section <head> du
document
 l'attribut type spécifie le type MIME
 MIME décrit le format du contenu
 Les autres types MIME incluent text/html, image/gif,
text/javascript …
 Utilisé pour les styles spécifiques au document

25
Styles intégrés: Exemple
[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head> 26
Styles intégrés: Exemple(2)

…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>
27
Styles intégrés: Exemple(3)
…
<body>
<h1 class="blue">A Heading</h1>
<p>Here is some text. Here is some text. Here
is some text. Here is some text. Here is some
text.</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.</p>
</body>
</html>

28
 Styles CSS externes
 Liaison externe
 Des pages séparées peuvent toutes utiliser une feuille de style
partagée
 Ne modifiez qu'un seul fichier pour changer les styles
sur l'ensemble de votre site Web(see
[Link]

 La balise link (avec l’attribute rel)

 Spécifie une relation entre le document actuel et un
autre document
<link rel="stylesheet" type="text/css"
href="[Link]">
 L’élément link doit etre dans <head>
 Styles externes: exemple

[Link]
/* CSS Document */

a { text-decoration: none }

a:hover { text-decoration: underline;

color: red;
background-color: #CCFFCC }

li em { color: red;
font-weight: bold }

ul { margin-left: 2cm }

ul ul { text-decoration: underline;
margin-left: .5cm } 30
Styles externes: exemple(2)
[Link]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"[Link]
[Link]">
<html xmlns="[Link]
<head>
<title>Importing style sheets</title>
<link type="text/css" rel="stylesheet"
href="[Link]" />
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<li>Milk</li>
… 31
Styles externes: exemple(3)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="[Link] title="grocery
store">Go to the Grocery store</a>
</body>
</html>
32
Styles externes: exemple(4)
…
<li>Bread
<ul>
<li>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<a href="[Link] title="grocery
store">Go to the Grocery store</a>
</body>
</html>
33
Text-related CSS Properties
 color – specifies the color of the text
 font-size – size of font: xx-small, x-small,
small, medium, large, x-large, xx-large,
smaller, larger or numeric value
 font-family – comma separated font names
 Example: verdana, sans-serif, etc.
 The browser loads the first one that is available
 There should always be at least one generic font

 font-weight can be normal, bold, bolder,

lighter or a number in range [100 … 900]
34
CSS Rules for Fonts (2)
 font-style – styles de font
 Valeurs: normal, italic, oblique
 text-decoration – décore le texte
 Valeurs:
none, underline, line-trough,
overline, blink
 text-align – définit l'alignement du texte ou
d'un autre contenu
 Valeurs: left, right, center, justify

35
Shorthand Font Property
 font
 Shorthand rule for setting multiple font properties at
the same time
font:italic normal bold 12px/16px verdana
is equal to writing this:

font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: verdana;
36
 Backgrounds
 background-image
 URL of image to be used as background, e.g.:
background-image:url("[Link]");
 background-color
 Using color and image and the same time
 background-repeat
 repeat-x, repeat-y, repeat, no-repeat
 background-attachment
 fixed / scroll

37
Backgrounds (2)
 background-position: specifies vertical and
horizontal position of the background image
 Verticalposition: top, center, bottom
 Horizontal position: left, center, right

 Both can be specified in percentage or other numerical

values
 Examples:

background-position: top left;

background-position: -5px 50%;

38
 Background Shorthand Property

 background: shorthand rule for setting background

properties at the same time:
background: #FFF0C0 url("[Link]") no-repeat
fixed top;

is equal to writing:
background-color: #FFF0C0;
background-image: url("[Link]");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: top;
 Some browsers will not apply BOTH color and image
for background if using shorthand rule
39
Background-image or <img>?
 Background images allow you to save many image
tags from the HTML
 Leads to less code
 More content-oriented approach

 All images that are not part of the page content

(and are used only for "beautification") should be
moved to the CSS

40
Borders
 border-width: thin, medium, thick or
numerical value (e.g. 10px)
 border-color: color alias or RGB value
 border-style: none, hidden, dotted,
dashed, solid, double, groove, ridge,
inset, outset
 Each property can be defined separately for left,
top, bottom and right
 border-top-style, border-left-color, …
41
Border Shorthand Property
 border: shorthand rule for setting border properties at
once:
border: 1px solid red
is equal to writing:
border-width:1px;
border-color:red;
border-style:solid;
 Specify different borders for the sides via shorthand
rules: border-top, border-left, border-right,
border-bottom
 When to avoid border:0

42
Width and Height
 width – defines numerical value for the width of
element, e.g. 200px
 height – defines numerical value for the height of
element, e.g. 100px
 By default the height of an element is defined by its
content
 Inline elements do not apply height, unless you change

their display style.

43
Margin and Padding
 margin and padding define the spacing around
the element
 Numericalvalue, e.g. 10px or -5px
 Can be defined for each of the four sides separately -
margin-top, padding-left, …
 margin is the spacing outside of the border

 padding is the spacing between the border and the

content
 What are collapsing margins?

44
Margin and Padding: Short Rules

 margin: 5px;
 Sets all four sides to have margin of 5 px;
 margin: 10px 20px;
 top and bottom to 10px, left and right to 20px;
 margin: 5px 3px 8px;
 top 5px, left/right 3px, bottom 8px
 margin: 1px 3px 5px 7px;
 top, right, bottom, left (clockwise from top)
 Same for padding

45
The Box Model

46
 IE Quirks Mode

 When using quirks

mode (pages with no
DOCTYPE or with a
HTML 4 Transitional
DOCTYPE), Internet
Explorer violates the
box model standard

47
Positioning
 position: defines the positioning of the element in
the page content flow
 The value is one of:
 static (default)
 relative – relative position according to where
the element would appear with static position
 absolute – position according to the innermost
positioned parent element
 fixed – same as absolute, but ignores page
scrolling
48
Positioning (2)
 Margin VS relative positioning
 Fixed and absolutely positioned elements do not
influence the page normal flow and usually stay on
top of other elements
 Their position and size is ignored when calculating the
size of parent element or position of surrounding
elements
 Overlaid according to their z-index
 Inline fixed or absolutely positioned elements can
apply height like block-level elements

49
Positioning (3)
 top, left, bottom, right: specifies offset of
absolute/fixed/relative positioned element as
numerical values
 z-index : specifies the stack level of positioned
elements
 Understanding stacking context
Each positioned element creates a stacking
context.
Elements in different stacking contexts are
overlapped according to the stacking order of
their containers. For example, there is no way
for #A1 and #A2 (children of #A) to be placed
over #B without increasing the z-index of #A. 50
Inline element positioning
 vertical-align: sets the vertical-alignment of
an inline element, according to the line height
 Values: baseline, sub, super, top, text-top,
middle, bottom, text-bottom or numeric
 Also used for content of table cells (which apply middle
alignment by default)

51
Float
 float: the element “floats” to one side
 left: places the element on the left and following
content on the right
 right: places the element on the right and following
content on the left
 floated elements should come before the content that
will wrap around them in the code
 margins of floated elements do not collapse

 floated inline elements can apply height

52
Float (2)
 How floated elements are positioned

53
Clear
 clear
 Sets the sides of the element where other floating
elements are NOT allowed
 Used to "drop" elements below floated ones or expand
a container, which contains only floated children
 Possible values: left, right, both

 Clearing floats
 additional element (<div>) with a clear style

54
Clear (2)
 Clearing floats (continued)
 :after { content: ""; display: block;
clear: both; height: 0; }
 Triggering hasLayout in IE expands a container of
floated elements
 display:inline-block;
 zoom: 1;

55
Opacity
 opacity: specifies the opacity of the element
 Floating point number from 0 to 1
 For old Mozilla browsers use –moz-opacity

 For IE use filter:alpha(opacity=value) where

value is from 0 to 100; also, "binary and script
behaviors" must be enabled and hasLayout must be
triggered, e.g. with zoom:1

56
Visibility
 visibility
 Determines whether the element is visible
 hidden: element is not rendered, but still occupies
place on the page (similar to opacity:0)
 visible: element is rendered normally

57
Display
 display: controls the display of the element and
the way it is rendered and if breaks should be
placed before and after the element
 inline: no breaks are placed before and after
(<span> is an inline element)
 block: breaks are placed before AND after the
element (<div> is a block element)

58
Display (2)
 display: controls the display of the element and
the way it is rendered and if breaks should be
placed before and after the element
 none: element is hidden and its dimensions are not
used to calculate the surrounding elements rendering
(differs from visibility: hidden!)
 There are some more possible values, but not all
browsers support them
 Specific displays like table-cell and table-row

59
 Overflow

 overflow: defines the behavior of element when content

needs more space than you have specified by the size
properties or for other reasons. Values:
 visible (default) – content spills out of the element

 auto - show scrollbars if needed

 scroll – always show scrollbars

 hidden – any content that cannot fit is clipped

60
Other CSS Properties
 cursor: specifies the look of the mouse cursor
when placed over the element
 Values: crosshair, help, pointer, progress,
move, hair, col-resize, row-resize, text,
wait, copy, drop, and others
 white-space – controls the line breaking of text.
Value is one of:
 nowrap – keeps the text on one line
 normal (default) – browser decides whether to brake
the lines if needed

61
 Benefits of using CSS

 More powerful formatting than using presentation

tags
 Your pages load faster, because browsers cache the
.css files
 Increased accessibility, because rules can be defined
according given media
 Pages are easier to maintain and update

62
Maintenance Example
Title Title
Some random Title Some random
Title text here. You Some random text here. You
Title can’t read it text here. You Title can’t read it
Some random
anyway! Har har can’t read it anyway! Har har
Title text here. You Title Some random har! Use Css. Some random
anyway! Har har har! Use Css.
can’t read it text here. You text here. You
Some random Some random har! Use Css.
anyway! Har har can’t read it can’t read it
text here. You text here. You Title
har! Use Css. anyway! Har har anyway! Har har
can’t read it can’t read it Title Title
har! Use Css. Some random har! Use Css.
anyway! Har har anyway! Har har
text here. You Some random Some random
har! Use Css. har! Use Css.
can’t read it text here. You text here. You Title
anyway! Har har can’t read it can’t read it
Title Some random
har! Use Css. anyway! Har har anyway! Har har
Some random Title Title Title text here. You
Title har! Use Css. har! Use Css.
text here. You can’t read it
Some random Some random Some random
can’t read it Some random anyway! Har har
text here. You text here. You Title text here. You
anyway! Har har text here. You har! Use Css.
can’t read it can’t read it can’t read it Title
har! Use Css. can’t read it Some random
anyway! Har har anyway! Har har anyway! Har har
anyway! Har har text here. You Title Some random
har! Use Css. har! Use Css. har! Use Css.
Title har! Use Css. Title can’t read it text here. You
Some random
anyway! Har har can’t read it
Some random Some random Title text here. You
har! Use Css. anyway! Har har
text here. You text here. You can’t read it
Some random har! Use Css.
can’t read it can’t read it anyway! Har har
text here. You
anyway! Har har anyway! Har har har! Use Css.
Title can’t read it Title
har! Use Css. har! Use Css. anyway! Har har
Some random har! Use Css. Some random
Title text here. You text here. You Title

CSS
Title can’t read it can’t read it
Some random Some random
anyway! Har har anyway! Har har
text here. You Some random Title Title Title text here. You
har! Use Css. har! Use Css.
can’t read it text here. You can’t read it
Some random Some random Some random
anyway! Har har can’t read it anyway! Har har
Title text here. You text here. You text here. You
har! Use Css. anyway! Har har har! Use Css.
can’t read it can’t read it can’t read it
har! Use Css. Some random
anyway! Har har anyway! Har har anyway! Har har
text here. YouTitle Title
har! Use Css. har! Use Css. har! Use Css.
can’t read it

file
Some random Some random
anyway! Har har
Title text here. You Title Title text here. You
har! Use Css.
can’t read it can’t read it
Some random Some random Some random
anyway! Har har anyway! Har har
Title text here. You text here. You text here. You
har! Use Css. har! Use Css.
can’t read it can’t read it can’t read it
Some random
anyway! Har har anyway! Har har anyway! Har har
Title text here. You Title Title
har! Use Css. har! Use Css. har! Use Css.
can’t read it Title Title Title
Some random Some random Some random
anyway! Har har
text here. You Some random text here. You Some random text here. You Some random
har! Use Css.
can’t read it text here. You can’t read it text here. You can’t read it Title text here. You
anyway! Har har can’t read it anyway! Har har can’t read it anyway! Har har can’t read it
har! Use Css. har! Use Css. har! Use Css. Some random
anyway! Har har anyway! Har har anyway! Har har
text here. You
har! Use Css. har! Use Css. har! Use Css.
Title Title can’t read it
anyway! Har har
Some random Title Some random Title
har! Use Css.
text here. You Some random text here. You Some random
Title can’t read it text here. You can’t read it text here. You
anyway! Har har can’t read it anyway! Har har can’t read it
Some random Title
har! Use Css. anyway! Har har har! Use Css. anyway! Har har
text here. You
Title Some random
har! Use Css. har! Use Css.
can’t read it Title text here. You Title
Some random
anyway! Har har can’t read it
text here. You Some random Some random Title
har! Use Css. anyway! Har har
can’t read it text here. You text here. You
har! Use Css. Some random
anyway! Har har can’t read it can’t read it
Title Title text here. You
har! Use Css. anyway! Har har anyway! Har har can’t read it
Some random har! Use Css. Some random har! Use Css. anyway! Har har
text here. You text here. You Title Title
har! Use Css.
can’t read it can’t read it
Some random Some random
anyway! Har har anyway! Har har
text here. You text here. You
har! Use Css. har! Use Css.
can’t read it can’t read it
anyway! Har har anyway! Har har
har! Use Css. har! Use Css.

63
CSS Development Tools
 Visual Studio – CSS Editor

64
CSS Development Tools (3)
 Firebug – add-on to Firefox used to examine and
adjust CSS and HTML

65
CSS Development Tools (4)
 IE Developer Toolbar – add-on to IE used to
examine CSS and HTML (press [F12])

66