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 

El menú de una web, es sin duda uno de los atributos mas importantes que un sitio debe tener, en el menú se pueden colocar todas las subdivisiones o temas que contiene nuestra web o Blog. Así que tener un menú interactivo y visible puede ser una gran ayuda para que nuestros visitantes puedan encontrar lo que buscan con mas detalles, así que en esta Post veremos como crear un menú usando los estilos de Bootstrap, de esta forma mantendremos un estilo muy particular ademas de hacerlo siempre visible a medida que bajamos por el blog.

Las imágenes en nuestro Blog son una guía visual del contenido de nuestras entradas, así que efectuar estilos para que estas sean mas atractivas y llamativas al lector puede ser una una magnifica idea a la hora de querer captar la atención de los visitantes. En esta entrada veremos como añadir sobra a los bordes de nuestras imágenes usando la tecnología de los estilos CSS.

Las Redes Sociales un gran empuje de trafico para nuestros Blogs, sin duda alguna las redes sociales son una de las vías directas de los visitantes hacia nuestro contenido, Asi que es muy importante que estos sean resaltantes en nuestro Blog, no confundir con resaltantes a contenido molesto que interrumpe la lectura de los contenidos, sino algo que sea visto a simple vista y a cada momento pero que no sea molesto. En esta entrada aprenderemos a colocar nuestros iconos sociales de forma estática en nuestro Blog, Pueden apreciar el ejemplo en la parte inferior de este Blog si usan el Scroll de la pagina notaran que los iconos se mantienen estáticos.

Fuente: http://www.creativasfera.com/

Las redes sociales son una gran fuente de trafico para el blog y que mejor de hacer representativos a estas mediante iconos atractivos y con efectos llamativos, en esta entrada veremos un estilo bastante peculiar y muy llamativo de los Iconos sociales los cuales están basados en el estilo de http://www.creativasfera.com/, me tome el atrevimiento de tomar prestado el estilo de sus iconos sociales para esta entrada.

Si estas cansado del típico fondo azul que toman los textos cuando se seleccionan, en esta entrada aprenderemos como hacer que ese fondo por defecto que normalmente es el azul en todos los navegadores cambien al color que nosotros deseemos. Aplicaremos un poco de CSS, pero descuiden es solo un pequeño código el cual es fácil de aplicar.

En una entrada anterior aprendimos como aumentar el tamaño de nuestras entradas al pasar el Mouse, en esta entrada aprenderemos algo similar pero esta ves lo aplicaremos a las imágenes de nuestras Entradas, de esta forma tendrán un singular animación, que las ara un poco mas llamativas. 

En esta oportunidad aprenderemos a Agrandar el tamaño de los Post en Blogger si se habrán dado cuenta, este post se agrando al pasar el Mouse y vuelve a su tamaño original quitando el puntero del mouse del post, esta es una magia que es posible hacerlo con CSS3, así podremos dar un efecto visual mas atractivo e interactivo a nuestro Blog.

Si tienes un Blog creado en la plataforma Blogger y los títulos de los Gadgets o el Titulo de tus entradas o post, inclusive el Titulo de tu Blog, salen alineados a la izquierda y por motivos de diseño y atractivo deseamos centrarlos para que tengan un mejor aspecto y no sabes como centrarlos, esta entrada es para ti XD. En esta entrada aprenderemos a centrar los Títulos de nuestro Blog en Blogger, ya sean de los Gadgets de las entradas o el titulo general.

Para centrar los Titulos en nuestro Blog, nos adentraremos un poco al código CSS, pero no se preocupen no es nada complicado, al contrario es fácil de entender y de aplicar.

Las imágenes que usamos de fondo ya sea en todo el Blog o lugares específicos de este, pueden ayudar a dar un estilo personalizado el cual se nos hace difícil obtener utilizando solo colores o estilos CSS, debido a la manipulación de códigos y sentencias que debemos conocer.

Pero para los que no podemos dar un estilo elegante con CSS, se nos presenta la opción de poner dar diseños personalizados colocando imágenes de Fondo en determinados lugares del Blog.

En esta Entrada aprenderemos a colocar una Imagen de Fondo en el Titulo de las Entradas y así dar un diseño elegante a estas.

En esta Entrada el Titulo tienen una Imagen de Fondo la cual la pusimos a modo de Ejemplo.

