CSS

CSS
Introducción
Bienvenidos al curso de CSS. En este curso aprenderemos a crear diseños para una
página web HTML mediante hojas de estilos (CSS).
CSS (Cascading Style Sheet) es un lenguaje que permite dar formato a las etiquetas
HTML, permitiendo definir parámetros para obtener un diseño deseado.
El código CSS puede ir incrustado en el código HTML de la página que queramos

formatear (ya veremos cómo).
De esta forma se puede tener en un mismo archivo la estructura de la página web

(HTML) y el diseño (CSS).
El problema de esto es cuando queremos aplicar una hoja de estilo a varias

páginas.
Para ello se permite crear un archivo CSS con su propio formato y aplicarlo en las
páginas que queramos, que también veremos cómo más adelante.
Mi primer estilo I
Ya podemos empezar a utilizar hojas de estilo sobre documentos HTML.
Lo primero que vamos a hacer es coger una página sencilla en HTML y aplicarle un
estilo sencillo. Partimos de esta pequeña página web:
Código HTML
<html>
<head>
</head>
<body>
<p>Aplicando el primer estilo</p>
</body>
</html>
Hasta aquí nada de CSS, todo es HTML. Vamos a copiar este código en nuestro
Notepad++.
Para ello abrimos Notepad++ y seguimos estos pasos:

1. Click en el icono para crear una nueva página.
2. Copiamos el código en el documento de texto.
3. Vamos al menú "Archivo> Guardar como..." y lo guardamos con el
nombre estilo1.html.
Bien, tenemos una página web sencilla, para visualizarla en nuestro navegador
vamos al menú Ejecutar y la ejecutamos en Google Chrome (en nuestro caso), si
usas otro navegador, pues en el que prefieras.
También podemos buscar el archivo en la carpeta que lo hayamos guardado y

ejecutarlo haciendo doble click en él.
Veremos el resultado en nuestro navegador, que será una página web tan sencilla
como esto:
Mi primer estilo II
Ya tenemos nuestra página web. Sólo queda aplicarle un estilo.
En CSS hay diferentes formas de aplicar estilos. Se pueden aplicar estilos a

etiquetas HTML, por ejemplo:
 <body> - Cuerpo de la página

 <p> - Párrafo
 <font> - Fuente
 <a> - Enlace
 <table> - Tabla
Y muchas más. Aparte de eso, en CSS se pueden crear reglas de estilo a tu gusto y
aplicarlas a los elementos que quieras.
Esto lo veremos más adelante, vamos a empezar por las etiquetas.
Recordemos nuestra página HTML, que tiene básicamente un párrafo (etiqueta

<p>). Bien, vamos a crear un estilo para darle color a esa etiqueta. Sería así:
Código CSS
p {color: green;}
Aquí estamos aplicando un estilo a una etiqueta. Esta línea quiere decir que todas
las etiquetas <p> de esa página tengan color verde.
Vamos a insertarlo en nuestra página HTML para que funcione:

Hemos insertado las líneas resaltadas en blanco. El código CSS debe ir entre las
etiquetas <style> especificando el tipo, en nuestro caso text/css.
Aquí el código no está en una línea como hice antes, eso es indiferente, es
aconsejable utilizar esa estructura por tener cierto orden.
Ahora que tenemos nuestra página HTML con un estilo incrustado, vamos a
visualizarla a ver qué efectos tiene:
Estructura CSS
Bien, ya hemos aprendido lo básico sobre como crear y aplicar estilos.
Ahora conviene que hagamos un pequeño paréntesis para aclarar la estructura de

CSS y otras cuestiones que nos serán útiles para entender lo que estamos
haciendo.
En primer lugar la estructura de CSS. Utilizaremos el ejemplo ya usado.

 Regla: una regla CSS se define de la siguiente forma; selector/res, apertura
de llave ({), declaración o declaraciones y se cierra la llave (}).
 Declaración: contiene las propiedades y sus valores
 Selector: es la etiqueta a la que queremos aplicar la regla. Puede ser más de

una.
 Propiedad: aquello que queremos modificar de la etiqueta, cada etiqueta

tiene sus características, aunque hay muchas comunes, color, tamaño, etc...
 Valor: el valor que le damos a esa propiedad.
