Guía Breve de CSS
Qué es CSS
Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo que describe cómo se va a mostrar un documento en la pantalla. Ofrece a los desarrolladores el control total sobre el estilo de sus documentos.
Para qué sirve
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Define la forma de mostrar los elementos HTML y XML. Permite controlar el estilo de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
Cómo funciona
CSS funciona a base de reglas sobre el estilo de los elementos. Cada regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración
El selector especifica los elementos afectados por la declaración. La declaración establece cuál será el efecto.
Formas de dar estilo
- Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.
<head>
<title>Título</title>
<link rel="stylesheet" type="text/css" href="http://www.w3.org/css/officeFloats.css" />
</head>
- Utilizando el elemento <style> en el documento, situado en <head>.
<head>
<title>hoja de estilo interna</title>
<style type="text/css">
body {
padding-left: 11em;
font-family: Georgia, "Times New Roman", Times, serif;
color: red;
background-color: #d8da3d;
}
h1 {
font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
}
</style>
</head>
- Utilizando estilos directamente sobre los elementos a través del atributo <style> dentro de <body>. Este tipo de estilo pierde las ventajas que ofrecen las hojas de estilo al mezclarse el contenido con la presentación.
Normas básicas del CSS
- Los selectores pueden aparecer individualmente o agrupados, separándolos con comas:
h1, h2, h3 {
color: red;
}
es lo mismo que
h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
- Las propiedades que se desean modificar para un mismo selector pueden agruparse, separadas con punto y coma.
h1 {
padding-left: 11em;
font-family: Georgia, "Times New Roman",Times, serif;
color: red;
background-color: #d8da3d;
}
- Si el valor está formado por más de una palabra, hay que ponerlo entre comillas.
p {font-family: "sans serif";}
Artículos relacionados
Opciones de discusión
Hay 0 comentarios
No hay comentarios aún. Anímate a participar.
Deja un comentario