Guía Teórica CSS: Usos Del CSS en El HTML

Instituto Técnico “Jesús Obrero”
Informática II – 5to año

Profesora: Ariana Mijares
Tema: HTML
Guía teórica CSS
CSS son las siglas de Cascading Style Sheets. CSS ahorra mucho trabajo. Puede controlar el diseño
de varias páginas web (ventanas) a la vez.
Las hojas de estilo en cascada (CSS) se utilizan para formatear el diseño de una página web. Con
CSS, puede controlar el color, la fuente, el tamaño del texto, el espacio entre los elementos, cómo se
colocan y distribuyen los elementos, qué imágenes de fondo o colores de fondo se utilizarán,
diferentes pantallas para diferentes dispositivos y tamaños de pantalla, y ¡mucho más!
Usos del CSS en el HTML
CSS se puede agregar a documentos HTML de 3 formas:
 Inline : mediante el uso del styleatributo dentro de los elementos HTML

 Interno : mediante el uso de un <style>elemento en la <head>sección
 Externo : mediante el uso de un <link> elemento para vincular a un archivo CSS externo
La forma más común de agregar CSS es mantener los estilos en archivos CSS externos, que
es la forma en la que nosotros trabajaremos.
1
Tema: HTML
CSS EXTERNO
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.
Para utilizar una hoja de estilo externa, agréguele un enlace en la sección <head> de cada página
HTML:
Nuestra hoja CSS en este ejemplo sería el archivo .css especificado en el atributo href de la etiqueta
link dentro del head del documento html.
2
Tema: HTML
Un ejemplo de la codificación de una página CSS es:
Con el anterior código estaríamos definiendo que el fondo del cuerpo de la página HTML será de
un color powderblue (En CSS podemos especificar el color o colocar el código hexadecimal, esta
segunda forma siendo la más común), que el texto de los títulos h1 serán de color azul y los textos
de los párrafos de color rojo.
SINTAXIS CSS
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
Colocamos el selector, que conocemos como etiquetas en HTML, luego las llaves que nos indican
el conjunto de reglas que tendrá ese selector, seguido de la propiedad de estilo, luego dos puntos y
colocamos el valor de la propiedad, finalizando siempre con un punto y coma para separar las
propiedades.
3
Tema: HTML
Selectores en CCS
Etiquetas / atributos Selectores en CSS Ejemplo Descripción

en HTML
p p{ … } HTML: Las propiedades se
 Mi primer párrafo. ejecutarán para todos los
párrafos dentro del
CSS: documento html
p{color: red ; Font-family:
“Times New Roman”}
class . HTML: Si definimos una clase en
nombre_de_la_class Mi HTML, debemos colocar
primer párrafo. un punto en el CCS
seguido del nombre de la
CSS: clase para que se pueda
.parrafo1{Font-size: 20%} reconocer.
id #nombre_del_id HTML: Si definimos un id en

 Mi primer HTML, debemos colocar
párrafo. un numeral en el CCS
seguido del nombre de la
CSS: clase para que se pueda
#parrafo{color : #fffffff} reconocer.
Todos * *{Font-family : times} Si colocamos un asterisco
en el CSS estaremos
definiendo que las
propiedades se les aplicará
a todos los elementos del
documentos HTML
4
Tema: HTML
En CSS también se puede agrupar a varios selectores si estos contienen las mismas propiedades.
Ejemplo:
En el ejemplo, a los elementos h1, h2 y p se les está asignando que el texto esté alineado en el
centro y la letra sea de color rojo.
Esto sirve para no tener que repetir las mismas propiedades tantas veces sino que agrupando a los
selectores, separados por comas, se les aplique las mismas propiedades.
5
Tema: HTML
Propiedades más comunes en CSS

Característica Propiedad Valor/es Descripción
Fondo 1. background-color 1. red 1. El fondo será de color rojo sólido
2. background-image 2. URL(image.png) 2. El fondo será una imagen, cuya
dirección es “image.png”
Margen 1. margin-top
2. margin-right Siempre utilizaremos el Los márgenes superior, derecho, inferior
3. margin-bottom “%” para indicar el y/o izquierdo tendrán el valor que
4. margin-left valor. indiquemos.
Ancho 1. width Siempre utilizaremos el El ancho o ancho máximo tendrán el
2. max-width “%” para indicar el valor que indiquemos.
valor.
Alto 1. height Siempre utilizaremos el El alto o alto máximo tendrán el valor que
2. max-height “%” para indicar el indiquemos.
valor.
Texto 1. color 1. #ffffffff 1. El color del texto será del código
2. font-family 2. times, verdara hexadecimal indicado.
3. text-align 3. left / right / center 2. El estilo de fuente será times, sino
verdana.
3. Debemos especificar si la alineación
del texto será a la izquierda, derecha
o centrada (sólo se puede colocar un
valor)

Guía Teórica CSS: Usos Del CSS en El HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Guía Teórica CSS: Usos Del CSS en El HTML

Cargado por

Copyright:

Formatos disponibles

Instituto Técnico “Jesús Obrero”

Informática II – 5to año

Guía teórica CSS

Usos del CSS en el HTML

CSS se puede agregar a documentos HTML de 3 formas:

 Inline : mediante el uso del styleatributo dentro de los elementos HTML

Un ejemplo de la codificación de una página CSS es:

Un conjunto de reglas CSS consta de un selector y un bloque de declaración:

Etiquetas / atributos Selectores en CSS Ejemplo Descripción

id #nombre_del_id HTML: Si definimos un id en

Propiedades más comunes en CSS

También podría gustarte