¿QUÉ ES UNA HOJA DE ESTILOS?
Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que
definimos el formato que va a tomar un determinado elemento de una
página web.
Siglas CCS significa "Cascading Style Sheets" (Hojas de Estilo en
Cascada), funcionan aplicando reglas de estilo a los elementos HTML,
entre las que incluyen, tamaño, color de fondo, color del texto, posición
de los elementos, márgenes, tipos de letra, entre otras. Quedando de
esta manera toda lo que tiene que ver con la parte gráfica de la web,
separada completamente de la estructura del HTML.
1
CREACIÓN DE LA HOJA DE ESTILOS
Existen varias formas de aplicar estilos CSS a una página, el más
recomendado y utilizado es creando un archivo que tendrá extensión
.css, el cual se debe guardar en una subcarpeta de llamad estilos o
CCS (tenga en cuenta que esta subcarpeta se almacena dentro de la
carpeta raíz del sitio)
En este caso hemos creado el archivo estilos.css y fue almacenado en
la carpeta css del sitio ejemplo
Luego de crear el archivo CSS, se debe vincular con las paginas HTML
que forman el sitio, con el fin de aplicarle los formatos a todas ellas.
Para ello se realiza lo siguiente:
Abrir el archivo HTML al que se le desea vincular la hoja de estilos
(Tenga en cuenta que esto se debe realizar a cada página HTML que
forma el sitio)
Dentro de la etiqueta <head> digite el siguiente código:
<link href="carpeta/archivo.css" rel="stylesheet"
type="text/css">
La etiqueta <link> define un enlace entre el documento y algún recurso
externo.
El elemento link debe ser ubicado en la sección head del documento. La
cual se acompaña de los siguientes atributos:
• href permite referenciar el archivo que se desea vincular.
• rel describe la relación entre el documento y el destino del enlace.
En este caso permitirá que los navegadores soporten de forma
completa la hoja de estilos o “stylesheet”.
• type="text/css"> se utiliza para especificar el tipo de hoja de
estilo que se utilizará.
2
En nuestro ejemplo, abrimos el archivo index.html y realizamos la
vinculación de la hoja estilos de la siguiente manera, tenga en cuenta la
ruta donde se encuentra ubicada el archivo CSS:
SINTAXIS DE LAS REGLAS CSS
En la sintaxis de las reglas CSS se deben tener en cuenta tres elementos
que la forman:
Atributos
Son las palabras que se utilizan para indicar cual estilo queremos
modificar, por ejemplo, si queremos cambiar el tipo de letra, usamos el
atributo "font", si es el fondo, el atributo "background", entre otros.
Valores
Se utilizan para definir cómo se va a modificar el atributo, o la propiedad
que se le dará. Por ejemplo, si se desea que un tipo de letra sea rojo, se
utiliza el atributo "font" y el valor "red".
Selectores
Se usan para definir sobre cuales elementos HTML se van a aplicar los
estilos, si se desea definir un estilo para toda la página, se debe usar el
selector "body" que se refiere a la etiqueta <body> del documento
HTML. Hay tres tipos de selectores:
a. Los selectores de etiquetas HTML, se utilizan escribiendo el
nombre de la etiqueta a la que se le aplicará el estilo.
b. Los selectores de identificador, se usan para aplicar estilos
solo a las etiquetas identificadas con un nombre.
c. El selector clase, se escribe en el documento CSS comenzando
con un punto "." seguido del nombre que se le desea poner a la
clase, por ejemplo: .mi_clase
3
Para comenzar a trabajar con las reglas de estilos, se debe tener en
cuenta que éstas comienzan con una llave { y debajo de ella se colocan
los atributos, seguidos de dos puntos : y luego el valor seguido de punto
y coma ; al final de todo se cierra el estilo para el selector con el cierre
de llave }
Se pueden definir tantos atributos con sus respectivos valores como se
desee, separándolos con un espacio o un enter.
En CSS se deben escribir los atributos y valores en minúsculas y los
comentarios se encierran con /* para abrir y */ para cerrar.
ESTILOS A ETIQUETAS HTML
Es la forma más fácil pero menos recomendada para aplicación de
estilos a un documento HTML. Se definen utilizando el atributo <style>
y definiendo las características que tendrá dentro del documento.
Cuando utilizamos el atributo <style> le indicamos al código donde
comienza y donde termina el objeto que será afectado por el código.
Por ejemplo si se desea aplicar formatos de fuente a un título que se
encuentre entre una etiqueta <h1> el código sería:
Si se dese aplicar formatos de fuente a un párrafo, utilizamos la misma
forma que hemos venido realizando durante todo el curso, así:
En ambos casos el resultado sería:
4
ESTILOS CSS A MARCADORES
Para comenzar a utilizar reglas en la hoja de estilos, crearemos un
documento HTML con el siguiente código, el cual solo tiene las etiquetas
del código para estructurar su contenido, no se utilizaron etiquetas de
formato para los textos ni fondos. También se ha vinculado a la página,
la hoja de estilos, llamada estilos.css
5
En vista previa, el documento se observaría de la siguiente manera:
Para comenzar, vamos a crear una regla para aplicar color de fondo a la
página. Para ello abrimos el archivo de la hoja de estilos y creamos el
siguiente código:
Donde:
• Body: es el selector o etiqueta al que se le aplicará la regla.
• Background: es el atributo que tendrá la regla, se debe
acompañar de dos puntos : y luego se coloca el valor, en este
caso será un código hexadecimal para el color elegido. Se finaliza
con un punto y coma ;
6
Al abrir la página en vista previa, el resultado será:
De esta forma podemos aplicar formatos a los diferentes elementos que
forman la página, utilizando reglas CSS. Por ejemplo se puede crear una
regla para que todos los textos, que sean referenciados por la etiqueta
<h1> tengan un formato especial, así:
En este caso, el selector será la etiqueta <h1>, con los siguientes
atriutos:
font-family: verdana; Tipo de fuente verdana
font-size: 24px; Tamaño de fuente 24 puntos
•
•
• color: #F5DEB3; Color de la fuente
• background-color: #8B4513; color de fondo para el texto
7
El resultado sería:
Utilizando el atributo text-align: y su respectivo valor de alineación
(center, left, right o justify) se pueden alinear los elementos de la
página. Por ejemplo si se desean centrar los títulos creados con la
etiqueta <h1> se realiza lo siguiente:
En vista previa se podrá observar de la siguiente manera:
8
Es importante tener en cuenta, que si en el código de la página se
inserta otra etiqueta <h1>, el texto de ésta, tendrá el mismo formato
que se indicó en la regla para los selectores <h1>. Por ejemplo,
agreguemos un nuevo <h1> en el código, así:
El resultado en vista previa será:
En este ejercicio que estamos realizando, podemos aplicarle formato
específico a los textos que forman los párrafos, los cuales están
delimitados por la etiqueta <p>, permitiendo que todos los textos
comprendidos en esta etiqueta queden con un formato específico. Por
ejemplo:
9
El resultado sería:
Es importante tener en cuenta que en temas anteriores, utilizamos la
etiqueta <span> acompañada del atributo style para aplicar formatos,
éstos se pueden utilizar para enfatizar algún elemento del texto que
este afectado por el estilo CSS de la etiqueta <p>, por ejemplo: en el
primer párrafo queremos que el texto “Una hoja de estilo en cascada
(CSS)” ubicado en el primer renglón del párrafo, aparezca en otro color
y tamaño de fuente, para ello entonces utilizamos el siguiente código:
La etiqueta <span> debe comenzar a digitarse antes del texto que se
desea afectar, en este caso: “Una hoja de estilo en cascada (CSS)”,
y se debe cerrar </span> donde termine el texto. El resultado será:
10
A las imágenes también se pueden aplicar estilos, con el fin de que
todas las imágenes que forman el sitio, tengan las mismas propiedades.
Por ejemplo, hemos insertado dos imágenes a nuestra página (las
cuales hemos almacenado con anterioridad en la carpeta img del sitio).
Como se puede observar en vista previa, las imágenes tienen diferentes
tamaños:
11
Para mejorar la ancho y alto de todas las imágenes que se insertaran en
el sitio, se crea un estilo para que se aplique al selector <img>, así:
El resultado será:
12
Se pueden aplicar otros tipos de propiedades a las imágenes, así:
Donde:
un color sólido.
• Border-syle: solid; se utiliza para que el borde de la imagen sea
• Border-width; se utiliza para dar un grosor al borde de la
imagen, en este caso se utilizarán 10 pixeles.
• Border-color; permite aplicarle un color al borde de la imagen.
13
El resultado será:
Además se puede indicar que el borde de la imagen tenga un borde
redondeado, utilizando el atributo border-radius: y un valor en pixeles,
a mayor valor, mas redondeado será el borde, por ejemplo:
En vista previa podrá observarse de la siguiente manera:
14
Para ampliar el espacio que se encuentra entre la imagen y el borde se
puede utilizar el atributo padding: con su respectivo valor en pixeles. A
mayor valor, el espacio será más amplio, observe:
El resultado será:
15
Crear cuenta
Comentarios de: Hoja de Estilos - Selector de etiqueta (0)
No hay comentarios