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

5
(1)

Publicado

Aviso importante web en obras

Es posible que el contenido que estás visualizando tenga un formato un poco raro o que se haya perdido algún contenido. Esto se debe a que en 2023/09 decidí renovar la página y con más de 1000 escritos el trabajo de irlos revisando uno por uno es agotador. Poco a poco iré corrigiendo todos los contenidos. ¡Gracias por la comprensión!

Elementos de una declaración CSS

[vc_raw_html]JTNDYXVkaW8lMjBjb250cm9scyUyMHNyYyUzRCUyMiUyRndwLWNvbnRlbnQlMkZ1cGxvYWRzJTJGYXVkaW8lMkZhdWRpby1jc3MlMkZsZWNjaW9uMDQtYW5hdG9taWEtaW5zdHJ1Y2Npb24tY3NzLXR1dG9yaWFsLWNzcy1mcmFuY2VzY1JpY2FydC5tcDMlMjIlM0UlM0MlMkZhdWRpbyUzRQ==[/vc_raw_html]¿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.
Sintaxis CSS básica. Cómo se escribe el CSS. 1
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!

  1. Avatar de Marián
    Marián

    Muchas gracias por una explicación tan clara! Me ha ayudado a entenderlo. Un saludo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *