Scribd
Upload
27 views

CSS COMPLETE_21_01-1

Uploaded by

jerryjay2910
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
27 views

CSS COMPLETE_21_01-1

Uploaded by

jerryjay2910
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 139

INTERNET APPLICATION

PROGRAMMING

Cascading Style Sheets (CSS)

TCHAPGA C.

21/04/2021 1
INTRODUCTION

Cascading Style Sheets (CSS) is a style sheet


language used for describing the presentation
semantics (the look and formatting) of a
document written in a markup language.
Its most common application is to style
web pages written in HTML and XHTML, but the
language can also be applied to any kind of XML
document, including plain XML…
The W3C is currently working on CSS3 (Cascading
Style Sheets, Version 3). The finished work will result in a
number of CSS3 specifications, each one concerning a
specific area of CSS

21/04/2021 2
INTRODUCTION
CSS3 is completely backwards compatible, so you will not have to
change existing designs. Browsers will always support CSS2.
CSS3 Modules
CSS3 is split up into "modules". The old specification has been split into
smaller pieces, and new ones are also added.

Some of the most important CSS3 modules are:


• Selectors
• Box Model
• Backgrounds and Borders
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
• …

However, many of the new CSS3 properties have been implemented in


modern browsers.
21/04/2021 3
GENERAL SYNTAX

21/04/2021 4
21/04/2021 5
HOW TO EDIT THE CSS CODE
Inline style:
Inside the HTML document, style information
on a single element, specified using the style
attribute

21/04/2021 6
Internal or
Embedded style
• An internal CSS is used to
define a style for a single
HTML page.
• An internal CSS is defined
in the <head> section of
an HTML page, within a
<style> element

21/04/2021 7
HOW TO EDIT THE CSS CODE
External CSS (External style sheets)
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web
site, by changing one file.
To use an external style sheet, add a link to it in the <head> section of the
HTML page:

21/04/2021 8
21/04/2021 9
HOW TO EDIT THE CSS CODE
External style sheets,
A separate CSS file referenced from the document

I EDIT MY STYLE

21/04/2021 10
SELECT ELEMENTS with class attribute

21/04/2021 11
SELECT ELEMENTS with id

21/04/2021 12
ELEMENT’S SELECTION
Class selector
It selects all class having
the value class.
It can be use also for span
Universal selector and div tags
It selects all the elements
And apply the style a Id selector
general default style to It selects the unique Id having
use for all elements the value id.
An id must be unique for a
whole page.

Multiple selector
It selects all the elements a and b at
once and apply the same style.
We can have two or more Example:
p, a, em, a:hover { color: blue;}
21/04/2021 13
SELECT SEVERAL ELEMENTS
Adjacent Sibling Selector
First element B folowing
the A element (Adjacent)
Example: h3 + p{ }
Will select the first paragraph(p)
Descendant Selector just after all the title h3
B contained in A
Example: h3 a{ }
Will select all the links
located in a title h3

General Sibling Selector


The following example selects all
<p> elements that are siblings of
Child Selector <div> elements
The child selector selects all
elements that are the immediate
children of a specified element

21/04/2021 14
SELECT SEVERAL ELEMENTS

Select element X having an


attribute=attribut
Example: h3 a{ }
Will select all the links located in a
title h3

21/04/2021 15
All CSS Pseudo Classes

21/04/2021 16
21/04/2021 17
21/04/2021 18
Fonts

• Font Family
The font family of a text is set with the font-
family property.
The font-family property should hold several font names
as a "fallback" system. If the browser does not support
the first font, it tries the next font, and so on.

21/04/2021 19
Font Size

• The font-size property sets the size of the text.


• Being able to manage the text size is important in
web design. However, you should not use font
size adjustments to make paragraphs look like
headings, or headings look like paragraphs.
• Always use the proper HTML tags, like <h1> -
<h6> for headings and <p> for paragraphs.
• The font-size value can be an absolute, or relative
size.
21/04/2021 20
FONT SIZE
• Absolute size:
Ø Sets the text to a specified size
Ø Does not allow a user to change the text size in all
browsers (bad for accessibility reasons)
Ø Absolute size is useful when the physical size of the
output is known
• Relative size (em/%):
Ø Sets the size relative to surrounding elements
Ø Allows a user to change the text size in browsers
Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

