Scribd
Cargar
9 vistas

1 - Introducción A CSS

Este documento explica los diferentes tipos de selectores en CSS como ID, clase, etiqueta y descendentes para aplicar estilos a elementos HTML. También cubre cómo vincular hojas de estilo CSS con documentos HTML de forma externa, interna y en línea.

Cargado por

Gabriela
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
9 vistas

1 - Introducción A CSS

Este documento explica los diferentes tipos de selectores en CSS como ID, clase, etiqueta y descendentes para aplicar estilos a elementos HTML. También cubre cómo vincular hojas de estilo CSS con documentos HTML de forma externa, interna y en línea.

Cargado por

Gabriela
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 18

1.

Vinculación con HTML


Índice 2. Las reglas de CSS
3. Los selectores de CSS
Vinculación
1 con HTML
CSS quiere decir...

Cascading Style Sheet


¿Para qué sirven las hojas de estilo?
Estas sirven para estilizar nuestro contenido HTML.
Con CSS podemos cambiar colores, fondos, tipografías, anchos, altos,
y mucho más. Así como también generar animaciones y transiciones.
Contamos con 3 métodos para vincular nuestros archivos CSS con el
documento HTML.
Vinculación externa
Esta es la más utilizada ya que podemos escribir todos nuestros estilos en un
archivo CSS y vincularlos al HTML usando la etiqueta <link> dentro del <head>
de nuestro documento.
Atributo + valor
Indica qué relación hay entre los documentos a
enlazar. El valor siempre será el mismo.

html <link href="css/estilos.css" rel="stylesheet">

Atributo + valor
Ruta de la ubicación de mi hoja de estilo.
Vinculación interna
A través de la etiqueta <style> dentro del <head>.

<head>
<meta charset="UTF-8">
<style>
html
body {background: blue}
</style>
</head>
Vinculación en línea
Usando el atributo style en cada elemento de nuestro HTML.

html <p style="color: red">...</p>


Las reglas
2 de CSS
¿Qué son las reglas de CSS?
Una regla de CSS es un conjunto de instrucciones que se aplican a un elemento
determinado para agregarle estilos.
Selector
Indica sobre qué elemento o
elementos aplicaremos la regla.

css body { font-family: sans-serif }

propiedad valor
Define qué propiedad del elemento o Especifica el comportamiento de la
de los elementos vamos a modificar. propiedad.
¿Cómo se escriben?
Primero escribimos el o los selectores, seguidos de las llaves {} que indican el
comienzo de las reglas.
Cada regla se compone de una propiedad y su correspondiente valor,
separados por dos puntos :.
Finalmente, podemos tener más de una regla por elemento y estas se separan
con punto y coma ;.

body {
background-color: purple;
css font-family: sans-serif;
text-align: center;
}
Las propiedades de CSS
Existen muchas propiedades de CSS que nos permiten manipular los
elementos del HTML a nuestro antojo.
Si tuviéramos que agrupar las propiedades, los grupos serían más o menos así:

● Tipografías ● Visualización
● Fondos ● Comportamiento
● Tamaños ● Interfaz
● Posicionamiento ● Otros
Los selectores
3 de CSS

Introducción a CSS
Selectores de ID
Este selector va a atrapar al elemento HTML que tenga asignado el atributo id
con el valor correspondiente.
Se recomienda usar nombres únicos para cada elemento y no repetirlos a lo
largo del documento.

html <h3 id="saludo">¡Hola!</h3>

Para llamarlo desde el CSS usamos el # seguido del nombre del ID.

css #saludo { color: blue }


Selectores de clase
Este selector va a atrapar al elemento HTML que tenga asignado el atributo
class con el valor correspondiente.
Podemos asignarle la cantidad de clases que queramos a un mismo elemento.
Para hacerlo, solo hace falta separarlas con un espacio.

html <h3 class="noticia destacada">Una noticia</h3>

Para llamarlo desde el CSS usamos el . seguido del nombre de la clase.

css .noticia { font-size: 22px }


Selectores de etiqueta
Este selector va a atrapar al elemento HTML con el mismo nombre de etiqueta
que llamemos desde nuestro CSS.

html <p>Ad lorem ipsum dolor sit amet</p>

Para llamarlo desde el CSS usamos el nombre de la etiqueta.

css p { color: gray }


Selectores combinados
Como su nombre lo indica, son la combinación de todos los anteriores,
también podemos usar varios selectores del mismo tipo.
En este ejemplo combinamos un selector de etiqueta con uno de clase.

html <h2 class="subtitulo">Un subtítulo</h2>

Para llamarlos desde el CSS solo hace falta agregar un selector al lado del otro,
cada uno con la sintaxis que le corresponda. Recordemos que van sin espacios.

css h2.subtitulo { color: yellow }


Selectores descendentes
Estos selectores sirven para agregar especificidad. En el ejemplo vamos a
atrapar al elemento li que esté dentro del ul con el id lista.
Para llamarlos desde el CSS escribimos los selectores separados por un espacio
(el de la derecha siempre será el que está dentro del de la izquierda).

<ul id="lista">
html <li>Primer ítem</li>
</ul>

css ul#lista li { text-align: center }


“
El CSS siempre va a priorizar a
los selectores más específicos
para aplicar los estilos.

También podría gustarte