Con esto ya podemos ver varias cosas. En CSS podemos...
 Aplicar una regla a varios elementos (selectores
 Modificar el valor a varias propiedades en una misma regla.
 O lo que es lo mismo, crear varias declaraciones.
 Crear varias reglas de estilo en un mismo documento.
Poco a poco vamos viendo el potencial que tiene CSS en cuanto a diseño web. Y
esto es sólo el principio.
Creación de varias reglas
Vamos a añadir otra regla en nuestra hoja de estilo.
Concretamente, crearemos una regla para el elemento <body> de nuestra página,

es decir, que se aplicará en todo el cuerpo de nuestra web.
body
{
color: blue;
background-color: pink;
}
(De momento para definir colores estamos utilizando palabras reservadas para
ellos, más adelante veremos más detalles sobre los colores.)
Esta regla CSS nos indica que el texto que esté en el cuerpo de la página será de
color azul (blue), y que el fondo de la web será rosa (pink).
Vemos resaltado las líneas incluidas a nuestra web. ¿Qué ocurrirá con el texto entre
las etiquetas <p>?
Efectivamente, conserva su color verde, ya que la etiqueta <p> tiene su propia
regla.
Sólo los elementos que no tengan otra regla específica en nuestra hoja de estilo,
serán de color azul.
También observamos como el color de fondo es rosa.
El tema de las colisiones de estilos es un poco complicado, nos vamos a quedar de

momento con lo que tenemos.
Bien, ya tenemos varias reglas funcionando, y hemos visto que podemos crear
varias declaraciones.
Podemos hacer tantas como deseemos, claro está, todo con cabeza, ya que sería
absurdo añadir líneas porque sí o que sobren, eso ralentizaría innecesariamente la
carga de nuestra página web.
Tal como se esperaba, nuestro párrafo ahora tiene color verde.
Independizando el código CSS

Ya sabemos todo lo básico para crear buenos diseños de páginas web.
Es el momento de incrementar el potencial de CSS independizando el código.
Imaginemos que tenemos una página web con 7 páginas, lo más normal es que
esas 7 páginas tengan un mismo estilo/diseño.
Bien podemos incrustar el código CSS en las 7 páginas y no pasa nada, es correcto.
Pero tiene sus desventajas.
Partimos de la base de que el diseño en las 7 páginas es el mismo, si queremos

cambiar el diseño de 1 elemento, tendríamos que modificar esa regla en las 7
páginas.
No es práctico. Si independizamos nuestro CSS, además de facilitarnos el trabajo,

ganaremos en ligereza, nuestra página web tendría menos peso.
Incluso podríamos tener varios CSS e ir cambiando el diseño de nuestra página en

cada estación del año, por poner un ejemplo.
Abrimos un archivo nuevo en Notepad++, copiamos el código CSS que tenemos

hasta ahora y lo guardamos con la extensión Cascade Style Sheet File (*.css).
Notepad++ autodetecta el lenguaje, y ahora nos resalta los valores en el código
CSS, cosa que no hacía antes en el código HTML.
Nuestro código HTML debe haber quedado así:
Perfecto, ya tenemos nuestro código CSS independiente. Tal como lo tenemos,

nuestra hoja de estilo no se aplicaría sobre ningún documento.
Para ello debemos enlazarlo a cada documento que queremos que se aplique.
Cosa que veremos en la siguiente lección.

CSS

Cargado por

Copyright:

Formatos disponibles

CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

CSS

Cargado por

Copyright:

Formatos disponibles

CSS

El código CSS puede ir incrustado en el código HTML de la página que queramos

De esta forma se puede tener en un mismo archivo la estructura de la página web

El problema de esto es cuando queremos aplicar una hoja de estilo a varias

Para ello abrimos Notepad++ y seguimos estos pasos:

También podemos buscar el archivo en la carpeta que lo hayamos guardado y

En CSS hay diferentes formas de aplicar estilos. Se pueden aplicar estilos a

 <body> - Cuerpo de la página

Recordemos nuestra página HTML, que tiene básicamente un párrafo (etiqueta

Vamos a insertarlo en nuestra página HTML para que funcione:

Ahora conviene que hagamos un pequeño paréntesis para aclarar la estructura de

En primer lugar la estructura de CSS. Utilizaremos el ejemplo ya usado.

 Declaración: contiene las propiedades y sus valores

 Selector: es la etiqueta a la que queremos aplicar la regla. Puede ser más de

 Propiedad: aquello que queremos modificar de la etiqueta, cada etiqueta

 Valor: el valor que le damos a esa propiedad.

Con esto ya podemos ver varias cosas. En CSS podemos...

 Aplicar una regla a varios elementos (selectores

 Modificar el valor a varias propiedades en una misma regla.

 O lo que es lo mismo, crear varias declaraciones.

 Crear varias reglas de estilo en un mismo documento.

Concretamente, crearemos una regla para el elemento <body> de nuestra página,

También observamos como el color de fondo es rosa.

El tema de las colisiones de estilos es un poco complicado, nos vamos a quedar de

Independizando el código CSS

Es el momento de incrementar el potencial de CSS independizando el código.

Partimos de la base de que el diseño en las 7 páginas es el mismo, si queremos

No es práctico. Si independizamos nuestro CSS, además de facilitarnos el trabajo,

Incluso podríamos tener varios CSS e ir cambiando el diseño de nuestra página en

Abrimos un archivo nuevo en Notepad++, copiamos el código CSS que tenemos

Perfecto, ya tenemos nuestro código CSS independiente. Tal como lo tenemos,

También podría gustarte