Aprendiendo Ejemplos de HTML con CSS
Ahora veremos algunos ejemplos de html con css para que vayas siguiendo el ritmo de nuestro pequeño tutorial para principiantes.Como añadir CSS a un elemento H1
Supongamos que quieras añadir CSS a un elemento H1, dicho sea el caso la mayor parte de títulos principales en una web comienzan con esta etiqueta.Primer caso : Insertar un estilo dentro de la etiqueta, muy pocos ya lo están utilizando pero en algunas circunstancias todavía es necesario poder hacerlo.
<h1 style="color: #f84912;">Pinta esta etiqueta de color naranja</h1>
Segundo caso : En esta oportunidad utilizaremos un identificador o una clase para saber que etiqueta vamos a poder controlar.
También puedes ver un ejemplo aquí : Cajas de colores con CSS
<h1 class="titulo-entrada">Pinta esta etiqueta de color naranja</h1>
Creamos un archivo CSS en nuestro proyecto como :
style.css
.titulo-entrada {
color: #f84912;
}
A todo esto puedes añadirle otros estilos diferentes como el tamaño del texto, tipo de texto, subrayar, etc.
Tipos de fuentes CSS - Tutorial para principiantes.
Como ya lo había mencionado anteriormente, es mejor crear identificadores y clases para poder controlar todo desde una sola hoja de estilos, y siguiendo el ejemplo anterior utilizaremos propiedades que definen tanto el color del texto, tipo de fuente y tamaño ... Entonces que esperamos vamos por ello.
La propiedad de color CSS define el color del texto que se va a utilizar.
La propiedad font-family CSS define la fuente que se va a utilizar.
La propiedad CSS font-size define el tamaño del texto a utilizar.
Bueno vayamos a un ejemplo un poco mas práctico y entendamos un poquito mas de que se trata todo esto.
h2 { color: blue; font-family: verdana; font-size: 150%;}
Esta etiqueta H2 es de color azul, tipo de fuente verdana y tamaño de fuente de 30%
p { color: red; font-family: courier; font-size: 200%;}
Este parrafo es de color rojo, tipo de texto courier y un tamaño de fuente de