21/04/2021 21
Set Font Size With Em
Ø To allow users to resize the text (in the browser menu),
many developers use em instead of pixels.
Ø The em size unit is recommended by the W3C.
Ø 1em is equal to the current font size. The default text
size in browsers is 16px. So, the default size of 1em is
16px.
Ø The size can be calculated from pixels to em using this
formula: pixels/16=em

21/04/2021 22
TEXT FORMATTING (W3Schools)

21/04/2021 23
TEXT FORMATTING (sequel)
ITALIC : font-style
1. italic : to italicize writings.
2. oblique : the text will be in o
3. normal : to cancel the italic mode, is the
default value

21/04/2021 24
TEXT FORMATTING (sequel)
BOLD: font-weight
1. Bold: to turn text bold
2. normal : to cancel the bold mode, is the
default option
Nb: don’t use strong to make that

21/04/2021 25
TEXT FORMATTING (sequel)
Underlining and other order decoration:
Text-decoration
1. underline
2. line-through
3. overline
4. blink (Don’t walk on IE and Google Chrome at
time)
5. none : normal (default).

21/04/2021 26
TEXT FORMATTING (sequel)
Underlining and other order decoration

21/04/2021 27
TEXT FORMATTING (sequel)

Alignment: text-align
1. left : align text to the left
2. center : center the text
3. right : align text to the right
4. justify : make it justified

NB: work only on block elements

21/04/2021 28
TEXT FORMATTING (sequel)
Alignment: text-align

21/04/2021 29
FLOAT
Element wrapping: float
CSS allow to make text wrapping:

21/04/2021 30
FLOAT
Element wrapping: float
CSS allow to wrap elements with text, for that,
you have two values to use:
1. left :element will float to the left
2. right : it will float to the right

21/04/2021 31
FLOAT
Element wrapping: float

21/04/2021 32
FLOAT
Element wrapping: float

21/04/2021 33
FLOAT
Stop floating: clear
You can decide to stop float the element:
1. left :element will stop floating to the left
after the instruction float: left;
2. right : it will float to the right
3. both: no matter the
previous float

21/04/2021 34
COLORS
• Colors are specified using format:
– predefined color names,
– RGB,
– HEX,
– HSL,
– RGBA,
– HSLA

21/04/2021 35
21/04/2021 36
Color Names Supported by All Browsers
All modern browsers support the following 140 color names

COLOR

21/04/2021 37
21/04/2021 38
TEXT FORMATTING (sequel)
COLOR
II RGB Notation:
In CSS, a color can be specified as an RGB
value, using this formula:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines
the intensity of the color between 0 and 255.

21/04/2021 39
Hexadecimal Notation
In CSS, a color can be specified using a hexadecimal value in
the form: #rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal
values between 00 and ff (same as decimal 0-255).
#000000=Black #FFFFFF=White

NB:#FFAA33 can be written #FA3 .


21/04/2021 40
HSL Value
In CSS, a color can be specified using hue,
saturation, and lightness (HSL) in the form:
hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360.
0 is red, 120 is green, and 240 is blue.
• Saturation: Saturation can be described as the
intensity of a color is a percentage value, 0%
means a shade of gray, and 100% is the full color.
• Lightness: can be described as how much light
you want to give the color, is also a percentage,
0% is black, 50% is neither light or dark, 100% is
white

21/04/2021 41
• Shades of gray are often defined by setting the
hue and saturation to 0, and adjust the
lightness from 0% to 100% to get
darker/lighter shades

21/04/2021 42
21/04/2021 43
Alpha Channel

21/04/2021 44
BACKGROUND
Background COLOR

21/04/2021 45
21/04/2021 46
BACKGROUND
Background Image:
background-image:url(”location”);

Remark: url could be absolute or relative,


when it is relative, make sure it is related to
the css file indicating image location.
Eg: url(‘’ image/my_background.jpg’’)
Exercice: Study (values, and test…)
1. background-attachment
2. background-repeat
21/04/2021 47
BACKGROUND

Fix the background with :


background-attachment
1. Fixed : the image in background will remain
fixed, and the the text will slide
2. Scroll: The background will move with the text.

Remarq: You can get nice and good quality image


