logo

Types de CSS

CSS (feuille de style en cascade) décrit les éléments HTML affichés sur écran, papier , ou dans d'autres média . Cela fait gagner beaucoup de temps. Il contrôle la mise en page de plusieurs pages Web à la fois. Il définit le taille de la police, famille de polices, couleur, couleur d'arrière-plan sur la page.

Cela nous permet d'ajouter effets ou animations au site Web. Nous utilisons CSS afficher animations comme boutons, effets, chargeurs ou fileuses , et aussi arrière-plans animés .

Sans utiliser CSS , le site Web n'aura pas l'air attrayant. Il y a 3 types de CSS qui sont ci-dessous :

  • CSS en ligne
  • CSS interne/intégré
  • CSS externe
Types de CSS

1. CSS interne

Le CSS interne a étiquette dans le section de la HTML document. Ce style CSS est un moyen efficace de styliser des pages uniques. Utiliser le style CSS pour plusieurs pages Web prend du temps car nous devons placer le style CSS. style sur chaque page Web.

Nous pouvons utiliser le CSS interne en suivant les étapes suivantes :

1. Tout d'abord, ouvrez le HTML page et localisez le

2. Mettez le code suivant après le

 

3. Ajoutez le règles de CSS dans la nouvelle ligne.

Exemple:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Fermez la balise de style.

 

Après avoir ajouté le CSS interne, le fichier HTML complet ressemble à ceci :

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

On peut aussi utiliser les sélecteurs (classe et identifiant) dans la feuille de style.

Exemple:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Avantages du CSS interne

    CSS internenous ne pouvons pas télécharger plusieurs fichiers lorsque nous ajoutons le code à la page HTML.

Inconvénients du CSS interne :

  • Ajout de code dans le HTML document réduira le taille de la page et temps de chargement de la page Web.

2. CSS externe

En CSS externe, nous lions les pages Web au CSS externe .css déposer. Il est créé par éditeur de texte . Le CSS est une méthode plus efficace pour styliser un site Web. En éditant le .css fichier, nous pouvons modifier tout le site en une seule fois.

Pour utiliser le CSS externe, suivez les étapes ci-dessous :

1. Créez un nouveau .css fichier avec éditeur de texte , et ajouter Feuille de style en cascade des règles aussi.

Par exemple:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Ajoutez une référence à l'externe .css déposer juste après étiquette dans le section de Feuille HTML :

 

Avantages du CSS externe :

  • Nos fichiers ont une structure plus propre et une taille plus petite.
  • Nous utilisons le même .css fichier pour plusieurs pages Web en CSS externe.

Inconvénients du CSS externe :

  • Les pages ne peuvent pas être livrées correctement avant le chargement du CSS externe.
  • En CSS externe, le téléchargement de nombreux fichiers CSS peut augmenter le temps de téléchargement d'un site Web.

3. CSS en ligne

Le CSS en ligne est utilisé pour styliser un élément spécifique HTML élément. Ajouter un style attribut à chaque balise HTML sans utiliser les sélecteurs. La gestion d'un site Web peut être difficile si nous utilisons uniquement CSS en ligne . Cependant, en ligne CSS en HTML est utile dans certaines situations. Nous n'avons pas accès au Fichiers CSS ou pour appliquer des styles à un élément.

Dans l'exemple suivant, nous avons utilisé le CSS en ligne dans

Sree Ramanujan
et

Ce sera utile ici.

Avantages du CSS en ligne :

  • Nous pouvons créer des règles CSS sur la page HTML.
  • Nous ne pouvons pas créer et télécharger un document séparé en CSS en ligne.

Inconvénients du CSS en ligne :

  • CSS en ligne, ajout CSS les règles aux éléments HTML sont prend du temps et désordres la structure HTML.
  • Il stylise plusieurs éléments en même temps, ce qui peut affecter la taille de la page et le temps de téléchargement de la page.