Qué es CSS e Introducción a CSS

Para entender qué es CSS, este es la mejor introducción a CSS que puedes encontrar en todo Internet si estás empezando en el desarrollo web; entenderemos de qué se trata, para qué sirve y cómo funciona. CSS se trata de un fantástico lenguaje de estilos que convierte a elementos de HTML en elegantes y vistosos dentro de una página web. ¿Estás listo para profundizar en CSS? ¡Vamos por ello!

Porqué es necesario una introducción a CSS

Si estás buscando aprender CSS Seguramente ya sabes utilizar el lenguaje de marcado HTML ¿Verdad? Claro que si, si no lo sabes, pues anda primero ve a aprender HTML con el curso completo, pues CSS se aplica sobre HTML.

Cuando empezamos en el mundo del desarrollo web y apenas hemos empezado con HTML, hay que tener cuidado a la hora de explicar cada detalle de lo que sigue a continuación y por ello me tomo la tarea de escribir esta introducción.

Recordemos que las páginas que hicimos con HTML poseen elementos, pero muy pobres en cuanto a apariencia o diseño, podemos tener textos, imágenes, formularios, o cualquier elemento, pero seguramente nos vendría bien saber controlar al detalle aspectos como: los colores, la posición, el tipo de texto, los bordes, rellenos, márgenes, hasta animaciones, etc. De dichos elementos HTML. Pues para ello nos serviremos de las virtudes de CSS, el lenguaje de diseños por excelencia.

¿Qué es CSS?

CSS por sus siglas en inglés (Cascading Style Sheets)  “hojas de estilo en cascada” Es el lenguaje que define el estilo de los elementos de un documento HTML, por lo tanto es el lenguaje con la cual controlaremos el diseño, la apariencia de nuestras páginas web hechas con HTML.

Te recomendamos leer:  Estilos para enlaces CSS

El término cascada hace referencia a la manera en la que CSS trabaja, pues aplica los estilos sobre otro.

Escribir nuestro primer código CSS

Ahora que ya sabemos, utilizar HTML es momento de ponerle estilo a la estructura de nuestra página web.

Recordemos que HTML nos permite crear la estructura de una página web y de alguna manera podíamos poner estilos a nuestros elementos HTML. Pero como hemos visto es bastante limitado y no es muy práctico poner estilos en un documento HTML utilizando los atributos.

Pues bien para ello tenemos el lenguaje de estilos CSS, este nos permitirá manejar la apariencia de nuestros elementos HTML de una manera muy simple.

Para que entiendas, con CSS seleccionaremos el elemento HTML que queremos maquetar o  darle estilo, luego escribiremos las instrucciones o declaraciones para definir las propiedades, características o estilos de dicho elemento, estas propiedades lo definiremos  mediante un valor.

Por ejemplo, imagina que queremos dar un color de fondo verde a un elemento de párrafo.

Para ello tenemos que hacer lo siguiente:

  1. Seleccionamos el párrafo.
  2. Definimos la propiedad, en este caso el color de fondo (background-color).
  3. Definimos el valor para la propiedad especificada, en este caso el valor será el color verde (green).
p {background-color: green;}

Note la sintaxis, las llaves, los dos puntos, el punto y coma son signos importantes ya forman parte de la sintaxis o forma de escribir código CSS. Todo ello lo veremos con detenimiento en las lecciones que continúan, este solo es un pequeño ejemplo.

Muy sencillo ¿verdad? Simplemente seleccionamos el elemento, definimos la propiedad y finalmente su valor.

Te recomendamos leer:  Ejemplos de CSS y ejercicios resueltos

Cómo controla CSS la apariencia de páginas HTML

Existen muchas propiedades como: color, alineación, tamaño, tipo de letra, bordes, tipos de borde, márgenes, etc. Realmente hay muchísimos, para hacer de ellas lo que nuestra creatividad alcance y lo veremos durante el curso.

También están los valores para dichas propiedades como por ejemplo para alineación puede ser a la izquierda, al centro, a la derecha, para tipo de letra puede ser: Helvética, Verdana, Lato, etc.

Aprender CSS básicamente consiste en comprender la sintaxis, la forma en la que se escriben las instrucciones y cuáles son las características que podemos controlar con CSS.

Ahora que ya tienes idea ¡Adentrémonos en CSS!

Lecciones CSS
0 0 votos
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

A continuación:

Curso de CSS3

Continua a prendiendo CSS3 para completar el curso.

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

A continuación:

Curso de CSS3

Continua a prendiendo CSS3 para completar el curso.

1. Introducción a CSS3
2. Sombras para texto en CSS3
3. La propiedad Word-wrap
4. La regla @ font-face
5. Border-radius: Esquinas redondeadas con CSS3
6. Sombras para cajas con CSS3
7. Degradados y fondos en CSS3
8. Imágenes de fondo con CSS3 background-size
9. La propiedad opacity de CSS3
10. Pseudo-clases y pseudo-elementos de CSS3
11. Transiciones en CSS3
12. Transformaciones en CSS3
13. Animaciones en CSS3
14. Filtros CSS3
15. Ejemplos y ejercicios resueltos CSS3