Los fondos en un Blog Pueden ser un gran atractivo para el diseño de nuestro Sitio, en entradas anteriores aprendimos como colocar una imagen de fondo usando las opciones de Blogger o poner un fondo mediante código CSS, pero en esta ocasión aprenderemos específicamente a poner una imagen de fondo en las entradas que publicamos, así nuestras entradas pueden tener un atractivo extra mediante un fondo, recuerden no usar imágenes de fondo muy extravagantes ya que pueden ocultar el contenido textual de la entrada.

Cuando insertamos una imagen de cabecera en nuestro Blog, Blogger nos ofrece 3 ubicaciones para esta, las cuales son debajo del titulo y la descripción, en lugar del titulo y la descripción o debajo de la descripción, pero ademas de eso podemos poner la imagen a la izquierda y el texto a la derecha o viceversa, pero Blogger no nos da esta opción, pero si es posible hacerlo, una visitante de este Blog Marisol me pregunto como hacer esto, espero que llegue a leer esta entrada y poder solucionar su duda.

En esta entrada aprenderemos como hacerlo, como ya dije Blogger no nos ofrece esta opción, así que tendremos que meter manos en el código, pero despreocúpate no es nada complicado.

Las imágenes de fondo en el Blog son una fuente de atractivo para los lectores, claro si es que sabemos que imagen poner, en esta ocasión aprenderemos a poner una imagen de fondo en los títulos de los gadgets de Blogger, de esta forma podemos dar un estilo personalizado a nuestros gadgtes, la idea es no buscarse una imagen muy pesada, ya que podría interferir con la carga de la pagina, siendo esta una molestia para los lectores. En esta entrada aprenderemos como poner una Imagen a nuestros títulos de los gadgets, para poder personalizar estos a nuestro estilo.

Poner una imagen de Fondo en nuestro Blog es sin duda un atractivo para este, anteriormente vimos como poner esta imagen mediante el editor de plantillas de Blogger, en el cal enseñamos detalladamente como hacerlo, les invito a visitar dicha entrada Insertar un fondo en Blogger, pero en esta entrada no usaremos el editor personalizado para poner el fondo, sino que lo aremos mediante un poco y sencillo condigo CSS.

En esta entrada crearemos un Formulario de Registro Con HTML y CSS, de una manera muy fácil y concreta, no me pasare la entrada explicando detalladamente las lineas de código que utilizaremos ya que en entradas anteriores vimos los Objetos de Formulario, sus propiedades y como usarlos; Si aun no tienen idea de como funcionan, les recomiendo visitar las entradas respecto a Objetos de Formulario.

Estaría de mas mencionar que es el puntero del Mouse, ya que día a día interactuamos con este ya sea desde el escritorio de nuestra PC hasta en todas las paginas de Internet, esa flechita que es la guía y dirigente de los movimientos que entablamos en cualquier ventana o pagina, sin duda algunas es muy importante para la navegación y elección de opciones.

Así que dar un estilo personalizado a ese puntero no nos vendría mal a la hora de llamar la atención a los visitantes de nuestra pagina. En esta entrada aprenderemos a cambiar la clásica flechita que tenemos como puntero, por una personalizada.

Las imágenes que publicamos en las entradas de nuestro Blog, son sin duda una ayuda visual para atraer a nuestros lectores, pero dar un poco de atractivo a estas imágenes por medio de sus bordes, puede ayudar a cambiar del clásico estilo cuadrangular, por un nuevo estilo y así hacer que este estilo sea mas llamativo para nuestros visitantes, en esta entrada aprenderemos a dar Bordes circulares a nuestras imágenes.

Alguna ves viste un objeto en una web que se va deslizando hacia bajo mientras bajas la pagina, para que me entiendas, desliza la pagina hacia bajo y veras de lo que estoy hablando, en nuestro Blog podemos tener objetos que se deslizan mientras bajamos nuestra pagina, por ejemplo pueden ser anuncios que deseemos que los lectores lean, publicidades o cualquier otro uso que le podamos dar.

En esta entrada aprenderemos como poner estos objetos que se deslizan a lo largo del Blog.

En estradas anteriores vimos como crear Listas en HTML y posteriormente vimos los estilos de viñetas que podemos aplicar a estas, hasta aprendimos que podemos colocar una imagen como viñeta en las Listas HTML. En esta entrada usaremos el efecto Hover para hacer que el estilo de nuestras viñetas cambie al pasar el mouse.

Las formas geométricas no solo están presentes en las matemáticas, también podemos obtenerlas en el diseño Web, estas se pueden obtener mediante un poco de CSS y HTML.

En esta entrada veremos como aplicar el CSS para diseñar formas Geométricas, explicando detalladamente la linea de código para que se puedan hacer modificaciones al gusto de cada uno.