¿Que es CSS?

Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (incluyendo varios lenguajes basados en XML como SVG, MathML o XHTML). CSS describe cómo debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.

¿Cómo empezar con CSS?

Conectar CSS a HTML: Hay tres formas principales de usar CSS:
- En Linea: Dentro de una etiqueta HTML con el atributo style
```
<p style="color: blue;">Texto azul</p></li>
```
  Texto azul
- Interno: Dentro de <style> en la sección <head> del HTML.
```
<style>
 p { 
     color: green; 
   } 
</style>
```
  Texto verde
- Externo: En un archivo separado (ejemplo: estilos.css) vinculado con <link> en <head>. Esta es la opción que vamos a utilizar en la clase.
```
archivo .html:
<head> 
    <link rel="stylesheet" href="estilos.css"> 
</head>
archivo .css:
p { 
    color: red; 
  }
```
  Texto rojo
Estructura de una regla CSS:
- ```
selector{
    propiedad:valor
}
```
- Selector: Es una parte de una regla CSS que indica al navegador qué elementos HTML se van a seleccionar para aplicarles una regla.
- Propiedad: es una característica de un elemento HTML que se define con un valor para determinar su estilo o comportamiento
- Valor: Un valor de una propiedad en CSS es el dato específico que le asignas a una propiedad para definir cómo se aplicará el estilo a un elemento HTML.
- Vamos a hacer un ejemplo, seleccionamos el elemento p y cambiamos su color de texto a rojo.
```
p{
color: red;
}
```
- Tambien podemos seleccionar un elemento específico, utilizando un identificador. El identificador se agrega en alguna etiqueta html: id="nombre" y lo seleccionamos con # en css:
```
<p id="texto"> Esto es un texto </p>
```
```
#texto{
color: red;
}
```
Conceptos y propiedades básicas:
- Colores: Cambia el color del texto o el fondo
  - color: Color del texto.
  - background-color: Color de fondo.
- Fuentes: Controla el tamaño y el tipo de letra
  - font-size: Tamaño del texto (ejemplo: 20px).
  - font-family: Tipo de letra (ejemplo: Arial).
- Tamaño y espaciado
  - width: Ancho de un elemento (ejemplo: 200px).
  - height: Alto (ejemplo: 100px).
  - margin: Espacio exterior (ejemplo: 10px).
  - padding: Espacio interior (ejemplo: 15px).
- Bordes: Agrega lineas alrededor de elementos.
  - border: Define grosor, estilo y color.
Puedes encontrar mas información sobre diversas propiedad en el siguiente enlace: w3 schools css
Tambien podes mirar el siguiente video, que es una guia sencilla de CSS:

Anterior Siguiente