Sintaxis CSS básica. Cómo se escribe el CSS.

Sintaxis CSS básica. Cómo se escribe el CSS.

Print Friendly, PDF & Email
Sintaxis CSS básica. Cómo se escribe el CSS.
Valora esta entrada
¿Como se escribe el CSS?

Lo bueno del Cascading Style Sheets es que es un lenguaje muy lógico.

Pero como en todo lenguaje necesitamos aprender unas normas de escritura básica. Un vocabulario y una gramática.

En el caso de las hojas estilos nos estamos refiriendo a como se escriben las instrucciones CSS.

Sintaxis de una instrucción CSS

CSS es un lenguaje descriptivo.

Se compone de instrucciones CSS.

Elementos de una declaración CSS
Sintaxis básica de una instrucción CSS

Cada instrucción CSS consiste en un selector, una apertura a un conjunto de instrucciones y un cierre según se representan en la imagen.

Fijaros en las llaves de apertura, los dos puntos y el punto y coma.

Es muy importante nunca olvidarse ninguno de los elementos descritos.

El punto y coma sirve para cerrar cada propiedad + valor.

Los dos puntos sirven para separar las propiedades del valor.

Propiedades mínimas que debemos aprender

Existen muchas propiedades CSS.

No es necesario que las memorizes todas pero si que las entiendas.

Para tenerlas todas a mano es recomendable cuando se aprende tener una buena chuleta. Te recomiendo esta.

En realidad verás que existen unas pocas instrucciones que siempre son las que se terminan utilizando para un nivel básico.

Ahora no entraremos en el detalle de cada una porqué lo haremos durante el tutorial pero para que te hagas una pequeña idea estamos hablando de:

  • background, border, padding, margin, width, height, box-sizing para modelo de cajas.
  • display, position, float, para posicionamiento en el espacio.
  • color, text-decoration, font-size, font-weight, … etc

Y no muchas más… (en realidad si, pero con estas pocas de momento puedes sobrevivir).

Luego cada una de las propiedades citadas anteriormente pueden tener cantidad de valores distintos que también hay que aprender.

Vayamos paso a paso.

¡Hola querido lector!

Por hoy ha sido una pequeña lectura.

El siguiente paso será entender el concepto de selector y los diversos tipos que podemos tener.

¡Nos leemos mañana como siempre con un nuevo contenido en mi web!

Entradas relacionadas:

Guía rápida para crear botones personalizados con CSS
- 105
Hacemos un repaso rápido a :hover :active y las propiedades box-shadow, border-radius, cursor y background para estilizar botones.
Como crear columnas con CSS de forma fácil mediante Inline-block y float
- 178
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
Modelo de cajas CSS. Ancho, altura, relleno, borde y margen
- 449
El modelo de cajas nos permite definir mediante CSS las propiedades físicas de espacio a una etiqueta html que esté dentro del body. En esta publicación se habla del ancho, altura, relleno, borde y fo...
La propiedad z-index
- 76
Resumen y ejemplo de aplicación de la propiedad Z-index. Asignatura CSS curso confección y publicación de páginas web.
Unidades de medida absolutas y relativas en CSS
- 324
¿Como se define el tamaño de cada uno de los elementos de una página web? En CSS podemos encontrar medidas absolutas y relativas. Veamos a que equivale cada una.
Tipografía CSS: como usar web safe fonts y tipografías personalizadas.
- 419
La sal es a la cocina lo que las tipografías son al mundo web. Debemos conocerlas y usarlas con conocimiento. En esta entrada se explica que CSS se debe escribir para hacerlo posible.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 286
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Factores que afectan al tiempo de carga de una página web
- 356
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Introducción al CSS. Que significa Cascading Style Sheets.
- 208
Se explica que es el CSS, que significa en realidad el acrónimo y porqué se le llama así y hacemos una primera toma de contacto con este lenguaje web.
Maquetar una página de prestashop 1.6 con bootstrap
- 484
Maquetar páginas en Prestashop 1.6 con tablas es un deporte de riesgo para implementadores anclados en el pasado. En esta entrada te muestro un ejemplo sencillo y sin demasiadas complicaciones para qu...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.