in www.pexels.com.

21/04/2021 48
BACKGROUND
Repeat the background with :
background-repeat
Fixed
1. no-repeat: image won’t be repeated(unique)
2. repeat-x : Horizontal repetition
3. repeat-y : Vertical repetition
4. repeat :mosaic (default)

21/04/2021 49
BACKGROUND
Position the background image with :
background-position
It is effiscient with background-repeat: no-repeat; related
to the left and up screen corner.

These values can be used as well:


1. top
2. bottom
3. left
4. center
5. right
21/04/2021 50
BACKGROUND
Position the background image with :
background-position
It is effiscient with background-repeat: no-repeat; related
to the left and up screen corner.

These values can be used as well:


1. top
2. bottom
3. left
4. center
5. right
21/04/2021 51
BACKGROUND
Position, repeat and attachement the
background image with : the super-
property: background
• The order does not matter
• They arn’t compulsory

21/04/2021 52
BACKGROUND
Position, repeat and attachement the
background several images with : the
super-property: background
• The order do matter

21/04/2021 53
BACKGROUND

transparency
1. Opacity
1. Totaly opaque= 1
2. Totaly transparent= 0

2. RGBa (aphal Channel)

21/04/2021 54
BORDER
Border
1. border-width (in px)
2. border-color (color Notation)
3. border-style ()
1. none :
2. solid :
3. dotted :
4. dashed :
5. double :
6. groove :
7. ridge :
8. inset :
9. outset :

21/04/2021 55
BORDER
Border
1. border-width (in px)
2. border-color (color Notation)
3. border-style ()
1. none :
2. solid :
3. dotted :
4. dashed :
5. double :
6. groove :
7. ridge :
8. inset :
9. outset :

21/04/2021 56
BORDER

Border
• border-top :
• border-bottom
• border-left :
• border-right :
• Radius
• shadow

21/04/2021 57
Pseudo format
• Hover: when the mouse is over the link
• Focus: in use Just at the click moment
(dashed border visible with new tab chrome and
safari) for example with input field
• Active: selected link when clicking on the
element (during the moment you maintain the
button pressed)
• Visited: when the link has been visited

21/04/2021 58
Pseudo format
• Link
• Hover
• Focus
• Active
• Visited Note: a:hover MUST come after a:link and a:visited in
the CSS definition in order to be
effective! a:active MUST come after a:hover in the
CSS definition in order to be effective! Pseudo-
class names are not case-sensitive
21/04/2021 59
HTML Layout Elements
Structure of a web page is made up with blocks

21/04/2021 60
BOX MODEL
We distinguish 2 types of box:
1. Block: it automatically creates a break line (P, h1, div,
section, article…)

2. Inline: is inside a block(a, em, span, img… )

21/04/2021 61
DIMENSIONS
We can resize a block with:
1. width: in px or %tage ( Ex: 50%). Default= 100%
2. height: in px or %tage ( Ex: 270px)
Remark: we can combine min-width, min-height,max-width,
max-height with those attributes to stress on desired limits.

21/04/2021 62
MARGIN AND PADDING
We can set a block boundaries with:
1. width: in px or %tage ( Ex: 50%). Default= 100%
2. height: in px or %tage ( Ex: 270px)
Remark: we can combine min-width, min-height,max-width,
max-height with those attributes to stress on desired limits.

21/04/2021 63
MARGIN AND PADDING
Each box has a content area.
The rectangle that bounds this area is the content
edge. Around the content area is the padding area and its
outside bounds are called the padding edge. Outside the
padding is the border area and the outside boundary of that
area is the border edge. Finally, outside the border is the
margin area and its outer edge is the margin edge.

When the specification says that the padding or border


is “absent” on some side of the box, that actually means that
its thickness is zero.

Remark: Note that the margin, unlike the border and padding,
may have a negative thickness. That is one way to make
adjacent boxes overlap each other.

21/04/2021 64
MARGIN AND PADDING
Let’s take two paragraph
and apply this:

The output will give this:


Remark:
• By default the padding is null
(0).
• The margin is not null, that is
why we’ll have impression that
we skipped one (01) line.
• All elements don’t have the
same default margin and
padding ( for div is both
padding and margin = 0)

