Tag Archives: css

Cómo añadir CSS en nuestra web

estilos-cssEn nuestro artículo anterior hicimos referencia a qué son y para qué sirven los estilos CSS. Para poder hacer uso de ellos debemos empezar por incluirlos en nuestros archivos HTML. A continuación, veremos tres formas diferentes para incluir CSS en un documento HTML.

1- Incluir CSS en el mismo documento HTML

Esto se hace en el HEAD del documento, es decir, entre las etiquetas <head></head>. Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web.

El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar una a una todas las páginas que incluyen el estilo que se va a modificar.

En nuestra página html quedarían incluidos así:

 

<!DOCTYPE html >
<html lang="es">
<head>

<title>Estilos CSS - Ejemplo</title>
<style type="text/css">
p { color:green; font-size: 13px }
</style>
</head>
<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

 

2- Inlcuir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS. El cual se enlaza al HTML mediante la etiqueta <link>. Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css. Se pueden enlazar a las páginas HTML tantos archivos CSS como sean necesarios.

Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los siguientes pasos:

  1. Crea un archivo de texto con el siguiente contenido: p { color:green; font-size: 13px }
  2. Guarda el archivo de texto con el nombre estilos.css.
  3. En el HTML debes enlazar el archivo CSS mediante la etiqueta <link>:


<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

Cuando el navegador carga la página HTML, antes de mostrar sus contenidos también descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los contenidos de la página.

Normalmente, la etiqueta <link> incluye cuatro atributos cuando enlaza un archivo CSS:

rel: indica el tipo de relación que existe entre el recurso enlazado (en este caso el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.

href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web.

media: indica el medio en el que se van a aplicar los estilos del archivo CSS.  En este caso es solo para “screen”. Pero también se pueden enlazar estilos especificos para imprimir utilizando “print”.

Este es el modo más correcto y utilizado de añadir estilos CSS.

El principal motivo es que se puede incluir un mismo archivo CSS en multitud de páginas HTML, por lo que nos permite tener  los mismos estilos en todas las páginas que forman un sitio web.

Este método simplifica el mantenimiento de un sitio al máximo, ya que un solo cambio en un solo archivo CSS permite modificar de forma rápida y sencilla los estilos de todas las páginas HTML que enlazan ese archivo.

Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, también se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se muestra a continuación:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>

<body>
<p>Un párrafo de Ejemplo.</p>
</body>
</html>

En este caso, para incluir en la página HTML los estilos definidos en archivos CSS externos se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra regla CSS (con la única excepción de la regla @charset).

La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las diferentes formas de incluir la hoja de estilos del ejemplo anterior serían así:


@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");

3- Incluir CSS en los elementos HTML

La tercer forma de incluir estilos CSS en documentos HTML es hacer sobre las etiquetas de html.

Ejemplo:

<!DOCTYPE html >
<html lang="es">
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
</head>

<body>
<p style="color:green; font-size: 13px">Un párrafo de Ejemplo.</p>
</body>
</html>

Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas situaciones en las que se debe incluir un estilo muy específico para un solo elemento concreto o en los html que se usan en plantillas de e-mails. Resulta un método muy dificultoso para realizar modificaciones en un futuro, ya que se deberían hacer una a una por etiqueta.

Hemos mencionado la técnica que nos parece mejor (caso 2), pero no hay que dejar de lado las demás, ya que cada caso puede ser particular y conocer todas las opciones con las que contamos nos permitirá saber cual se adapta mejor para cada situación. Nosotros utilizamos las tres de forma combinada para obtener el mayor provecho según sea necesario.

Si quieres puedes compartir con nosotros tus experiencias con cada método!

Saludos!

Estilos CSS, ¿qué son y para qué sirven?

estilos_css Cuando se habla de apariencia estética o cambios visuales de una web siempre se mencionan los estilos CSS. Vamos a explicar un poco qué son y para qué sirven. CSS es el lenguaje para describir la presentación de páginas web, por ejemplo los colores, el diseño y las fuentes. Nos permite adaptar la presentación a las diferentes necesidades y tipos de dispositivos. El CSS es independiente al HTML y se puede utilizar con cualquier lenguaje de marcado basado en XML. Leer más

10 trucos que deberías saber de Coda 2

Coda2

Seguro que en más de una ocasión os hemos comentado que Coda 2 es uno de nuestros editores favoritos en Mac. Si no lo has probado, ya estás tardando! Y si ya lo estás usando, seguro que algo de lo que te vamos a contar a continuación, aún no lo sabes. Leer más

Bordes redondeados con CSS3

Hace algún tiempo, para crear un cuadrado (o rectángulo) con bordes redondeados, debíamos crear una imagen y ponerla de fondo, y si este cuadrado tenía un tamaño variable, había que apañárselas para repetir el background. Con CSS3, todo se facilita, crear un cuadrado con bordes redondeados se limita a lo siguiente:

[html title=”HTML para crear el cuadrado”]
<div class="Cuadrado">

</div>
[/html]
[css title=”CSS para bordes redondeados, sombra…”]
.Cuadrado {
border-radius: 25px; // nivel de redondeo (puedes poner cuatro valores, uno para cada esquina)
box-shadow: 5px 5px 5px #000; // tamaño y color de la sombra
width: 200px;
height: 200px;
background: #5e8b00;
color: #FFF;
}
[/css]

A continuación podéis ver cómo quedaría nuestro cuadrado:

 

 

 

Tipos de cursores del ratón en CSS

En algunas ocasiones seguro que has necesitado mostrar el cursor del ratón de forma diferente para ponérselo más fácil al usuario. Con CSS, a través de la propiedad cursor: valor; podemos conseguirlo. A continuación os detallamos cada valor posible que puede recibir el cursor. Si vas colocando el ratón encima de cada bloque verás el resultado de cada uno:

cursor:context-menu;
cursor:help;
cursor:pointer;
cursor:progress;
cursor:wait;
cursor:cell;
cursor:crosshair;
cursor:text;
cursor:vertical-text;
cursor:alias;
cursor:copy;
cursor:move;
cursor:no-drop;
cursor:not-allowed;
cursor:all-scroll;
cursor:col-resize;
cursor:e-resize;
cursor:ew-resize;
cursor:n-resize;
cursor:ne-resize;
cursor:nesw-resize;
cursor:ns-resize;
cursor:nw-resize;
cursor:nwse-resize;
cursor:row-resize;
cursor:s-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:w-resize;
cursor:none;

Cuando creamos un enlace con <a href=””></a> el cursor automáticamente será pointer. Si tu enlace es con el evento onclick, verás que el cursor no cambia, en este caso lo ideal es que lo pongas en cursor: pointer; (no uses hand porque es un valor que sólo lo soporta Internet Explorer). No obstante, estos efectos pueden variar dependiendo del navegador que estés usando.

¿Cómo elegir la tipografia web?

Seguramente, si has trabajado con diseñadores gráficos, más de una vez habrás tenido que explicar que no puedes usar cualquier tipografía… Pues ya sabes, para la próxima vez te lo ponemos fácil… Envíale este post y no perderás tiempo en explicarlo de nuevo!

Cuando vamos a diseñar una página web, uno de los aspectos más importantes es la elección de la tipografía. Y como es lógico, queremos que todos los usuarios vean la tipografía que hayamos elegido. Para ello, lo ideal es que revises la siguiente tabla y veas las tipografías disponibles en cada sistema operativo.

Windows XP

Windows Vista

Mac

Linux
CambriaDisponible
ConstantiaDisponible
Times New RomanDisponibleDisponibleDisponibleDisponible
TimesDisponibleDisponible
GeorgiaDisponibleDisponibleDisponibleDisponible
Andale MonoDisponibleDisponibleDisponibleDisponible
ArialDisponibleDisponibleDisponibleDisponible
Arial BlackDisponibleDisponibleDisponibleDisponible
CalibriDisponible
CandaraDisponible
Century GothicDisponibleDisponibleDisponibleDisponible
CorbelDisponible
HelveticaDisponibleDisponible
ImpactDisponibleDisponibleDisponibleDisponible
Trebuchet MSDisponibleDisponibleDisponibleDisponible
VerdanaDisponibleDisponibleDisponibleDisponible
Comic Sans MSDisponibleDisponibleDisponibleDisponible
ConsolasDisponible
Courier NewDisponibleDisponibleDisponibleDisponible
CourierDisponibleDisponible

Para tener más control sobre el diseño, es aconsejable indicar en el CSS fuentes alternativas, por ejemplo:

#Estilo {
font-family: Arial, Helvetica, sans-serif;
}

