Sintaxis CSS

CSS afecta la apariencia del contenido HTML siguiendo una sintaxis que consiste de dos partes generales: un selector y una declaración.

1. Selector CSS. El selector es el que especifica la sección del HTML que se desee afectar.
2. Declación CSS. En la declaración se define de qué manera queremos afectar la apariencia del contenido al que estemos haciendo referencia.

Una declaración CSS a su vez se divide en dos secciones: Las propiedades y los valores.

Modelo de Caja Tradicional

Las etiquetas HTML  con las que se construye el contenido de un sitio web son interpretadas como un contenedor, caja o rectángulo. Cada vez que agregamos una etiqueta a un documento HTML se crea uno de estos contenedores. Este modelo es el que CSS utiliza para afectar la apariencia del contenido de una web.

Lo que haremos a continuación será aprender cómo CSS utiliza estos rectángulos para controlar el diseño de un sitio web. Para ello es necesario comprender cuales son las partes de una caja y cuál es su papel en la visualización del contenido web.

1. Content (Contenido). Contenido HTML. Sabemos que puede ser texto, imágenes, videos e incluso otras etiquetas con otro contenido.

CSS y HTML

CSS significa Cascading Style Sheets (hojas de estilo en cascada). Es el lenguaje estándar utilizado para definir y controlar el aspecto y presentación de los sitios web.

La relación entre HTML y CSS es complementaria. Mientras que HTML se encarga de la definición del contenido, CSS proporciona la definición del aspecto del mismo.

El desarrollo de CSS, permite al mismo tiempo el desarrollo semántico de HTML. Es decir que HTML se concentra únicamente en definir clara y eficientemente el contenido dejando al CSS el desarrollo de su apariencia. Esta separación entre el contenido y la apariencia permite que la actualización y mantenimiento de los sitios web sea más eficiente.

Personalizando el gadget de TEXTO blogger

Entre los gadgets que blogger nos ofrece esta el que nos permite añadir un mensaje de texto a nuestro blog. Usando la imaginación este gadget puede servirnos entre otras cosas para presentar anuncios o noticias en nuestro blog.

No obstante los resultados propios del gadget pueden no satisfacer nuestra necesidades en cuanto su diseño o apariencia. Veamos ahora como poder darle más personalidad a este gadget y potenciar su utilidad para nuestro sitio.

Acentos y caracteres especiales HTML

En el idioma español existen caracteres que no se usan en idiomas anglosajones. La letra ñ y las vocales acentuadas mayúsculas y minúsculas, son caracteres únicos del idioma castellano y por ello se les conocen como caracteres especiales HTML.

Aunque hoy esto está resuelto con los juegos de caracteres, la etiqueta meta charset que va en el head en HTML, conviene conocer los códigos que nos permiten insertar estas entidades especiales en HTML.

La estructura de estos códigos puede redactarse de dos maneras: indicando el nombre de la entidad dentro del código o indicando el valor numérico de la entidad.

Etiquetas H o encabezados en HTML

Para mostrar títulos en el contenido de nuestro sitio web o blog HTML nos provee seis etiquetas para hacerlo. Estas son las etiquetas h1, h2, h3, h4, h5, y h6.

La letra H de la etiqueta abrevia el término heading o encabezado. Cada uno de estas etiquetas eta seguida de un número que representa su nivel de jerarquía, el cual va decreciendo a partir del h1.

<h1>Este es un título de nivel 1<h1>
<h2> Este es un título de nivel 2<h2>
<h3> Este es un título de nivel 3<h3>
<h4> Este es un título de nivel 4<h4>
<h5> Este es un título de nivel 5<h5>
<h6> Este es un título de nivel 6<h6>

Lo cual se verá así:

Formato de texto en HTML

En la mayoría de sitios web, el contenido principal consiste en texto. Los elementos que enriqueces un sitio, como imágenes e iconos, suelen girar en torno a este contenido. Por ello es fundamental para nuestro sitio web o blog saber cómo presentar el texto adecuadamente en HTML.

Como ya hemos visto, la etiqueta <p> nos permite diferenciar párrafos. No obstante para presentar algunos formatos de texto, como texto en negrita o en cursiva, es necesario usar otras etiquetas.

Las etiquetas que permiten dar forma al texto en HTML se dividen en dos. Etiquetas de estilo físico y de estilo lógico.

Etiquetas básicas HTML

Etiquetas.
El lenguaje HTML se construye con etiquetas o tags. Una etiqueta html es un comando descriptivo usado para indicarle a los navegadores una orden. La estructura básica de una etiqueta es la siguiente:

<nombre_etiqueta> Contenido</nombre_etiqueta>

Algunas etiquetas no tienen etiqueta de cierre. En este caso la estructura se simplifica.