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:





Ejemplo

  • 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

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

Entradas populares de este blog

Tipos de listas en HTML

Imagen
Listas HTML  (no ordenadas) y (ordenadas) El lenguaje HTML, ya sea la versión HTML4 o la versión HTML5, posee tres tipos de listas. Las listas no ordenadas , las listas ordenadas y las listas de descripción. ( la veremos más adelante) Cada una de estas listas se crea con una etiqueta específica de HTML: <ul> para la lista no ordenada, <ol> para la lista ordenada   Los elementos de las listas se definen de la siguiente forma. Para la lista no ordenada y la lista ordenada se emplea el elemento <li>. Ul es el acrónimo de unordered list , lista no ordenada. En una lista no ordenada, el orden de aparición de los elementos no es importante. Cada elemento de la lista se define con <li> , que es el acrónimo de list item. Los elementos de la lista se indican con símbolos, como círculos, cuadrados o rombos. En el siguiente ejemplo, vemos el código HTML que produce como resultado la lista no ordenada que figura a continuación       El estilo de u...
Leer más

Enlaces, hipervínculos e imágenes

Imagen
Enlaces, links, hipervínculos Definición y Uso La etiqueta <a> define un hipervínculo, que se utiliza para vincular de una página a otra. El atributo más importante del elemento <a> es el atributo href, que indica el destino del vínculo. Por defecto, los enlaces aparecerán de la siguiente manera en todos los navegadores: Un enlace no visitado está subrayado y azul Un enlace visitado es subrayada y púrpura Un vínculo activo es subrayada y rojo Enlaces hipervínculos HTML  enlaces HTML son hipervínculos. Puede hacer clic en un enlace y saltar a otro documento. Al mover el ratón sobre un enlace, el puntero del ratón se convertirá en una pequeña mano. Nota:  Un enlace no tiene que ser un texto.  Puede ser una imagen o cualquier otro elemento HTML. video Vínculo a un link externo <a> Vínculo a una imágen  <img src> Abrir un enlace en una nueva ventana del navegador  ...
Leer más

Tablas en HTML

Imagen
Creación de Tablas Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo. Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos: Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos. A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular. Hasta hace unos años, las tablas también se utilizaban para definir la estructura de las páginas web. La cabecera de la página era una fila de una gran tabl...
Leer más