21/04/2021 65
MARGIN AND PADDING
We can use these properties to set bloc’s parameters
MAGIN REMARK we can use also:
• margin-top margin: 2px 0 3px 1px;
2px up;
• margin-bottom 0px to the right(so we can write
• margin-left 0);
3px on the bottom;
• margin-right 1px to the left;
PADDING margin: 2px 1px;
2px on top and 2px on the
• padding-top bottom;
• padding-bottom 1px for left and the right

• padding-left
• padding-right
To center the block in his container:
• margin: center; (It work only horizontally)
21/04/2021 66
MARGIN AND PADDING
We can use these properties to set bloc’s parameters
OVERFLOW
• When there is to much text in a bloc
It going to jut out the framework, so we will
use the overflow property to control that,
with these values:
• visible (by default)
• hidden : will cut the text at the block edge
• scroll : will directly add sroll bar
• auto : will add scroll if necessary
Remark: we can use word-wrap: break-word;
to cut long word (specially links)

21/04/2021 67
Text-shadow
• The box-shadow property attaches one or
more shadows to an element.
box-shadow: none|h-offset v-offset blur spread
color |inset|initial|inherit;
• The text-shadow property adds shadow to
text
text-shadow: h-shadow v-shadow blur-radius
color|none|initial|inherit;

21/04/2021 68
RUN-IN, Box-shadow, text-shadow
Make sure the next block is not having the run-in value
Let’s our paragraph get this:

21/04/2021 69
MARGIN AND PADDING RUN-IN
Let’s our paragraph get this:

21/04/2021 70
BLOCK POSITIONING

We are going to see two main techniques of positioning


of block in the page:
• TABLES
• I-FRAMES
• The floating element method (float)
• Display Property:
– INLINE-BLOCK transformation
– FLEX transformation
– GRID transformation
We will use the following code position our elements on
the page

21/04/2021 71
BLOCK POSITIONING

21/04/2021 72
BLOCK POSITIONING
• We have this result

21/04/2021 73
BLOCK POSITIONING: FLOAT
• We want the menu (nav) to float left
• the rest to float to right (section).
• Let’s apply the border to watch those
effect

21/04/2021 74
BLOCK POSITIONING: FLOAT

21/04/2021 75
BLOCK POSITIONING: FLOAT
• Let’s apply the margin greater that the
nav width with: margin-left: 170px;

• Don’t forget the clear: both; to cancel


the float effect
21/04/2021 76
BLOCK POSITIONING: FLOAT

21/04/2021 77
BLOCK POSITIONING: DISPLAY
• The display property can change the
type of element
• inline : elements are closed each
oder
• block: transfom into block and allow
resize
• inline-block: transform elementblock
into inline
• None: hidden

• OK
21/04/2021 78
21/04/2021 79
BLOCK POSITIONING: FLOAT

21/04/2021 80
BLOCK POSITIONING: DISPLAY
• We want the menu (nav) to float left
• the rest to float to right (section).
• Let’s apply the border to watch those
effect

21/04/2021 81
Create your own web Template

21/04/2021 82
BLOCK POSITIONING: DISPLAY
• We want the menu (nav) to float left
• the rest to float to right (section).
• Let’s apply the border to watch those
effect

21/04/2021 83
VERY SIMPLE DESIGN (30 Lines CSS)

21/04/2021 84
21/04/2021 85
BLOCK POSITIONING

Main techniques of positioning of block in the


page:
• The floating element method
• INLINE-BLOCK transformation
• Flexbox transformation
• Grid layout

21/04/2021 86
FLEXBOX

21/04/2021 87
FLEXBOX
• The Flexbox Layout (Flexible Box) module (currently a W3C Last Call
Working Draft) aims at providing a more efficient way to lay out,
align and distribute space among items in a container, even when
their size is unknown and/or dynamic (thus the word "flex").
• The main idea behind the flex layout is to give the container the
ability to alter its items' width/height (and order) to best fill the
available space (mostly to accommodate to all kind of display
devices and screen sizes). A flex container expands items to fill
available free space, or shrinks them to prevent overflow
• Most importantly, the flexbox layout is direction-agnostic as
opposed to the regular layouts (block which is vertically-based and
inline which is horizontally-based). While those work well for pages,
they lack flexibility (no pun intended) to support large or complex
applications (especially when it comes to orientation changing,
resizing, stretching, shrinking, etc.).

