introducció als Fulls d'Estil CSS (strambotica)

Vostè està aquí >>Bàsics: introducció als Fulls d'Estil:

Articles rel·lacionats: Primeres passes per fer una pàgina web
...(conceptes bàsics html) com crear un arxiu HTML i posar informació al codi font ...
Fer llocs compatibles amb els estàndards web
...(disseny amb estàndards) qualsevol document que es publiqui a la web ha de poder funcionar en diferents navegadors, plataformes i dispositius ...

Introducció als Fulls d'Estil

Els Fulls d'Estil CSS (Cascading Style Sheets) són actualment una recomanació per part del W3C (World Wide Web Consortium), organització encarregada de l'estandardització en la web.

Els fulls d'estil són un sistema pràctic i eficient per controlar l'aparença de les pàgines web. Ens fan possible controlar tot allò que es refereixi a la representació en pantalla, o fins i tot en altres suports, com a mitjans impresos, lectors de veu...

Un full d'estil es pot escriure directament en el teu codi HTML, o pot ser enllaçat des d'un arxiu a part.

Exemple d'enllaç a un arxiu a part.
<link rel="stylesheet" href="elmeu.css" type="text/css" />

L'etiqueta <link> també pren un atribut opcional media, que especifica el mitjà o mitjans en què hauria d'aplicar-se el full d'estil.
Els valors possibles mes importants són screen (pantalla, valor per defecte), i print, per sortida a una impressora.

<link rel="stylesheet" href="elmeu.css" type="text/css" media="screen" />

Podem definir l'estil d'un lloc sencer sense necessitat de fer-ho etiqueta per etiqueta. Qualsevol canvi fet a un estil CSS, es reflectirà en tots els elements que siguin referits a aquest, automàticament.

Els fulls d'estil estan escrits en un llenguatge propi, és a dir, independent al HTML.
Els Fulls d'Estil externs no han de contenir cap etiqueta HTML com <head> o <style>, han de consistir simplement de regles d'estil o sentències.

Els dissenyadors especifiquen com es representen els documents associant-los propietats i valors.
Exemple:

	h1 { 
	   font-size: 12pt; 
	   font-weight: bold; 
	   color: blue;
	}

declara que els elements H1 seran text blau, gruixut i de 12 punts.

CSS funciona a base de regles, és a dir, declaracions sobre l'estil d'un o més elements. Els fulls d'estil estan compostos per una o més d'aquestes regles aplicades a un document HTML o XML. La regla té dues parts: un selector i la declaració. Al seu torn la declaració està composta per una propietat i el valor que se li asigna.

h1 {color: red;}

h1 és el selector

{color: red;} és la declaració

Exemple d'aplicació CSS a les marques més comunes HTML

<body>

  body {
 font-family: verdana, tahoma, arial, sans-serif;
 margin: 0.5em 5%;
 background-color: #fff;
 color: #000;
 font-size: small;
 /* IE Centering Cludge */
 text-align: center;
 }

<h1>

  h1 {
 clear: both;
 display: block;
 border-bottom: 1px dashed black;
 border-top: 1px dashed black;
 font-size: 150%;
 margin: 0;
 }

<a>

  a:link {
 color: blue;
 }

 a:visited {
 color: purple;
 }

 a:active, a:hover {
 color: red;
 }

<li>

li{
font-weight: normal;
}
ul {
margin: 0em 1.5em;
padding: 0;
list-style-type: square;
font-size: small;
}

<p>

 p {font-size: small;
margin-left: 3em;
margin-bottom: 2em;
margin-top:3em;
}

<pre>

pre { border:1px dashed #333;
font-size: small;
margin-left: 3em;
margin-bottom: 2em;
}

strambotica creativitat web

Introducció als Fulls d'Estil

Exemple d'aplicació CSS a les marques més comunes HTML

strambotica ^{creativitat web}