CSS es el cambio más importante que las páginas web han visto en la última década, y allanó el camino para la separación de estilo y contenido. En la forma moderna, XHTML define la semántica Qué es el marcado semántico y cómo cambiará el Internet para siempre [Explicación de la tecnología] Qué es el marcado semántico y cómo cambiará el Internet para siempre [Explicación de la tecnología] Leer más estructura: el significado y el contenido de La página web, mientras que CSS se ocupa de la presentación. Si bien la mayoría de nosotros nos sentimos cómodos escribiendo un poco de HTML, parece que pensamos que CSS es una especie de magia negra. Espero cambiar eso con estos 5 pasos para convertirse en un hechicero de CSS.

Este artículo está dirigido a usuarios que tienen muy poca experiencia con CSS todavía, aunque espero que haya algo aquí para todos.

(1) gramática

Como cualquier idioma, CSS tiene una cierta gramática y puede parecer un poco “programa de computadora” Al principio, pero en realidad es solo una lista de cosas. Todo el CSS está escrito así:

SELECTOR PROPIEDAD: VALOR; VALOR DE PROPIEDAD; VALOR DE PROPIEDAD;

Como ya sabrá, CSS funciona al aplicar un estilo a un elemento seleccionado en la página web. Por ejemplo, para diseñar cómo se muestran todos sus enlaces, usaría “una” como el selector. Las diferentes propiedades y valores que aprenderá con la experiencia, pero algunas son fáciles, como COLOR, BORDER, FONT-SIZE, HEIGHT, son todas algunas propiedades posibles, cuyos valores pueden ser rojo, 14pt, 150%, 1000px: realmente es eso fácil. Veamos cómo iríamos sobre el estilo de todos los enlaces rojos:

a color: rojo;

También puedes usar el mismo bloque de CSS para hacer más de un tipo de elemento al mismo tiempo con comas:

a, h2, h3 color: rojo;

Esto hace que no solo todos los enlaces, sino también todos los encabezados h2 y h3, en el mismo color rojo. Tenga en cuenta que pueden ser de diferentes tamaños, ya que este bloque de código en particular SOLO cambia el color.

(2) selectores de clase y de identificación

Sin embargo, a veces no desea aplicar el estilo a TODOS los elementos de la misma manera, y en esos casos, podría usar CLASE o CARNÉ DE IDENTIDAD. Como regla general, la identificación se usa para elementos únicos y se usa más comúnmente para definir grandes bloques de contenido o botones especiales únicos y tales.

Por ejemplo, es posible que tenga un DIV grande para los bloques HEADER, CONTENT y FOOTER de su página, por lo que definirlos como ID sería un movimiento inteligente. Por otro lado, las clases se utilizan cuando es probable que los elementos de estilo se repitan a lo largo de la página. Tal vez desee que un grupo de elementos tenga esquinas redondeadas con un borde rojo sólido de 2 píxeles; en lugar de escribir el mismo estilo en línea un millón de veces, definiría una clase para él y adjuntar la clase a esos elementos en su lugar. Entonces, ¿cómo definir estos identificadores y clases?

 
Barra lateral
 

Para apuntar estos elementos en CSS usted usaría:

 .redondeado // esta es una clase border-radius: 5px; borde: 2px rojo sólido;  #sidebar … // esta es una ID 

(3) Descendientes

Sin embargo, no es necesario que adjunte clases e identificaciones a todo el documento, también puede usar lo que llamamos DESCENDIENTES para seleccionar elementos. Mire esta declaración de CSS y vea si puede averiguar lo que hace:

#sidebar h1 font-size: 20px;

Esto PRIMERO encontrará el artículo con una ID de “barra lateral” ENTONCES se limitará la selección a todos los

S contenido dentro de eso, y solo aplicar el estilo a aquellos.

Por lo tanto, si puede agrupar todos sus elementos de alguna manera, es mejor usar selectores de descendientes ya que es incluso menos código que agregar un montón de clase =”” definiciones a todo.

(4) Donde Poner Este CSS?

La mejor manera de lidiar con CSS es separarlo completamente de su HTML. Cree un archivo llamado como quiera .css, y simplemente agregue esta línea a su encabezado HTML:

También puede agregar bloques de CSS a la sección que se encuentra entre las etiquetas, pero no sugiero este método ya que resulta en archivos HTML complicados y difíciles de leer..

El tercer lugar para agregar CSS es en línea, pero también debes tener cuidado con eso. Cualquier cosa agregada en línea como tal:

anulará automáticamente cualquier cosa definida en su estilo separado. Así que puedes quedarte ahí tratando de depurar durante años por qué tus miniaturas no cambian de tamaño, y tu CSS puede ser perfecto, pero si el elemento IMG ya incluye estilos en línea, entonces esos tendrán prioridad. ¿Cómo sabes si algo más lo está afectando??

(5) Consigue FireBug, o usa Chrome

La guía de FireBug Amateur para personalizar el diseño de sitios web con FireBug La guía de personalización de FireBug Amateur para personalizar el diseño de sitios web con FireBug Leer más es una herramienta de desarrollo sorprendente que es especialmente útil para descubrir cómo funciona CSS. Tómese un momento para descargarlo y echarle un vistazo rápido. FireBug está disponible para Firefox como un complemento, o si usas Chrome, entonces ya está incorporado un conjunto idéntico de características. Una vez que haya activado el complemento en Firefox o esté usando Chrome, simplemente haga clic derecho en cualquier lugar de la página y seleccione “Inspeccionar elemento“.

Esto abrirá un nuevo panel en la parte inferior de su navegador. En el lado izquierdo está la vista XHTML, bien formateada y plegable. Si se desplaza sobre cualquier elemento, lo resaltará en la página y le mostrará el modelo de cuadro de CSS a su alrededor (hablaremos más sobre el modelo de cuadro en una lección futura). El punto clave aquí es que también puede seleccionar cualquier elemento y ver con precisión qué CSS está actuando sobre él en el lado derecho, y los dividirá en los selectores que lo han causado. Todo lo añadido en línea se mostrará bajo el “element.style” título. Pruébalo ahora en esta página. Tenga en cuenta que muchas de las CSS que aparecen a la derecha están tachadas con una línea central, lo que significa que otro selector que funciona en ese elemento tiene prioridad y está anulando a la que está tachada..

Eso es todo por hoy, pero no dude en dejar comentarios si cree que me he perdido algunos puntos fundamentales para principiantes, o si tiene alguna pregunta o problema específico con CSS, consulte en la sección de soporte técnico de nuestro sitio. La próxima vez me gustaría desarrollar su conocimiento de CSS más allá de los cambios básicos de color y tamaño.

Explore más acerca de: HTML, programación, diseño web, desarrollo web.