Note: Flexbox layout is most appropriate to the components of an


application, and small-scale layouts, while the Grid layout is intended
for larger scale layouts

21/04/2021 88
21/04/2021 89
PRINCIPLE

21/04/2021 90
FLEX PROPERTIES

21/04/2021 91
Flexbox properties for the parent
element
• flex-direction
• flex-wrap
• flex-flow This is a shorthand flex-direction and flex-
wrap properties, which together define the flex container's
main and cross axes. Default is row nowrap
• justify-content The justify-content property aligns the
items: right, left, center…
• align-items The align-items property aligns the items
vertically (the opposite axis of the justify-content property)
• align-content The align-content property aligns the
item rows.

21/04/2021 92
Flexbox properties for the child
elements

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

21/04/2021 93
21/04/2021 94
• Display defines a flex container; inline or block
depending on the given value. It enables a flex
context for all its direct children.
• flex-direction
– row (default): left to right in ltr; right to left in rtl
– row-reverse: right to left in ltr; left to right in rtl
– column: same as row but top to bottom
– column-reverse: same as row-reverse but bottom
to top

21/04/2021 95
flex-direction
Flexbox allow us to arange element in the any
direction, it can take the following values:
• row : organised on row (default)
• column : organised in column
• row-reverse : organised in one line but on
reverse order
• column-reverse : organised in one colunm but
on reverse order
21/04/2021 96
flex-wrap
– nowrap (default): all flex items will be on one line
– wrap: flex items will wrap onto multiple lines,
from top to bottom.
– wrap-reverse: flex items will wrap onto multiple
lines from bottom to top.
•

21/04/2021 97
Justify-content and align-items

21/04/2021 98
Align-content

21/04/2021 99
Flexbox properties for the child
elements
• Order The order property sorts the items in the specified
order
• flex-grow The flex-grow property specifies how much a flex
item will grow relative to the rest of the flex items
• flex-shrink The flex-shrink property specifies how much a
flex item will shrink relative to the rest of the flex items
• flex-basis The flex-basis property specifies the width of a
flex item
• Flex The flex property is a shorthand property for the flex-
grow, flex-shrink, and flex-basis properties
• align-self The align-self property overrides the default
alignment set by the container's align-items property

21/04/2021 100
• The order Property: The order property sorts
the items in the specified order

• The flex-grow Property: The flex-


grow property specifies how much a flex item
will grow relative to the rest of the flex items.

21/04/2021 101
21/04/2021 102
Traversy Media based

21/04/2021 103
Flex; order;

21/04/2021 104
Flex; order; Align-items

21/04/2021 105
LAYOUT EDTING WITH GRID

21/04/2021 106
Grid-template-columns: X Y Z

21/04/2021 107
Grid[-column|row]-gap: X em

21/04/2021 108
Grid-template-columns
grid-auto-rows

21/04/2021 109
Nested Grids

21/04/2021 110
Justify-items; Align-items

21/04/2021 111
Align-self; Justify-self

21/04/2021 112
Grid-column: X/Y; Grid-ROW: X/Y;

21/04/2021 113
21/04/2021 114
Grid-column: X/Y; Grid-ROW: X/Y;

21/04/2021 115
Positioning in CSS

21/04/2021 116
CSS Position & Helper Properties

There are 5 main values of CSS Positions:


• position: static | relative | absolute | fixed |
sticky
• properties for setting the coordinates of an
element ( “helper properties”): top | right |
bottom | left AND z-index
• Note: Helper properties don’t work without a
declared position, or with position: static.
https://medium.freecodecamp.org/how-to-use-the-position-property-in-css-to-align-elements-
d8f49c403a26

21/04/2021 117
POSITIONING: absolute
• Example

The absolute position is related to origine of


the Parent Element:
• left :
• right :
• top :
• bottom :

21/04/2021 118
POSITIONING: fixed
• Example

The fixed position is related to origine of screen


and it is always visible and linked to:
• left :
• right :
• top :
• bottom :

21/04/2021 119
POSITIONING: Relative
• Example

The relative position is not related to origine


