HTML 5/CSS 3/Javascriptbeurton/Enseignement/PI/CSS-en.pdf · CSS Dé nition (CSS) CSS( Cascading Style Sheets , isa language allowing description of HTML page presentation. Standard

Université de BordeauxInternational Track - Informatics Unit.

Initiation au développement Web

HTML 5/CSS 3/Javascript

Florent Grélard, Marie Beurton-Aimar (Étienne André)[email protected]

http://dept-info.labri.fr/~beurton

Version : 15 avril 2019 (diapositives de présentation)

Florent Grélard/Marie Beurton-Aimar (Université de Bordeaux)Programmation évenementielle 2017�2018 1 / 24

[email protected]://dept-info.labri.fr/~beurton

CSS

Dé�nition (CSS)

CSS (Cascading Style Sheets, is a language allowing description of HTMLpage presentation.

Standard developped by the W3C.

CSS is updated by level and not by version.

Level 3 reuses and extends the 1 and 2 levels.

Di�erent from HTML !


Principle : format and content are separated.

Principle

The principle is to separate the content (HTML) to the format (CSS).

A CSS style sheet build the format of the HTML page.

Good practice

An HTML site well designed has to not contain any style information insidethe HTML documents.


CSS3 Syntax - simple Example

Page HTML :

. . .Happy Together

Wong Kar−Wai movier e a l i z e d i n 1997

. . .

Style sheet :

body {c o l o r : #000080;

}

h1 {font−we ight : bo ld ;font−s t y l e : i t a l i c ;c o l o r : r ed ;font−s i z e : 24px ;

}

Displaying :

Happy Together

Wong Kar-Wai Movie realized in 1997


Main Syntax of the CSS sheet

Selecting︷︸︸︷h1 {

font-weight︸︷︷︸Property

: bold︸︷︷︸Values

;

font-family︸︷︷︸Property

: Times New Roman, Times, serif︸︷︷︸Values

;

}

Remarques :

Extending .css

No head part or bottom in a CSS �le.

Syntax no sensible to the space or end of line.I BUT indentation is strongly recommanded !


Style included or separeted ? (1/2)

Bad :

Happy Together

A little bit better :

. . .

h1 { c o l o r : r ed ; }

. . .

Happy Together


Style included or separeted ? (2/2)

Godd :

. . .< l i n k r e l=" s t y l e s h e e t " type=" t e x t / c s s "

media=" s c r e e n " h r e f="mys ty l e . c s s " />. . .

Happy Together

. . .where mystyle.css is a separeted �le de�ning the properties of (and of the others tags).


Comments

Comments are CSS code which is not executed, so not taken into accountby the browser.Syntax : /* Text in comments */

body {c o l o r : #000080; /∗ the c o l o r ∗//∗ t ex t−d e c o r a t i o n : l i n e−th rough ; ∗/}

Attention

Comments stay visible in the source style sheet, which is visible from theclient part.

DO NOT leave inside con�dential information !


Displaying text

Properties : styles

Property font-size : police sizeI Constant predefined values : xx-small, x-small, medium, large,

x-large, xx-largeI Relative predefined values : smaller, largerI Numeric values : x units, where unit ∈ {pt, px, em, %}

Property font-weight : thickness of the policeI Predefined values : lighter, normal, bold, bolderI Numeric values : x ∈ [0; 1000] (1000 is the most thick)

Property font-style : tilting of the policeI Predefined values : normal, italic, oblique

Property text-decoration : decoration (underline, overline)I Predefined values : underline, overline, line-through, none


Displaying text

Properties : police

Property font-family : families of font policesI Major families : serif, sans-serif, mono, monospaceI Police name : Arial, Courier New, Courier, Helvetica, Times New

Roman, Times, and more ...

vif zephyr vif zephyr vif zephyrserif sans-serif monospace

Good practices for typography

1 Titles are most often with sans-serif, and body with serif.

2 It is recommended to not mix font families into the same document.


Displaying text

Properties : colors

Property color : police colors

I Predefined colors : red, blue, green, orange, etc.F See examples at web-color.aliasdmc.fr/

I Users values :F Hexadecimal : #RRVVBBF RVB : rgb(r, g, b) with values from 0 to 255F RVB : rgb(r%, g%, b%) with values from 0 to 100F RVB + transparency : rgba(r, g, b, a) with values from 0 to 255,

and transparency (a) between 0 and 1F HSL (color / saturation / light) : hsl and hsla


web-color.aliasdmc.fr/

Displaying text

Format - Identi�ants and classes

Identi�ants

Syntax HTML :

Syntax CSS : h1 #title { ... }

Usage unic (only one id=title in the HTML page.)

Classes

Syntax HTML :

Syntax CSS : h1 .title { ... }

Usage multiple (several class=title autorized in the HTML page.)


Displaying text

Identi�ants and classes : example

Page HTML :

As Tears Go ByNos annees sauvage sLes Cendres du tempsChungking Exp r e s sLes Anges dechus

Style sheet :

h2 {font−s t y l e : i t a l i c ;

}#pr em i e r {

c o l o r : r ed ;}. b l e u {

c o l o r : b l u e ;}


Displaying text

Identi�ants and classes : example (displaying)

As Tears Go By

Nos annees sauvages

Les Cendres du temps

Chungking Express

Les Anges dechus


Displaying text

Inheritance

CSS properties inherit from parent properties.

Inheritance specialisation of property :

h2 #first inherits from h2

h2 .blue inherits from h2 (but not from h2 #first)

Inheritance by property semantically parented :

h2 inherits from body


Displaying text

Margins and edges

All HTML element is considered as contained in a box, de�ned with :

internal surface (background)

internal space (padding)

edge (border)

external margin (margin)

margin

border

padding

background


Displaying text

Margins and edges : example

Smal l example coming from the

Wikibook about CSS ( Cascad ing S t y l e Shee t s ) .

p . bo i t e o r a n g e {bo rde r : 1px do t t ed b l a ck ;padding−top : 1em ;padding−r i g h t : 2em ;padding−bottom :3em ;padding− l e f t : 4 em ;background−c o l o r :# f c9 ;width :10em ;t ex t−a l i g n : j u s t i f y

}


Displaying text

W3C - Veri�cation

As for HTML, W3C and Mozilla fondation provide a validator of CSS3code.

http://jigsaw.w3.org/css-validator/


http://jigsaw.w3.org/css-validator/

Displaying text

An example without CSS


Displaying text

Same example with CSS

Code HTML identicalSimple adding of a style sheet.


Displaying text

Sources and references


Displaying text



Displaying text


References

Documents � Une Contre Histoire des Internets � (J. Goetz and J.M.Manach)http://lesinternets.arte.tv/

Speci�cation of HTML5 (recommandation of the 28/10/2014)http://www.w3.org/TR/html5/

Sources

Histoire de HTML : Wikipedia > HTMLhttp://fr.wikipedia.org/wiki/HTML


http://lesinternets.arte.tv/http://www.w3.org/TR/html5/http://fr.wikipedia.org/wiki/HTML

Displaying text


References

Le langage CSS (Wikilivres)https://fr.wikibooks.org/wiki/Le_langage_CSS

Cascading Style Sheets (Wikbooks), en anglais mais plus complethttps://en.wikibooks.org/wiki/Cascading_Style_Sheets

Sources

La speci�cation de CSS(3) par le W3Chttp://www.w3.org/TR/CSS/

Media Querieshttps://en.wikipedia.org/wiki/Media_queries


https://fr.wikibooks.org/wiki/Le_langage_CSShttps://en.wikibooks.org/wiki/Cascading_Style_Sheetshttp://www.w3.org/TR/CSS/https://en.wikipedia.org/wiki/Media_queries

Displaying text