CSS - Hojas de estilo - Sintaxis de las hojas de estilo

4 - Sintaxis de las hojas de estilo

[editar]
Tutorial creado por t0m|ta. Extraido de: http://www.tomatoma.ws/subsecciones.php?forum_id=28&catid=22&todos=1
08 de Marzo de 2006
Selectores y propiedades
Cuando definimos un estilo utilizando CSS nos encontramos con dos elementos:
El selector, que define la etiqueta a la que se aplicará el estilo. Con los selectores escogemos aquella o aquellas etiquetas cuya apariencia queremos modificar.
Las propiedades, que especifican la apariencia de la etiqueta: color, fuente etc.
En el ejemplo que vimos antes el selector era H1 todo lo demás eran las propiedades. Las propiedades van siempre entre llaves y separados entre sí por puntos y comas.
propiedad: característica;
En pseudo_código sería

|| Código: ||
||
SELECTOR { propiedad1: caraterísticas; propiedad2: características;} ||


Titulo { color: verde; fuente: arial; tamaño: 12 puntos;}
O cómo vimos en el ejemplo, en código CSS:

|| Código: ||
|| H1 {
   font-family: tahoma, arial, sans-serif;
   color: #B22222;
   font-size: 18px; } ||


las instrucciones de estilo, puedes escribirlas todas en una línea si quieres pero resulta más difícil de leer:

|| Código: ||
|| H1 { font-family: tahoma, arial, sans-serif; color: #B22222;   font-size: 18px; } ||


La última propiedad de una instrucción de estilo puede no llevar el punto y coma,

|| Código: ||
|| H1 {
     font-family: tahoma, arial, sans-serif;
     color: #B22222;   
     font-size: 18px } ||

Pero esta es una práctica muy perniciosa porque si un día decides añadir otra instrucción más (por ejemplo, negrita), es muy fácil olvidarse de que no habías puesto el punto y coma (es una cosita muy pequeña) y te pasarás horas intentando averiguar porqué tus títulos no se ven en negrita . Acostúmbrate desde ya a ponerlo siempre.
Comentarios
En CSS puedes incluir comentarios para explicar cada estilo y que así luego te sea más fácil de leer. Los comentarios no influyen en la visualización, los navegadores los ignoran. Los comentarios en css empiezan por /* y terminan con */

|| Código: ||
|| /* Párrafo alineado al centro*/
p
{
text-align: center;
/* de color negro */
color: black;
font-family: arial
} ||
[editar]

2 opiniones

Esta muy completo.

Super excelente¡¡¡¡ muy bueno.
Opinión.

Muy buena intro a las css!
gracias.

Tutoriales relacionados con 'CSS - Hojas de estilo'

Este documento describe el lenguaje CSS1 (Cascade Style Sheets, level 1 - hojas de estilo... Más »
Con CSS puedes formatear tus páginas web separando completamente el contenido de la presentación. Es... Más »
Bienvenidos al manual de HTML de Indaya.A través de todos estos capítulos vamos a descubrir... Más »
Esta tecnologia permite posicionamiento dinamico de elementos, y es la extension natural de la idea... Más »
En estas páginas de CSS pretendemos dar a conocer la tecnología con un enfoque práctico... Más »

Autor y licencia de 'CSS - Hojas de estilo'

Este contenido ha sido recopilado por el equipo de Wikilearning. Todo el contenido recopilado se ha obtenido respetando y comunicando en nuestro site la licencia de cada fuente.
Wikilearning tiene permiso expreso por escrito de los autores para publicar los contenidos que ha extraído de otras webs, incluyendo su uso comercial.