Introducción a CSS
¿Qué es CSS?
- CSS significa Cascading Style Sheets
- CSS describe cómo los elementos HTML se van a mostrar en la pantalla.
- CSS ahorra mucho trabajo. Se puede controlar el diseño de varias páginas web a la vez
- Las hojas de estilo externas se almacenan en archivos CSS
Sintaxis CSS
-
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
Ejemplo
-
p {
color: red;
text-align: center;}
p {
color: red;
text-align: center;}
Niveles de Acoplamiento CSS con HTML
Video 1
Video 2
Ejercicio:
Aplicar las reglas de CSS al código HTML abajo citado
de las tres maneras posibles,:
mediante el atributo style
mediante la etiqueta <style>
mediante la etiqueta <link>
Para ello utilizaremos las propiedades de CSS. color (color del texto),
background-color, (color de fondo del texto),
font-family (tipografía) y font-size (tamaño de letra)
<!DOCTYPE HTML>
<html>
<head>
<meta charset= “utf-8“ />
<title>Erase una vez HTML</title>
</head>
<body>
<h1>Erase una vez HTML</h1>
<h2> Tim Berners Lee</h2>
<p>El padre de la Web, <strong>Tim Berners-Lee</strong>, es también el padre del lenguaje Html, <em>Hypertext Markup Language</em>.</p>
<h2> La estandarización</h2>
<p>El lenguaje HTML está estandarizado por el W3C, el <em>World Wide Web Consortium</em>.</p>
</body>
</html>
Atributo style
Atributo style
El atributo estilo HTML
Ajuste del estilo de un elemento HTML, se puede hacer con el atributo de estilo .
El atributo de estilo HTML tiene la siguiente sintaxis :
<background-color style="property:value;">
La propiedad es una propiedad CSS. El valor es un valor CSS.
Color de texto HTML
El color de propiedad define el color del texto de un elemento HTML:
Ejemplo
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fuentes HTML
La fuente de la familia propiedad define el tipo de letra que se utilizará para un elemento HTML:
Ejemplo
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Tamaño de texto HTML
El tamaño de fuente propiedad define el tamaño del texto de un elemento HTML:
Ejemplo
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Alineación de texto HTML
El texto align propiedad define la alineación del texto horizontal para un elemento HTML:
Ejemplo
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Etiqueta <style>
La etiqueta <style> la debemos escribir dentro de la etiqueta <head> del código HTML
HTML etiqueta <style>
Definición y Uso
La etiqueta <style> se utiliza para definir información de estilo para un documento HTML.
Cada documento HTML puede contener múltiples <style>.
Etiqueta <link>
La etiqueta <link> la debemos escribir en el head del código HTML
Además debemos incluir el atributo href en la que se indica la ruta a la hoja de estilo CSS
y el atributo rel que indica que es una hoja de estilo
HTML etiqueta <link>
Ejemplo
Enlace a una hoja de estilos externa:
<head>
<link rel="stylesheet" type="text/css"href="theme.css">
</head>
Definición y Uso
La etiqueta <link> define una relación entre un documento y un recurso externo.
La etiqueta <link> se utiliza para vincular a las hojas de estilo externas.
Copiamos el código CSS, le quitamos la etiqueta <style> y lo guardamos dentro de la carpeta en dónde tenemos guardado previamente el archivo.html y lo hacemos con la extensión .css ej: "estilos.css"
Nota: El elemento <link> es un elemento vacío, contiene atributos solamente.
Nota: Este elemento va sólo en la sección del <head>, pero puede aparecer cualquier número de veces.
Comentarios
Publicar un comentario