¿Qué es CSS?

 
CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading
Style Sheets). Básicamente, es un lenguaje que maneja el diseño y
presentación de las páginas web, es decir, cómo lucen cuando un usuario las
visita. Funciona junto con el lenguaje HTML que se encarga del contenido
básico de las páginas.

Se les denomina hojas de estilo «en cascada» porque puedes tener varias
hojas y una de ellas con las propiedades heredadas (o «en cascada») de otras.

Para muchas personas una simple plantilla de blog es suficiente. Aun así,
cuando quieras personalizar la apariencia de un sitio necesitarás implementar
CSS que, en conjunto con un buen CMS, te ayudará a potenciar el alcance de
tu contenido.
Diferencia entre HTML y CSS

HTML da estructura al contenido de un sitio web. Sus siglas en inglés

significan «lenguaje de marcas de hipertexto» (HyperText Markup Language), y
hacen referencia al código que define el significado de las instrucciones dadas
a una plataforma computacional.

Estas instrucciones representan todos los enlaces (o hipertextos) que vinculan

los contenidos de un sitio, por lo que HTML es la base de cualquier página web. En
este lenguaje es posible incluir toda la información referente al contenido de un
sitio, así como las imágenes, audios y estilos del mismo; sin embargo, su uso
para estas tareas conlleva una mayor complejidad en el código fuente.

Para hacer más eficiente el uso de HTML, se han diseñado lenguajes

computacionales que facilitan la gestión de los datos relacionados con el
diseño visual de las plataformas. CSS es uno de los lenguajes más importantes
que se utilizan para ordenar las instrucciones referentes a la apariencia de un
sitio y presentar los contenidos de una página de forma atractiva.

De este modo, HTML se emplea para estructurar el contenido de un sitio,

mientras que CSS se usa para estructurar su presentación.

Básicamente, si el contenido es el rey, CSS es el segundo al mando. Por eso

como propietario de un sitio o como experto en marketing con conocimiento
web es conveniente que comprendas algunos aspectos fundamentales.
¡Comencemos!

1. Escribe reglas para la apariencia de tu sitio

Las personas que ya están familiarizadas con HTML notarán que la sintaxis de

CSS es un poco distinta. En lugar de hacer un listado del contenido de la
página, CSS utiliza las reglas asignadas a elementos HTML, un documento
HTML completo o varios de ellos. Estas reglas son procesadas por el
navegador web cuando carga el archivo HTML.
Una regla en CSS luce así:

Listas de selectores
Si más de un elemento utiliza el mismo CSS, puedes combinar los selectores en
una lista de selectores para que la regla se aplique a cada uno de los selectores
individuales. Por ejemplo, si tengo el mismo CSS para un h1 y para una
clase .special, los puedo escribir como dos reglas separadas.

h1 {
color: blue;
}

.special {
color: blue;
}
Copy to ClipboardCopy to Clipboard

También los podrías combinar en una lista de selectores, separándolos con una
coma.

h1, .special {
 color: blue;
}
Copy to ClipboardCopy to Clipboard

Es posible dejar un espacio en blanco tanto antes como después de la coma.

Incluso puede resultar más legible si cada selector se encuentra en una línea
distinta.

h1,
.special {
color: blue;
}
Copy to ClipboardCopy to Clipboard

En el ejemplo siguiente, intenta combinar los dos selectores de modo que

tengan la misma declaración. El aspecto visual debe permanecer igual tras la
combinación.

Co

lor del texto: color

La propiedad color permite establecer el color del texto. Las formas de

expresar colores se comentan en la lección CSS: Colores.
h1 {
color: magenta;
}

p {
color: blue;
}

Esto es un encabezado h1
Esto es un párrafo <p> normal y corriente.

Esto es otro párrafo <p>.

La propiedad compuesta background
background

 
La propiedad compuesta background permite definir simultáneamente
todas las propiedades relacionadas con el fondo de cualquier
elemento: background-color, background-image, background-position, 
background-size, background-repeat, background-attachment, backgro
und-origin y background-clip (explicadas más adelante en esta
página).
html {
background: lightblue url("caballo.svg");
}

/* Imagen de fondo caballo.svg: */

Este ejemplo tiene como imagen de fondo la

silueta de un caballo y tiene color de fondo.

CSS: Márgenes exteriores e interiores

;

Para añadir espacios o márgenes

 margin: margen a partir de un elemento hacia afuera expresado

en px. Suele empujar a otros elementos cercanos
 padding: relleno o espacio interior desde el borde de un
elemento hacia dentro. Ampliar padding suele arrastrar hacia
fuera los bordes y por consiguiente aumenta el tamaño del
elemento

En sendos casos, puedes expresar el valor en píxeles pero también en

