Qué es CSS y Introducción a CSS

Avanzar

Para entender qué es CSS, este es la mejor introducción a CSS que puedes encontrar en todo Internet si estas empezando en el desarrollo web; entenderemos de qué se trata, para que 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 pagina web. ¿estas 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, sin no lo sabes pues anda ve ha aprender con el curso de HTML completo.

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 molestia 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, margenes, 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 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:  Comentarios en CSS más cascada de estilos y herencia

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:  Personalizando el cursor del ratón con CSS

Cómo controla CSS la apariencia de paginas HTML

Existen muchas propiedades como color, alineación, tamaño, tipo de letra, bordes, tipos de borde, márgenes, etc. etc. 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. Etc. 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
Avanzar
0 0 votar
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

 

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