CSS

introduzione

CSS è l'acronimo di Cascading Style Sheets. Aiuta a definire la presentazione degli elementi HTML come un file separato noto come file CSS con estensione .css estensione.

CSS aiuta a cambiare la formattazione di qualsiasi elemento HTML semplicemente apportando modifiche in un unico posto. Tutte le modifiche apportate si rifletteranno automaticamente su tutte le pagine web del sito in cui appariva quell'elemento.

Regole CSS

Le regole CSS sono gli stili che dobbiamo creare per creare fogli di stile. Queste regole definiscono l'aspetto dell'elemento HTML associato. La forma generale della sintassi CSS è la seguente:

Selector {property: value;}

Key Points

  • Il selettore è un elemento HTML a cui viene applicata la regola CSS.

  • Proprietà specifica l'attributo che si desidera modificare corrispondente al selettore.

  • La proprietà può assumere un valore specificato.

  • Proprietà e Valore sono separati da due punti (:).

  • Ogni dichiarazione è separata da punto e virgola (;).

Di seguito sono riportati alcuni esempi di regole CSS:

P { color : red;}

h1 (color : green; font-style : italic }

body { color : cyan; font-family : Arial; font- style : 16pt}

Incorporare CSS in HTML

Di seguito sono riportati i quattro metodi per aggiungere CSS ai documenti HTML.

  1. Fogli di stile in linea

  2. Fogli di stile incorporati

  3. Fogli di stile esterni

  4. Fogli di stile importati

Fogli di stile in linea

Inline Style Sheetssono inclusi con l'elemento HTML, cioè sono posizionati in linea con l'elemento. Per aggiungere CSS in linea, dobbiamo dichiarare l'attributo di stile che può contenere qualsiasi proprietà CSS.

Syntax:

<Tagname STYLE = “ Declaration1 ; Declaration2 “>  …. </Tagname>

Consideriamo il seguente esempio utilizzando fogli di stile in linea:

<p style="color: blue; text-align: left; font-size: 15pt">
Inline Style Sheets are included with HTML element i.e. they are placed inline with the element.
To add inline CSS, we have to declare style attribute which can contain any CSS property.
</p>

Output −

Fogli di stile incorporati

Embedded StyleI fogli vengono utilizzati per applicare lo stesso aspetto a tutte le occorrenze di un elemento specifico. Questi sono definiti nell'elemento <head> usando il<style> elemento.

Il <style> l'elemento deve includere typeattributo. Il valore di type attributo specifica il tipo di sintassi che include quando visualizzato dal browser.

Syntax

<head> <title> …. </title>
   <style type =”text/css”>
      …….CSS Rules/Styles….
   </style>		
</head>

Consideriamo il seguente esempio utilizzando fogli di stile incorporati:

<style type="text/css">
   p {color:green; text-align: left; font-size: 10pt}
   h1 { color: red; font-weight: bold}
</style>

Fogli di stile esterni

External Style Sheets sono i separati .cssfile che contengono le regole CSS. Questi file possono essere collegati a qualsiasi documento HTML utilizzando il tag <link> con l'attributo rel.

Syntax:

<head> <link rel= “stylesheet”  type=”text/css” href= “url of css file”>
</head>

Per creare un CSS esterno e collegarlo a un documento HTML, segui i seguenti passaggi:

  • Prima di tutto crea un file CSS e definisci tutte le regole CSS per diversi elementi HTML. Chiamiamo questo file come external.css.

p{ 
   Color: orange;     text-align:  left;        font-size: 10pt;
}
h1{ 
   Color: orange;      font-weight: bold;
}

  • Ora crea un documento HTML e chiamalo come externaldemo.html.

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <link rel="stylesheet"  type="text/css" href="external.css">
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>

Fogli di stile importati

Imported Style Sheetsci permettono di importare regole di stile da altri fogli di stile. Per importare le regole CSS dobbiamo usare @import prima di tutte le regole in un foglio di stile.

Syntax:

<head><title> Title Information </title>
   <style type=”text/css”>
      @import URL (cssfilepath)
      … CSS rules…
   </style>
</head>

Consideriamo il seguente esempio utilizzando fogli di stile in linea:

<html>
   <head>
      <title> External Style Sheets Demo </title>
      <style>
         @import url(external.css);
      </style>
   </head>
   <body>
      <h1> External Style Sheets</h1>
      <p>External Style Sheets are the separate .css files that contain the CSS rules.</p>
   </body>
</html>