porcentajes. Los porcentajes son ideales para definir espacios
proporcionales, de modo que no haya una distancia fija entre
elementos, sino que en función del tamaño de la pantalla o dispositivo,
los elementos se coloquen proporcionalmente.

Esta es la clave para definir tamaños de elementos que sean

responsive (que se adapten automáticamente a todos los dipositivos).
De este modo, una caja con un ancho (width) al 100% siempre
ocupará el 100% de la pantalla, ya sea una pantalla grande o un
smartphone.

Además, tanto el margin como el padding pueden definirse para una

dirección concreta arriba, derecha, abajo o izquierda:

 margin-top: margen hacia arriba

 margin-right: margen hacia la derecha
  margin-bottom: margen hacia abajo
 margin-left: margen hacia la izquierda
 padding-top: relleno desde arriba hacia adentro
 padding-right: relleno desde la derecha hacia adentro
 padding-bottom: relleno desde abajo hacia adentro
 padding-left: relleno desde la izquierda hacia adentro

Nota: Puedes especificar márgenes y rellenos en las cuatro direcciones

sin necesidad de declararlos por separado. Basta con que dentro de la
propiedad general escribas las cuatro direcciones todas seguidas y en
el sentido de las agujas del reloj. Por ejemplo, si quieres poner a un
elemento #boton un margen de 20 píxeles por arriba, 0 por la derecha,
20 por abajo y 5 por la izquierda, puedes escribir lo siguiente:
#boton {

margin: 20px 0 20px 5px;

Para textos
Las propiedades y sus atributos más comunes para modificar la
apariencia de tus textos web son las siguientes:

 font-family: Establece una familia o fuente tipográfica.

 font-style: Estilo normal, cursiva u oblicua. Atributos [ normal |
italic | oblique ]
 font-variant: Convierte las minúsculas en mayúsculas pero en
tamaño menor. Atributos [ normal | small-caps ]
 font-weight: Grosor de la tipografía especificado en medidas de
100 a 900.
 font-size: tamaño o cuerpo de letra especificado en píxeles (px).
 text-indent: cantidad de desplazamiento lateral de la primera
línea del texto, expresado en px.
  text-align: alineación del texto. Atributos [ left | right | center |
justify ]
 text-decoration: aplica efectos de subrayado, tachado,
parpadeo. Atributos [ none | [ underline || overline || line-through
|| blink ] ]
 letter-spacing: espaciado entre caracteres especificado en px.
 text-transform: para transformar los textos a mayúsculas o
minúsculas [ capitalize | uppercase | lowercase | none ].
 line-height: interlineado entre renglones de texto expresado en
px.
 vertical-align: alineación vertical del texto. Atributos [ baseline
| sub | super | top | text-top | middle | bottom | text-bottom |
<porcentaje> | <longitud> ]

Tipo de letra
ombre Observaciones
genérico
A menudo se considera una buena práctica añadir
también Helvética como opción preferida a Arial porque, aunque
Arial sans-serif tienen casi el mismo aspecto y Arial está más ampliamente
disponible, se considera que Helvética tiene una forma más
agradable.
Algunos sistemas operativos cuentan con una versión alternativa
Courier (posiblemente más antigua) del tipo de letra Courier
monospace
New New llamado Courier. Se considera una buena práctica usar ambos,
con Courier New como la opción preferida.
Georgia serif
Algunos sistemas operativos cuentan con una versión alternativa
Times New (posiblemente más antigua) del tipo de letra Times New
serif
Roman Roman llamado Times. Se considera una buena práctica usar ambos,
con Times New Roman como la opción preferida.
Trebuchet Hay que tener cuidado al usar este tipo de letra porque no está
sans-serif
MS ampliamente disponible en los sistemas operativos móviles.

Nombre Definición Ejemplo

serif Tipos de letra que tienen serifas (pequeños adornos, Mi gran elefante rojo
Nombre Definición Ejemplo
en general en los extremos de los trazos de los
caracteres tipográficos)
sans-serif Tipos de letra que carecen de serifas. Mi gran elefante rojo
Tipos de letra en que cada carácter tiene el mismo
monospace ancho; se usan con frecuencia en las listas de Mi gran elefante rojo
sentencias de los códigos de programación.
Tipos de letra que intentan emular la letra
cursive Mi gran elefante rojo
manuscrita, con trazos fluidos y conectados.
fantasy Tipos de letra que pensados para ser decorativos. Mi gran elefante rojo

Listado de content values

  fa-glass «\f000»
  fa-music «\f001»
  fa-search «\f002»
  fa-envelope-o «\f003»
  fa-heart «\f004»
  fa-star «\f005»
  fa-star-o «\f006»
  fa-user «\f007»
  fa-film «\f008»
  fa-th-large «\f009»
  fa-th «\f00a»
  fa-th-list «\f00b»
  fa-check «\f00c»
  fa-times «\f00d»
  fa-search-plus «\f00e»
  fa-search-minus «\f010»
