Techno col 13

Ressources pédagogiques en technologie

Le CSS

Bienvenue à tous dans ce cours d’introduction au langage de style en cascade, également connu sous le nom de CSS. Le CSS est un langage informatique qui permet de donner un aspect visuel à une page web. En utilisant ce langage, vous pouvez styliser votre page web en appliquant différents styles tels que la couleur, la police, la taille et l’alignement.

Dans ce cours, vous découvrirez les fondamentaux du CSS et apprendrez à créer des feuilles de style CSS pour embellir vos pages web. Vous apprendrez également à utiliser les sélecteurs CSS pour cibler les éléments spécifiques d’une page. Le CSS est un langage important pour les développeurs web et est largement utilisé dans la création de sites web professionnels et attrayants.

Voir la fiche du cours de technologie

Activité 1 : Mettre en page avec CSS

1- Code HTML de la page à copier

<header class= »header »>
<h1>Mon site web</h1>
<p>Bienvenue sur mon site web</p>
</header>

<nav class= »nav »>
<a href= »# »>Accueil</a>
<a href= »# »>À propos</a>
<a href= »# »>Services</a>
<a href= »# »>Contact</a>
</nav>

<main class= »content »>
<h2>Bienvenue sur mon site web</h2>
<p>Ce site est conçu pour aider les étudiants à apprendre le CSS.</p>
<h1 class= »titre »>Titre de la page</h1>
<p class= »texte »>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean consectetur ultrices enim, sed laoreet odio volutpat eu. Vivamus maximus orci non ante hendrerit, non bibendum tortor semper. Sed dictum eget augue vel pulvinar. Curabitur et bibendum quam. Donec commodo semper magna quis dignissim. Nullam a dolor quis leo eleifend posuere. Aliquam erat volutpat. Proin eget pulvinar odio. Sed sit amet posuere nisi.</p><br>
<p class= »texte »>Praesent sed est dapibus, pretium eros eu, commodo urna. Donec faucibus erat euismod tortor ultricies, nec suscipit odio ultrices. Sed auctor eget ipsum nec cursus. Nullam pulvinar velit vel augue eleifend, eget consequat tortor lobortis. Suspendisse potenti. Vestibulum non tristique ex. Vestibulum fermentum interdum libero ac vestibulum.</p><br>
<p class= »texte »>Mauris at odio nisl. Pellentesque facilisis, ante vitae consectetur sodales, urna nisi efficitur risus, euismod maximus est justo at magna. Duis sit amet neque mi. Ut tristique, elit eu consequat sagittis, nibh nibh dictum nisl, eu lobortis nulla tortor eget lectus. Vivamus semper euismod erat. Sed commodo enim a elit eleifend, eget blandit lacus aliquam. Donec vel quam leo. Nullam id hendrerit ipsum. Suspendisse bibendum efficitur aliquam. In condimentum arcu vel tortor ullamcorper, eu porttitor sapien convallis.</p><br>
<p class= »texte »>Nam hendrerit ipsum id ex malesuada sollicitudin. Nullam tincidunt bibendum orci, nec hendrerit nulla vestibulum quis. Praesent luctus elit at metus fringilla sagittis. Aenean pellentesque euismod elit, eget posuere urna lobortis non. Sed fringilla volutpat felis, vel venenatis erat rhoncus eu. Duis finibus turpis id nibh dictum auctor. Aenean sodales, ipsum ac tincidunt feugiat, velit velit commodo dolor, eget aliquet odio mi ac libero. Maecenas nec ex urna. Vivamus ut dapibus augue. Nulla lacinia lectus sit</p><br>
</main>

<footer class= »footer »>
<p>Tous droits réservés © 2023</p>
</footer>

2- Page d’édition du CSS

CSS 1

Liste des couleurs pour présenter votre page web :