manual css blog

Los estilos CSS son un código descriptivo que le cuentan a un navegador web cómo debe interpretar y presentar los elementos de una página web. Hoy en día son la parte más esencial del diseño web.

Conocer todas las aplicaciones que tiene el código CSS de inicio es fráncamente complicado, ya que existen infinidad de propiedades para poder maquetar una página web, pero si es cierto que conociendo algunas de las principales, puedes crear diseños espectaculares y efectivos.

Vamos a ser Chefs de los estilos CSS. ¿Sabes la cantidad de trucos, tipos de cocina, metodologías que hay para ser un MasterChef? Muy difícil ser un experto, pero con 3 trucos y unos platos bien preparados, serás capaz de sorprender a tus comensales. ¿Quieres saberlos?

Lo básico: Entender cómo funcionan los estilos en nuestro Tutorial CSS

Las Web son documentos con etiquetas descriptivas, una estructura de etiquetas de una página web viene a ser de la siguiente forma:

<html> <!–Indica que se abre un documento HTML–>
<head> <!–Indica que se abre la cabecera del documento, dónde se coloca el código funcional–>
</head>
<body><!–Indica que se abre el cuerpo del documento, dónde se coloca todo lo que ve el usuario, la web que todos vemos–>
</body>
<html>

Los estilos CSS son los que hacen que las etiquetas que va a tener el documento se coloquen como tu quieres, creando un diseño, y se escriben en la propia página web o en un documento a parte. La estructura de un estilo normal es la siguiente:

<style>
.miEstilo {color:red;}
</style>

Como has podido ver, los estilos se abren con un { y se cierran con }, la propiedad se define primero “color:” y después se le dice el estilo y se cierra “red;

Tipos de estilos que puedes aplicar

  • Para etiquetas HTML: Se aplican a una etiqueta HTML que aparezca en el docuemnto
  • Pueden ser de Clase: Se representan con un punto antes de empezar, y se aplican diciendo al elemento HTML que lleva una clase.
  • Para ID (solo sirve para un elemento del HTML o documento web): Se aplica a un elemento único que lleva un ID

Vamos a verlo en el siguiente código de prueba, verás que los estilos, se colocan dentro del HEAD:

<html>
<head>
<STYLE>
body{ background-color:#CCC;} /*Estilo de etiqueta para el todo el BODY*/
.miClase{ font-size:16px;} /*Estilo de clase se puede aplicar a cualquier etiqueta que tenga esa clase*/
#estiloIDunico{ color:#900;} /*Estilo para una etiqueta ID */
<STYLE>
</head>
<body>
<div class=”miClase”>En esta etiqueta de capa escribo un texto. <span id=”estiloIDunico”>Este texto tiene un estilo diferente</span>
</div>
</body>
<html>

Recursos útiles para crear tus estilos CSS

En esto de los estilos, como en casi todo ya en Internet, existen multitud de herramienta que te facilitan mucho la vida, y además te permiten ver cómo queda algo según vas creando las etiquetas de estilo. Es decir, que no todo tienes que crearlo a mano escribiendo estos códigos, pero es muy útil entenderlos para luego hacer las modificaciones que necesites.

Todos los programas que se usan para el desarrollo de páginas web tienen editores que te ayudan a entender mejor lo que está escrito en el código diferenciándolos por colores, como por ejemplo DreamWeaver, Visual Studio…etc. Puedes verlo en el ejemplo de abajo.

código CSS

Editores online de CSS

También tienes editores online que te crean el código o te ofrecen recursos interesantes:

  • CSSPortal: Editor online de estilos CSS con ejemplos y herramientas
  • CSS3Generator: Herramienta muy intuitiva para generar el código que necesitas poner a tus estilos
  • CSS3maker: Al igual que el anterior, muy completo para ver lo que quieres hacer y que te genere el código. Podemos dejar pasar que tenga algo de publi.
  • Enjoycss: Crea un documento y te deja aplicar los estilos visualmente.

Bueno…¿Te parece que creemos 3 elementos que son muy importantes en un blog para que los diseñes en el tuyo como quieras?

Crear un botón original con CSS

Da igual el tipo de botón que elijas o cómo lo crees en tu blog, que si le pones estos estilos conseguirás darle un diseño molón.

<input type=”button” class=”miClase” value=”¡Entra ahora!” />.miClase {
width:300px; /*300 px de ancho*/
display: inline-block; /*Si cabe al lado de algo bien, sino, pasa a la siguiente línea*/
padding: 10px; /*Entre el contenedor y el texto interior hay 10px de relleno*/
border: 4px solid rgba(255,217,168,1); /*Borde de 4 pixeles y del color rgb indicado*/
-webkit-border-radius: 5px;
border-radius: 5px; /*Borde con un redondeo en todas las esquinas de 5 px */
font: normal 18px/1 “Aldrich”, Helvetica, sans-serif; /*Fuente Aldrich y si no hay las siguientes opciones*/
color: rgba(255,255,255,1); /*color de texto*/
cursor:pointer; /*hace que salga la mano para hacer clic*/
-webkit-transition: background 1s ease; /*Esta propiedad prepara una transición en el formato del fondo del botón para cuando esté el ratón sobre él*/
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
}.miClase:hover { /*:hover indica que se refiere a propiedades sólo para cuando el ratón esté encima*/
background:#FEBD65;
border:4px solid rgba(221, 125, 3, 1);
color:rgba(158, 100, 11, 1);
font-size:20px;
}

Puedes ver el ejemplo aquí:

Crear un Título que llame la atención

Muchas veces quieres colocar un titular que destaque, o simplemente cambiar el estilo que tienen los títulos por defecto de tu plantilla, aquí algunas cosas que puedes hacer con ellos.

<h3>Los mejores consejos CSS gracias a Un Mix de Marketing </h3><script type=”text/javascript” script-name=”clara” src=”http://use.edgefonts.net/clara.js”></script> <!–Este código nos permite poner una fuente especial como la “clara”–>.miTitulo{
font: normal 24px/normal “clara”, Helvetica, sans-serif; /*tamaño de fuente 24 Tipo de letra “clara”*/
color: #E67E22;
padding: 5px 20px; /*relleno de 5px por arriba y abajo y 20px por cada lado*/
outline: 3px dashed #E67E22; /*línea exterior formada por líneas de 3 px de grosor*/
background-color: #EFEFEF; /*Color de fondo*/
}

 

