Computación

9no. Grado

Lenguaje CSS

Cascading Style Sheets

Actividad 9b

CSS | Hojas de Estilo en Cascada

Sintaxis y Elementos CSS

Reglas de Estilo

Propiedades o Estilos

Estructura

Selector ejemplo: body {

Bloque de Declaraciones entre llaves { }

Propiedad y Valor ejemplo: backgroud-color: blue;

Separador de Declaraciones ;

Sintaxis

Regla:

selector {

propiedad: valor;

}

Estructuras de llamadas a CSS

En Encabezado

Selector a Etiqueta html (ejemplo header) en bloque <style></style>

<html>

<head>

<style>

header {

background-color: #333;

}

</style>

</head>

<body>

<header><h1>Título de Contenido</h1></header>

</body>

<html>

Selector a Clase definida en atributo html (ejemplo .parrafo)

<html>

<head>

<style>

.parrfo {

font-family: verdana;

}

</style>

</head>

<body>

<p class="parrafo">Texto de Contenido</p>

</body>

<html>

Selector a Id definido en atributo html (ejemplo #parrafo)

<html>

<head>

<style>

#parrfo {

font-size: 14px;

}

</style>

</head>

<body>

<p id="parrafo">Texto de Contenido</p>

</body>

<html>

En CSS en línea

<p style="font-family: Verdana;">Texto de Contenido</p>

<p>Texto de <span style="color: red;">Contenido</span> en un párrafo.</p>

En Archivo CSS externo

En el archivo.html

<html>

<head>

</head>

<body>

<p>Texto de Contenido </p>

</body>

<html>

En el archivo estilos.css

p {

text-align: center;

}