Las hojas de estilos CSS en inglés Cascading Style Sheets (en español Hojas de Estilo en Cascada), permiten el control total sobre la presentación de las páginas web.
Con las hojas de estilos CSS, puede colocar y definir con precisión la apariencia de los elementos de una página web.
Una hoja de estilos CSS puede ser:
- Externa
- Interna
- En línea
El orden de prioridad de las hojas de estilos es la siguiente:
- La hoja de estilos en línea frente a la externa e interna
- La hojas de estilos interna frente a la externa
Además debemos tener presente que una página web puede usar uno o varios de estos tipos de CSS a la vez.
Para que sirven los distintos tipos de hojas de estilos.
- Las CSS externas sirven para aplicar de forma coherente los mismos estilos a un proyecto web. De esta forma una modificación en un estilo se aplica a todas las web de un proyecto, de forma automática.
- Las CSS internas o también conocidas como incrustadas, sirven para aplicar estilos a una sola web y también para modificar los estilos de heredados de una CSS externa. Las CSS internas se incluyen entre las etiquetas <head> de las páginas web.
- Las CSS en línea sirven para aplicar las propiedades de las hojas de estilos en cascada a elementos individuales de una página sin tener que reutilizar el estilo. Los estilos en línea se definen dentro de las etiquetas iniciales de los elementos HTML de páginas web.
Por ejemplo:
<div id=»reloj» style=»font-family: ‘DS-Digital’; width: 450px; background-color: black;font-size:100px;color: green ; text-align: center «></div>
En el artículo de la semana pasada, usamos Javascript para aplicar estilos al reloj digital propuesto, mediante estilos en línea. Estos mismos estilos los podemos aplicar mediante:
- CSS interna, de la siguiente manera:
- <script type=»text/javascript»>
- function startTime(){
- today=new Date();
- h=today.getHours();
- m=today.getMinutes();
- s=today.getSeconds();
- m=checkTime(m);
- s=checkTime(s);
- document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
- t=setTimeout(‘startTime()’,500);}
- function checkTime(i)
- {if (i<10) {i=»0″ + i;}return i;}
- window.onload=function(){startTime();}
- </script>
- <div id=»reloj» ></div>
- <head>
- <style type=»text/css»>
- #reloj { font-family: ‘DS-Digital’;
- width: 450px;
- background-color: black;
- font-size:100px;
- color: green ;
- text-align: center;
- }
- </style>
- </head>
- CSS externa, de la siguiente manera:
Contenido fichero externo con los estilos CSS. Lo llamaremos estilos_reloj.css.
- #reloj {
- font-family: ‘DS-Digital’;
- width: 450px;
- background-color: black;
- font-size:100px;
- color: green ;
- text-align: center;
- }
Contenido fichero con el código principal:
- <script type=»text/javascript»>
- function startTime(){
- today=new Date();
- h=today.getHours();
- m=today.getMinutes();
- s=today.getSeconds();
- m=checkTime(m);
- s=checkTime(s);
- document.getElementById(‘reloj’).innerHTML=h+»:»+m+»:»+s;
- t=setTimeout(‘startTime()’,500);}
- function checkTime(i)
- {if (i<10) {i=»0″ + i;}return i;}
- window.onload=function(){startTime();}
- </script>
- <div id=»reloj» ></div>
- <head>
- <meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ />
- <title>Ejemplo de estilos CSS en un archivo externo</title>
- <link rel=»stylesheet» type=»text/css» href=»estilos_reloj.css» media=»screen» />
- </head>
Animo a lector a desarrollar sus estilos para este reloj digital y publicar el código. Es un ejercicio muy gratificante.
Todos nuestros alumnos que han cursado el certificado de profesionalidad IFCD0210-Desarrollo de Aplicaciones con Tecnologías Web, y el IFCD0110 Confección y publicación de páginas web, conocen bien todos estos aspectos de las CSS y saben como aplicarlas según los requerimientos de la web que estén programando.
