Ejemplos de HTML con CSS

Hola amigos de la comunidad, hoy aprenderemos ejemplos de Html con Css, muy prácticos y sencillos para todos aquellos principiantes, y no tan principiantes que están en el maravilloso mundo del diseño web, pues aprenderemos a maquetar aspectos muy interesantes dentro de HTML.

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