Los estados de un enlace

Lo primero que hay que entender es el concepto de estados de un enlace

(diferentes estados en los que pueden estar los enlaces, que pueden diseñarse
usando diferentes pseudoclases ):

 Link (no visitado) : El estado predeterminado que presenta un enlace cuando

no está en ningún otro estado. Se puede especificar usando la pseudoclase :link.
 Visited : Un enlace cuando ya se ha visitado (está grabado en el historial del
navegador); se le aplica otro formato con la pseudoclase :visited.
 Hover : Un enlace cuando se le pasa el cursor por encima; se le aplica otro
formato con la pseudoclase :hover.
 Focus : Un enlace cuando tiene el foco (por ejemplo, se salta a este con la
tecla Tabdel teclado o se le da el foco mediante programación
usando HTMLElement.focus()); se le aplica un formato diferente con la
pseudoclase :focus.
 Active : Un enlace cuando se activa (por ejemplo, se hace clic encima); se le
aplica un formato diferente con la pseudoclase :active.

El estilo de la viñeta

Como ya sabes, la propiedad list-style-typete permite establecer qué tipo de viñeta

usar. En nuestro ejemplo, hemos establecido que se usan números romanos en
mayúsculas para la lista ordenada, con:

ol {
list-style-type: upper-roman;
}
Copiar al portapapeles

Esto nos da el aspecto siguiente:

Puedes encontrar muchas más opciones si echas un vistazo a la página de referencia

de list-style-type.

La posición de la viñeta

La propiedad list-style-positionestablece si las viñetas aparecen dentro de los elementos de

la lista, o fuera de ellos antes del inicio de cada elemento. El valor por defecto es outside,
 que provoca que las viñetas se sitúen fuera de los elementos de lista, como se observa
arriba.

Si establece el valor en inside, las viñetas se ubican dentro de las líneas:

ol {
list-style-type: upper-roman;
list-style-position: inside;
}
Copiar al portapapeles

Uso de una imagen personalizada como viñeta

La propiedad list-style-imagete permite usar una imagen personalizada para tu viñeta. La

sintaxis es muy sencilla:

ul {
list-style-image: url(star.svg);
}
Copiar al portapapeles

Sin embargo, esta propiedad es un poco limitada por lo que respeta al control de la
posición, el tamaño, etc., de las viñetas. Es más conveniente usar la familia de
propiedades background, de la cual aprenderás mucho más en el módulo Aplicar diseño a
las cajas .

Las tablas CSS

se componen de propiedades que permiten controlar el estilo de los títulos, el
tamaño de las celdas, filas y columnas, así como el espaciado entre los bordes.
Entre las propiedades más utilizadas se encuentran las siguientes: 

 caption-side. Sirve para posicionar el título sobre la tabla CSS.

 table-layout. Funciona para dar formato a las celdas, filas y columnas. 
 border-collapse. Se utiliza para seleccionar el modelo de los bordes.
 border-spacing. Sirve para indicar el espaciado entre los bordes de celdas
adyacentes. 
 empty-cells. Se usa para dar visibilidad a los bordes de celdas sin contenido. 
Una vez que conoces lo básico sobre las tablas CSS, es tiempo de construir la
tuya. A continuación, te compartimos los pasos.
MENÚ HORIZONTAL CSS

Vamos a crear un menú horizontal a partir del anterior de la siguiente manera.

a) En el código HTML introducimos esta línea después del cierre del elemento ul del menú: <div
class="limpiador"></div>

b) Definimos el código CSS de la siguiente manera:

/* Curso CSS estilos aprenderaprogramar.com*/

*{font-family: sans-serif;  }

hr{display:none;}

ul.menuVert1 { list-style: none;  text-align: center; text-shadow: 2px 2px

4px red; padding:0; }

ul.menuVert1 li {width: 220px; padding: 10px 0px; border: groove blue;

border-width: 6px 6px 6px 6px; background-color: #F7FE2E; float:left;}

ul.menuVert1 li a:link, ul.menuVert1 li a:visited { text-decoration: none;

color:black;}
ul.menuVert1 li:hover {background-color: #DC143C;}

.limpiador{padding:0; border-style:none; clear:both; }

 

El motivo para introducir un elemento limpiador (y la existencia de alternativas a este procedimiento) ya la

hemos discutido anteriormente. El resultado a obtener será similar a este.

Barra de navegación = Lista de Enlaces

Una barra de navegación necesita HTML estándar como base.
En nuestros ejemplos vamos a construir la barra de navegación de una
lista HTML estándar.
Una barra de navegación es básicamente una lista de enlaces, así que
usar el <ul> y <li> elementos hace perfecto sentido:

Ejemplo
<ul>
  <li><a href="default.html">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

Inténtalo tú mismo "