Introduction au CSS

• Rappel

Pourquoi du CSS ?

Un peu de style

Le CSS définit le style de la page :

​

• la taille du texte
• la couleur du texte
• la police utilisée
• les bordures des éléments
• le fond

...

2. Fonctionnement

Des consignes dans un fichier css

HTML sans CSS

HTML avec CSS

page.html

page.css

Sélecteur

C’est le nom de l'élément HTML qui auront le style appliqué (ici les éléments p).

Déclaration

C’est une règle qui détermine les propriétés de l’élément

(ici la couleur de texte en rouge)

2.Propriétés

Let’s start with the first set of slides

Quelques propriétés

CheatSheet

https://html-css-js.com/css/

Sélecteur

C’est le nom de l'élément HTML qui auront le style appliqué (ici les éléments p).

Exercice

FICHIER.CSS

​

p {

font-family: Arial

}

​

h1 {

​

}

​

​

Compléter le fichier css afin de :

• Mettre les paragraphes p en police Verdana
• Mettre les titres principaux h1 en couleur vert
• Mettre les images en 200 pixels (hauteur et largeur

3.Classes

Live Demo

Classes

4.Span et Div

Des balises qui ne servent à rien

La balise DIV

<div class=”inventaire”>

<img src=”pikachu.png”>

<img src=”dracofeu.png”>

</div>

.inventaire {

border-width: 2px;

}

Site web réactif

Site web réactif

Un site web réactif est un site web qui s’adapte à la taille de l’écran.

❤

Exemple avec FlexBox

Use diagrams to explain your ideas

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

Lorem Ipsum

And tables to compare data

Maps

Find more maps at slidescarnival.com/extra-free-resources-icons-and-maps

​

our office

89,526,124

Whoa! That’s a big number, aren’t you proud?

89,526,124$

100%

185,244 users

That’s a lot of money

Total success!

And a lot of users

Our process is easy

Let’s review some concepts

Yellow

Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.

Blue

Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.

Red

Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

​

Yellow

Is the color of gold, butter and ripe lemons. In the spectrum of visible light, yellow is found between green and orange.

Blue

Is the colour of the clear sky and the deep sea. It is located between violet and green on the optical spectrum.

Red

Is the color of blood, and because of this it has historically been associated with sacrifice, danger and courage.

​

You can insert graphs from Excel or Google Sheets

Mobile project

Show and explain your web, app or software projects using these gadget templates.

Place your screenshot here

Tablet project

Show and explain your web, app or software projects using these gadget templates.

Place your screenshot here

Desktop project

Show and explain your web, app or software projects using these gadget templates.

33

Place your screenshot here

Thanks!

Any questions?

You can find me at

• @username
• user@mail.me

34

Credits

Special thanks to all the people who made and released these awesome resources for free:

• Presentation template by SlidesCarnival
• Photographs by Unsplash

Presentation design

This presentation uses the following typographies:

• Titles: Inter Semibold
• Body copy: Inter Light

​

Download for free at:�https://www.fontsquirrel.com/fonts/inter

​

You don’t need to keep this slide in your presentation. It’s only here to serve you as a design guide if you need to create new slides or download the fonts to edit the presentation in PowerPoint®

​

​

SlidesCarnival icons are editable shapes. ��This means that you can:

• Resize them without losing quality.
• Change fill color and opacity.
• Change line color, width and style.

Isn’t that nice? :)��Examples:���

Find more icons at slidescarnival.com/extra-free-resources-icons-and-maps

​

Diagrams and infographics

You can also use any emoji as an icon!�And of course it resizes without losing quality.

How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328

🤔 ✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂😉😋😒😭👶😸🐟🍒🍔💣📌📖🔨🎃🎈🎨🏈🏰🌏🔌🔑 and many more...

😉

Free templates for all your presentation needs