of screen it depends on initial position of the
element, it is and linked to:
• left :
• right :
• top :
• bottom :
21/04/2021 120
POSITION: Static,Absolute, Relative,
• position: static
By default, position an element based on its current
position in the flow. The top, right, bottom, left and z-
index properties do not apply.
• position: relative
Position an element based on its current position without
changing layout.
• position: absolute
Position an element based on its closest positioned
ancestor position

21/04/2021 121
In position: relative, the
element is
positioned relative to
itself. However,
an absolute positioned
element is relative to
its parent

21/04/2021 122
Z-index
• We can stress on elements’ order

21/04/2021 123
NAVIGATION BARS AND
DROPDOWN MENUS

21/04/2021 124
21/04/2021 125
BASIC
DROPDOWN
MENU
21/04/2021 126
DROPDOWN MENU
• HTML: Use any element to open the dropdown content, e.g. a <span>, or
a <button> element.
– Use a container element (like <div>) to create the dropdown content and add
whatever you want inside of it.
– Wrap a <div> element around the elements to position the dropdown content
correctly with CSS.
• CSS: The .dropdown class use position:relative, which is needed when we
want the dropdown content to be placed right below the dropdown
button (using position:absolute).
– The .dropdown-content class holds the actual dropdown content. It is hidden
by default, and will be displayed on hover (see below). Note the min-width is
set to 160px. Feel free to change this. Tip: If you want the width of the
dropdown content to be as wide as the dropdown button, set the width to
100% (andoverflow:auto to enable scroll on small screens).
Ø Instead of using a border, we have used the box-shadow property to make the
dropdown menu look like a "card".
Ø The :hover selector is used to show the dropdown menu when the user moves
the mouse over the dropdown button.

21/04/2021 127
COMPLETE DROPDOWN

21/04/2021 128
21/04/2021 129
Create A Multi-Level Drop Down Menu with
Pure CSS

https://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css/
21/04/2021 130
Media Queries
Media queries in CSS3 extended the CSS2 media types idea: Instead of
looking for a type of device, they look at the capability of the device.
Media queries can be used to check many things, such as:
• width and height of the viewport
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution
Using media queries are a popular technique for delivering a tailored
style sheet to tablets, iPhone, and Androids.
The following example changes the background-color to lightgreen if
the viewport is 480 pixels wide or wider (if the viewport is less than
480 pixels, the background-color will be pink):

21/04/2021 131
Media Qwery with Responsive Web Design

21/04/2021 132
Image Gallery

21/04/2021 133
Browser Support

• The numbers in the table specify the first


browser version that fully supports the
property.
• Numbers followed by -webkit-, -moz-, or -o-
specify the first version that worked with a
prefix

21/04/2021 134
CSS3 animation Property

The animation property is a shorthand property for


eight of the animation properties:
Ø animation-name
Ø animation-duration
Ø animation-timing-function
Ø animation-delay
Ø animation-iteration-count
Ø animation-direction
Ø animation-fill-mode
Ø animation-play-state
21/04/2021 135
21/04/2021 136
2D Transform Methods

21/04/2021 137
CSS CRASH COURSE FOR BEGINNER
• Web defined font
• Reset Margin and Padding
• Letter-spacing and word-spacing
• Remove symbols to Lists to make Image
(00:44)
• Floating effect with box-sizing (00:53) and and
the role of clear
• Positioning (00:57)
21/04/2021 138
References:
• Apprenez à créer votre site web avec HTML5 et CSS3 By Mathieu Nebra
(M@teo21) www.siteduzero.com. Licence Creative Commons 6 2.0 Last
update : 21/12/2012
• QuackIt.com CSS3 property. http://www.quackit.com/css/
• QuackIt.com HTML. http://www.quackit.com/html/
• W3schools.com Web site for HTML, CSS, JAVASCRIPT…
• Wikipedia : http://en.wikipedia.org/wiki/HTML 2012
• Wikipedia: http://fr.wikipedia.org/wiki/HTML5 2012
• VAN LANCKER LUC (le protocole WAP et édition d’un site en WML) consulté en
décembre 2006. http://www.ccim.be.
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://www.w3schools.com/css/default.asp
• https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-
css3/la-mise-en-page-avec-flexbox

21/04/2021 139

You might also like