Si la primera fuente (Arial) no está instalada, el navegador usará la siguiente (Helvetica), y así sucesivamente. Al final, lo mejor es poner una fuente genérica (por ejemplo, sans-serif) por si ninguna de las anteriores estuviera instalada.

También tenemos la posibilidad de usar otras tipografías usando algunas técnicas que antes no existían, entre las cuales, creo que merecen especial atención las siguientes:

@font-face (FontSquirrel)

FontSquirrel es un repositorio donde podrás encontrar kits de fuentes, que posteriormente deberás enlazar desde la hoja de estilos CSS. También puedes crear tu propio kit a través de @font-face generator subiendo la tipografía que te interese.

Su uso es bastánte fácil. Sólo tendríamos que descargar o convertir la fuente y una vez que nos la descargamos, en el kit vendrá un archivo CSS, normalmente llamado stylesheet.css donde podremos ver el código que tendremos que insertar en nuestro CSS. Te aconsejo meterlo todo en una carpeta y cambiar las rutas si tu hoja de estilos está fuera.

Google Font API

Para mí es la mejor opción. Es muy parecido a lo anterior, pero con algunas diferencias:

  1. Ventaja: No tendrás que convertir nada, ni descargar, ni subirlo a tu alojamiento… Lo enlazarás directamente a las librerías de Google.
  2. Inconveniente: No podrás hacerlo con la tipografía que quieras, tendrás que elegir una de las que te proporciona Google en http://www.google.com/webfonts Pero cada vez son más las fuentes, así que no creo que no encuentres una que te guste.

Una vez que te hayas decidido por una, simplemente selecciónala y copia y pega el código que te aparece, del tipo:

<link href='http://fonts.googleapis.com/css?family=Forum&v2' rel='stylesheet' type='text/css'>

Después en tu hoja de estilos, para usarla, hazlo como siempre. Por ejemplo:

font-family: 'Forum', serif;

Además de estas dos técnicas, existen más, entre ellas Cufón, que lo hace a través de Javascript. Si tú eres de los que usan alguna otra técnica ¿por qué no lo compartes con nosotros? ¡Nos encanta escuchar vuestras opiniones!