DEV Community

Cover image for l’introduction aux css: les bases de css, cest quoi css, limportance et comment utiliser
Jacques Radjabu for KADEA ACADEMY

Posted on

l’introduction aux css: les bases de css, cest quoi css, limportance et comment utiliser

Introduction aux CSS:

CSS ( Cascading Style Sheets ) : Une feuille de style CSS est un langage informatique ( langage CSS ) qui décrit la présentation des documents HTML, XHTML et XML. Les standards définissant le code CSS sont publiés par le World Wide Web Consortium (W3C). L'utilisation du CSS est indispensable pour le developpement web ( front end ) afin de rendre le site esthétique et responsive design. Dernière version CSS : CSS3
Premiers pas : cette page aborde la philosophie générale des CSS. Elle vous propose de créer vos premières feuilles de styles et explique comment appliquer des styles CSS aux éléments du langage html d'une page Web.
Héritages et cascades : avec cette page sur les héritages, vous allez devenir riche... de connaissances sur la façon dont les éléments HTML se transmettent leurs styles.
Éléments"blocs" et "en-ligne" : tous les styles ne s'appliquent forcément à tous les éléments HTML. Apprenez à reconnaître les deux grandes familles d'éléments ( display bloc et en-ligne). Vous constaterez que même dans ce domaine il y a des travestis !
Mise-en-page avec les CSS : cette page aborde le thème le plus complexe concernant les CSS : comment réaliser la totalité de la mise en page ( conteneur, div, margin, padding, bordure, width, line height, shadow, position absolute, z-index, etc. ) avec des styles et comment se passer définitivement des tableaux pour le design de votre site web.
Exemple

<h4>Coucou le monde !</h4>
<h3>Le remplissage n'est pas le même ici.</h3>
Enter fullscreen mode Exit fullscreen mode

css

h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3 {
  background-color: blue;
  padding: 400px 5%;
}
Enter fullscreen mode Exit fullscreen mode

Les bases des CSS:

Les CSS (Cascading Style Sheets en anglais, ou « feuilles de style en cascade ») sont le code utilisé pour mettre en forme une page web. Les bases des CSS présentent ce qu'il faut savoir pour commencer. Nous répondrons à des questions comme : Comment rendre mon texte rouge ou noir ? Comment faire apparaître mon contenu à tel endroit de l'écran ? Comment décorer ma page web avec une image ou une couleur d'arrière-plan ?
Image description

CSS c'est quoi?:

CSS désigne Cascading Style Sheets (pour Feuilles de style en cascade). Il s'agit d'un langage de style dont la syntaxe est extrêmement simple mais son rendement est remarquable. En effet, le CSS s’intéresse à la mise en forme du contenu intégré avec du HTML.

L’importance CSS ?:

CSS sert à définir un ensemble de règles stylistiques à l'intérieur de pages web codées en HTML ou en XML.
Pour rappel :
• Le HTML (HyperText Markup Language) est un langage informatique de balisage. C'est l'un des outils principaux du développement web permettant de créer la structure informatique d'une page internet.
• Le XML (Extensible Markup Language) est un langage informatique au même titre que le HTML. Il a été développé par le W3C (World Wide Web Consortium) dans le but de faciliter la transmission sur internet d'informations générées avec un langage plus complexe : le SGML (un langage de balisage généralisé normalisé).
Sachant cela, il est naturel de se demander ce que le CSS apporte de plus à une page web qui a déjà été codée avec HTML ou XML.

Comment on utilise le CSS ?:

Le CSS, lui, va servir à mettre en forme les différents contenus définis par le HTML en leur appliquant des styles. Le HTML va donc créer la structure des pages tandis que le CSS va nous permettre de modifier l'apparence des contenus de la page.

<!DOCTYPE html>
<html>
<head>
<title>où écricre le scc?</title>
<meta charset= "utf- 8">
<style>
body{
background-color: aqua;
}
p{
color: blue;
font-size: 16px;

}
</style>
</head>
<body>
<h1>un titre de niveau 1</h1>
<p>un paragraphe</p>
<p>un deuxieme paragraphe</p>
<body>
<html>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)