Este es el sesultado:

Los mejores consejos CSS gracias a Un Mix de Marketing

 

Crear destacado a la derecha del texto

Los destacados agregan información relevante
Una de las cosas que pueden resultar muy útiles y visuales es colocar un texto destacado dentro de un párrafo. Los destacados agregan información relevante sobre lo que estás contando y permiten entender mejor lo que estás explicando. Por eso un destacado siempre es útil y además da un aspecto más serio al artículo de tu blog.

Vamos a ver como se representa, esto mismo que acabamos de hacer.

<em class=”miDestacado”>Los destacados agregan información relevante </em><style>
.miDestacado{
float:left; /*Que quede flotante a la izquierda*/
display:inline; /*En linea con el elemento que tiene al lado*/
width:20%; /*ancho 20% del documento*/
padding:5px; /*relleno 5px*/
background-color: #EBEBEB; /*color de fondo*/
font: normal 18px/normal “clara”, Helvetica, sans-serif;
font-weight:bold; /*tipo de fuente negrita*/
color:#666;
margin-right:10px; /*deja siempre un margen a la derecha y abajo para que no se pegue al texto que tienes*/
margin-bottom:10px;
}
</style>

Bueno…pues esto ha sido el Post de hoy. EsPero que te haya gustado, hayas aprendido cómo funcionan los estilos CSS de las páginas web y te atrevas a hacer tus pruebas para crear diseños más originales para los artículos de tu Blog.

Por supuesto, ya sabes que si tienes alguna duda, o quieres más ejemplos para entender mejor el código CSS, puedes dejarme un comentario.

.miClase {
width:300px;
background: #e67e22;
display: inline-block;
padding: 10px;
border: 4px solid rgba(255,217,168,1);
-webkit-border-radius: 5px;
border-radius: 5px;
font: normal 18px/1 “Trebuchet MS”, Helvetica, sans-serif;
color: rgba(255,255,255,1);
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
cursor:pointer;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
-o-transition: background 1s ease;
transition: background 1s ease;
}
.miClase:hover {
background:#FEBD65;
border:4px solid rgba(221, 125, 3, 1);
color:rgba(158, 100, 11, 1);
font-size:20px;
}
.miTitulo{
font: normal 24px/normal “clara”, Helvetica, sans-serif;
color: #E67E22;
padding: 5px 20px;
outline: 3px dashed #E67E22;
background-color: #EFEFEF;
}
.miDestacado{
float:left;
display:inline;
width:20%;
padding:5px;
background-color: #EBEBEB;
font: normal 18px/normal “clara”, Helvetica, sans-serif;
font-weight:bold;
color:#666;
margin-right:10px;
margin-bottom:10px;
}

The following two tabs change content below.

Jon García Tajadura

Experto en la creación de Estrategias Digitales. Me peleo a diario con diferentes áreas del Marketing Online. Blogger pasional y creador de contenidos.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *