Diseño Web CSS

CSS
Hasta el momento vimos como crear la estructura de una página web con HTML, ahora con CSS podremos dar o
modificar el estilo de esa página.
Como HTML, CSS (Cascading Style Sheets) u Hojas de estilo en cascada en español, no es realmente un
lenguaje de programación, tampoco es un lenguaje de marcado. Es un lenguaje de hojas de estilo, es decir, te
permite aplicar estilos de manera selectiva a elementos en documentos HTML.
Es un lenguaje basado en reglas, estás reglas determinarán el estilo que se aplicará a un elemento o a un grupo
de elementos determinados.
Existen 3 formas de escribir estás reglas:
1- Estilos en línea.
2- <style> </style>
3- Archivo .CSS
1- El estilo en línea se añade directamente a la etiqueta de apertura del elemento HTML.

Ejemplo:
<h2 style="color: blue"> Titulo </h2>
De está manera nuestro titulo cambiara a texto azul.
2- Añadimos el elemento <style> en <head> para describir el estilo

Ejemplo:
<head>
<style>
h2 { color: blue;
}
</style>
</head>
3- Crear un archivo .css para definir los estilos de la pagina. Luego combinar nuestro .css con el .html
para se apliquen las modificaciones en la pagina web.
Para realizar esto colocaremos el archivo .css en el <head> de nuestro html.
El atributo rel hace refernecia a la relación entre el archivo y nuestro código html. En este caso:
stylesheet significa hoja de estilo. Es una hoja que aplicará un estilo a nuestra pagina.
Selectores CSS:
Los selectores definen sobre que elementos se aplicara un conjunto de reglas css.
Existen distintos tipos de selectores:
 Selector de tipo: selecciona todos los elementos del mismo tipo y aplica las reglas.
Si colocamos una regla para el elemento p todos los párrafos de nuestro código se modificarán.
 Selector Universal: selecciona a todos los elementos del código y les aplica las reglas.
Sintaxis:
*{
Color: "purple";
}
 Selector de clases: selecciona a todos los elementos que tienen el atributo de class especificado
.Nombre del class {
Color: "purple";
}
 Selector id: selecciona un elemento específico basado en el valor de su atributo id.
Para seleccionar un elemento se utiliza el carácter # seguido del valor del atributo id
Ejemplo:
#mi-elemento{
Color:"purple";
Font-size: 16px;
}
Anatomía de una regla CSS

Una regla CSS se compone de tres partes:
1. Selector: especifica el o los elementos html al que se aplicará la regla
2. Propiedad: describe la característica que se quiere cambiar en el elemento HTML.
3. Valor: define el valor de la propiedad que se aplicará al elemento HTML.
Es importante saber que una regla puede contener una o varias propiedades, separadas por punto y coma ( ; ). También
puede haber varias reglas que se apliquen al mismo selector.
Propiedades
Se utilizan para definir la apariencia y el diseño de los elementos de una página web. Personalizan la presentación
visual de un sitio web. Existen muchas propiedades que nos permitirán entre otras cosas personalizar el tamaño de la
fuente, el espaciado entre los elementos, el posicionamiento de los elementos, los bordes, los efectos de animación y
transición, etc.
Background- color
Establece el color de fondo de un elemento.

El fondo de un elemento es el tamaño total del elemento, incluido el relleno y el borde (pero no el margen).
Color
Modifica el color del texto.
Font-family
Especifica el tipo de fuente (tipo de letra).
Ya entendiendo el concepto de como se aplica la propiedad a cada elemento podemos ver más propiedades con sus
posibles valor, recordando siempre la sintaxis para escribir una propiedad.
Font-size: 30px;
Está propiedad establece el tamaño de la fuente. (texto) y se modificará según el valor que le demos, en este caso es
30px pero puede ser más o menos.
Height: 50px;
La propiedad indica la altura de un elemento. También su valor puede ser indicado con el porcentaje que ocupará,
50% por ejemplo.
Margin: 20px;
El margen es la distancia entre el borde de un elemento y otro elemento.
Padding: 15px;
El padding es el espacio entre el
Es el espacio de relleno entre un elemento y su borde.
borde de el elemento y su centro.
Mientras que el margin es la

distancia el borde y otro elemento.
elemento Es decir uno es la distancia del

borde hacia adentro y el otro del
borde hacia afuera.
Border: 1px solid red;
Con está propiedad le daremos al borde del elemento 3 valores,
El primero el grosor de la línea (expresados en px), el segundo indica que tipo de borde será y el tercero le dará un
color especifico.
Tipos de bordes:
Solid: una línea solida.
Dotted: muestra una serie de puntos redondeados.
Dashed: una serie de guiones al rededor del elemento (línea discontinua).
Double: dos líneas.
Border-radius: 15px;
Está propiedad le da un efecto redondeado a las esquinas de los elementos. Su valor puede ser expresado en px o %.
Todos los valores expresados en px (pixeles) o % son modificables, los valores que vemos acá son solo a modo de
ejemplo. La mayoría de los valores se pueden expresar tanto en px como en %,
Width: 45px; (también se puede expresar en %)
Modificará el ancho que ocupa un elemento en la página. Muchas veces colocamos una imagen y nos ocupa más
espacio del deseado, podemos adaptarla a nuestra página modificando su ancho.

Diseño Web CSS

Cargado por

Copyright:

Formatos disponibles

Diseño Web CSS

Cargado por

Información del documento

Descripción 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

Diseño Web CSS

Cargado por

Copyright:

Formatos disponibles

CSS

1- El estilo en línea se añade directamente a la etiqueta de apertura del elemento HTML.

2- Añadimos el elemento <style> en <head> para describir el estilo

Anatomía de una regla CSS

Establece el color de fondo de un elemento.

Modifica el color del texto.

Especifica el tipo de fuente (tipo de letra).

El margen es la distancia entre el borde de un elemento y otro elemento.

Mientras que el margin es la

elemento Es decir uno es la distancia del

Con está propiedad le daremos al borde del elemento 3 valores,

Solid: una línea solida.

Dotted: muestra una serie de puntos redondeados.

Dashed: una serie de guiones al rededor del elemento (línea discontinua).

Double: dos líneas.

Width: 45px; (también se puede expresar en %)

También podría gustarte