Que es CSS? - Proyecto crea tu web desde cero
El acrónimo CSS significa cascading style sheets En español hoja de estilos en cascada es un lenguaje de diseño gráfico que se utiliza para establecer el diseño visual de las páginas o aplicaciones web Su lanzamiento produjo un cambio importante en la creación de interfaces gráficas web.
Ahora el contenido como: títulos, párrafos, enlaces, listas, tablas, formularios, etc. Es totalmente independiente de su presentación. es decir, colores, bordes, márgenes, fondos, layouts, tamaños, fuentes, alineación de textos , entre muchos otros.
Aqui dos imagenes de ejemplo de maquetación del contenido diseñado con Dreamweaver y otra imagen de la presentación del contenido en Google Chrome.
Está separación proporciona muchas ventajas ya que varios archivos HTML pueden compartir la misma hoja de estilos lo que optimiza el tiempo de carga del sitio y lo hace más fácil de mantener, actualmente CSS se encuentra en su tercera versión CSS3 Que optimizo algunas características de las versiones anteriores Incorporó nuevas cómo: degradado, transparencia, sombra, bordes redondeados, transformaciones, animaciones. Y mucho más.
Puedes incorporar código CSS a documentos HTML de tres maneras.
La primera se llama CSS en línea y consiste En escribir código CSS como valor del atributo style de un elemento html Pero el estilo definido solo se aplicará en ese elemento. Ejemplo.
<a href=”https://www.google.es” target=”_blank” style=”color:blue”>Google</a>
<p style=”font-family:Verdana, Geneva, sans-serif”>Aquí el párrafo</p>
El elemento style en la etiqueta de párrafo nos dice la familia tipográfica del párrafo.
La segunda técnica se llama embebido y consiste En incrustar un elemento style en alguna parte del documento HTML y entre sus etiquetas de apertura y cierre irá el código CSS, pero el estilo definido solo se aplicará al elemento de ese documento.
Ejemplo de introducción de código CSS en el Head de un documento HTML.
<DOCtype=”html>
<html lang=”es”>
<head>
<title>Ejemplo de introducción de código CSS embebido dentro del head</title>
<style>
body { font-family: arial, helvetica, sans-serif; color: #000000; margin:
0px; }
h2 { font-size: 22px; font-weight: bold; color: #ff0000; text-decoration:
underline; text-align: center; }
h3 { font-size: 17px; font-weight: bold; color: #ff3300; text-decoration:
underline; underline; text-align: center; }
</style>
</head>
<body>
<h2>Que es CSS</h2>
<h3>Introducción de código CSS de 3 formas</h3>
</body>
</html>
Ejemplo de introducción de código CSS en el body de un documento HTML.
<DOCtype=”html>
<html lang=”es”>
<head>
<meta charset=”utf-8″>
<title>Ejemplo de introducción de código CSS embebido dentro del head</title>
</head>
<body>
<p style=”color: blue”>Texto aquí</p>
</body>
</html>
La tercera técnica es externo.
consiste en definir los estilos CSS en un archivo aparte y luego puede ser enlazado en todos los documentos HTML que lo requieran esta última es la técnica más recomendada. el código CSS está compuesto por reglas cada regla está formada por el selector del elemento y el bloque declarativo el selector permite seleccionar a qué elemento se aplica la regla bloque declarativo contiene una o más declaraciones, Cada declaración es un párrafo propiedad o valor separados por puntos y finalizados con punto y coma la propiedad indica la característica del elemento que se desea cambiar como la anchura altura color etc el valor indica cómo se desea cambiar esta característica por ejemplo 100% píxeles color azul (blue).
Ejemplo de código CSS desde un archivo externo.
- Selector del elemento HTML
- Declaración definimos anchura
- Declaración definimos altura
- Declaración definimos color
- .contenedor{
- width:100%;
- height:500px;
- background-color:blue;
- }
Y ahora miremos todo lo antes explicado en un video
