VIDEO

HTTPS://WWW.YOUTUBE.COM/WATCH?V=WCLU3VK4_Q8

EJEMPLOS

CSS
Ejemplos
Como agregar CSS al HTML
1. Agregar un link a un archivo de CSS externo

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

2. Agregar CSS directamente en la etiqueta <style> del HTML

<style type="text/css">

p {

color:green

}
</style>
3. Agregar CSS en las etiquetas del HTML

<p style="color:white;background:green;">Texto blanco fondo

verde</p>

4. Importando un archivo CSS

@import "estilos.css"
Estructura basica
css
selector{
propiedad1:valor;
propiedad2:valor;
propiedad3:valor;
}

* El selector identifica los elementos del HTML a los cuales se aplicara la regla.
* Los pares propiedad-valor dentro de las llaves estan separados por puntos y coma; y
las propiedades estan separadas de su respectivo valor por dos puntos.
* Las propiedades definen lo que quieres modificar a los elementos seleccionados, por
ejemplo, cambiar la posicion,el color, los margenes, el color de fondo, entre otros.
* Los valores son los valores que quieres cambiar a cada propiedad de los elementos
seleccionados. Los valores dependen de la propiedad, por ejemplo las propiedades
que afectan al color pueden tomar nombres de color (en ingles) como red,gray,yellow,
codigo del color en hexadecimal, como #009900 o valores RGB, como rgb(34,142,28).
Las propiedades que afectan el ancho, la altura, la posicion, el margen, etc pueden
tomar valores medidos en pixel, ems, porcentaje, centimetros u otras unidades.

Ejemplo
css
h1 {
color: red;
font-family: Arial;
font-size: 30px;
}

El selector h1 selecciona a todos los elementos <h1> en el documento HTML que usa
este CSS para aplicar esta regla, a menos que existan selectores mas especificos
cuyas reglas sobre escribirán a esta.
Las propiedades en esta regla son el color del texto, la fuente del texto, y el tamano
de la fuente
Los valores de estas propiedades son rojo, Arial, y 30 pixeles respectivamente.
Selectores
Existen muchos tipos de selectores los tres mas usados que vas a encontrar son:

1. Tag name: Selecciona los elementos del HTML de la respectiva etiqueta

2. Selector por clase: Selecciona los elementos del HTML que tienen un
atributo class con el valor especificado

3. Selector por id: Selecciona los elementos del HTML que tienen un
atributo id con el valor especificado
Agrupando selectores
También es posible agrupar selectores que quieres que tengan el mismo estilo, por
ejemplo en vez de escribir:

css
h1 {
color: blue;
font-size: 20px;
}
h2 {
color: blue;
font-size: 20px;
}

Donde los selectores h1 y h2 tienen el mismo estilo es posible agrupar los selectores
separados por una coma:
css
h1,h2 {
color: blue;
font-size: 20px;
}

Selectores Universales
En CSS existe el selector universal * el cual selecciona todos los elementos de un tipo
el cual no es muy usado ya que raras veces se desea que todos los elementos tengan
el mismo estilo.

Selectores descendentes
En algunas ocasiones se requiere dar estilos diferentes a elementos de un solo tipo
pero que se diferencia por el elemento que los contiene.
Un elemento A es descendiente de otro elemento B si el elemento A esta incluido en el
elemento B.
En el ejemplo anterior existen dos etiquetas <p> pero se aplica solamente a la primera
ya que esta contenida dentro de la etiqueta h1 como se especifica en el selector del
CSS.
Hay que resaltar que no necesariamente el elemento descendiente tiene que estar
contenido inmediatamente dentro del elemento externo, es decir el elemento
descendiente puede estar contenido dentro de otro elemento que a su vez este
contenido en el elemento mas externo.

En el ejemplo anterior la etiqueta <strong> que deseamos aplicar el estilo esta

contenida dentro de una etiqueta <p> la cual a su vez esta contenida en una
etiqueta h1 por lo cual cumple la regla del selector del CSS.

En general la estructura para selecionar elementos descendientes es los selectores de

cada elemento individual comenzando del mas externo hasta el mas interno separadas
por un espacio:
 EJERCICIOS

CSS
Ejercicios
Ejercicio 1
Agregar una hoja de estilos externa al documento HTLM el cual aplica los siguientes
estilos a todos los parrafos <p> del documento:
- Color: Azul
- Tamaño de fuente: 12px
- Tipo de fuente: Times New Roman
Ejercicio 2
Modificar el CSS para agregar los siguientes estilos al documento HTML.
- El color del texto de todos los elementos del documento es verde.
- Los elementos con id HS tienen un color de fondo negro
- Los elementos con clase CoreUp tienen borde solido de 2px y color de fondo con
codigo rgb rgb(224,224,224)
 EXAMEN

¿Cual es la etiqueta de HTML para agregar un archivo externo CSS?*

A <script>

B <css>

C <style>

¿Cual es el atributo HTML para agregar estilo en una etiqueta?*

A <font>

B <style>

C <css>

¿Cual es la manera correcta de agregar comentarios en CSS?*

A /* Comentario CSS */

B // Comentario CSS //

C // Comentario CSS

¿Que propiedad es usada para cambiar el color de fondo?*

A color

B background-color

C font-color

¿Que propiedad se usa para cambiar la fuente de un texto?*

A font-face

B font-family

C font-style