Scribd
Cargar
46 vistas35 páginas

05-Estilos CSS Con La Etiqueta Style

El documento explica tres formas de agregar estilos CSS a páginas web: 1) Usando el atributo style dentro de etiquetas HTML, 2) Usando la etiqueta <style> dentro de <head>, y 3) Usando clases CSS. La etiqueta <style> permite definir estilos por separado del HTML. Las clases CSS (class=) permiten estilar elementos individuales de forma independiente.

Cargado por

Camila Reyes
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
46 vistas35 páginas

05-Estilos CSS Con La Etiqueta Style

El documento explica tres formas de agregar estilos CSS a páginas web: 1) Usando el atributo style dentro de etiquetas HTML, 2) Usando la etiqueta <style> dentro de <head>, y 3) Usando clases CSS. La etiqueta <style> permite definir estilos por separado del HTML. Las clases CSS (class=) permiten estilar elementos individuales de forma independiente.

Cargado por

Camila Reyes
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 35

DÁNDOLE ESTILOS A NUESTRO PROYECTO

Hay tres formas de darle vida a nuestro proyecto mediante lo que conoceremos de ahora en
adelante como estilos CSS.

La primera forma la conocimos en el documento anterior “MATERIAL DE APOYO


FUNDAMENTOS HTML”. Pudimos observar que a una etiqueta HTML le podemos dar estilos si
agregamos el atributo style=” ” dentro de la apertura de nuestra etiqueta:

De acuerdo a lo anunciado anteriormente, el color de fondo de nuestra página será azul, el color
de texto del título será blanco con una fuente ALGERIAN y el color de nuestro párrafo será
plateado con un tamaño de fuente de 15px:

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Ésta es la primera forma en que podemos agregar estilos CSS a nuestras páginas por medio del
atributo style=” ” pero es de las formas menos usadas en nuestro entorno.

La segunda forma de dar estilos CSS es por medio del uso de la etiqueta <style></style> pero
¿Dónde colocamos esta etiqueta?

<style></style>
Esta etiqueta nos permite manejar nuestros estilos CSS por aparte de nuestro código HTML.
Funciona como una etiqueta normal con una apertura, un contenido y un cierre, tiene la
particularidad de solo aceptar propiedades CSS y al ser una información diferente a HTML a pesar
de ser algo visual para el usuario se agrega dentro la etiqueta <head></head>

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Así podremos obtener el mismo resultado que si usamos el atributo style=” ” pero notamos que
manejamos por aparte CSS y HTML, teniendo más orden al codificar nuestra página.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
ENTENDIENDO CSS
El CSS es el lenguaje que nos permite dar color y toda clase de estilos a nuestras etiquetas de
HTML para así poder darle vida a nuestro sitio web. Desde efectos de colores en botones hasta
slider, CSS es el aliado perfecto para que nuestro sitio web llame la atención de todos los
internautas que visiten nuestro sitio web.
CSS se maneja por medio de selectores, propiedades y valores. Su estructura se maneja de la
siguiente forma:

selector {
propiedad: valor;
}

Una clara diferencia entre HTML y CSS son las llaves y el cierre.
Mientras que una etiqueta HTML usa signos mayor y menor que y en su cierre contiene un slash

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
<body> </body> en CSS usamos llaves y al terminar una propiedad con su respectivo valor,
cerramos con punto y coma ; para finalizar nuestra instrucción de estilos.

● Selector
El selector será la etiqueta que deseamos modificar. Después de cada selector abrimos y
cerramos nuestras llaves {} para no tener inconvenientes, dentro de estas colocaremos
nuestro contenido, es decir, nuestras propiedades CSS para esa etiqueta (selector) a la cual
deseamos dar estilos. En este ejemplo, nuestro selector es la etiqueta <body> y como
vemos no tenemos la necesidad de colocar los signos menor que < y mayor que > para
usarla en nuestro CSS.
Un selector puede tener varias propiedades

● Propiedad
La propiedad se coloca dentro de las llaves de nuestro selector y cumple la función de ser el
estilo que deseamos cambiar en nuestro etiqueta.
Cada propiedad debe ir seguida de dos puntos : pues de lo contrario no nos funcionará
nuestra instrucción CSS y cada propiedad finaliza con punto y coma ; esto para irnos
acostumbrando a cerrar cada línea de programación que nosotros realicemos pues es muy
fácil pasar por alto un cierre y que nuestro código no funcione.

Un selector pude tener varias propiedades pero una propiedad no siempre puede tener
más de un valor, solo algunas propiedades que veremos a lo largo del curso cuentan con la
particularidad de contener varios valores.

NOTA: Como un selector puede tener varias propiedades, cada una de estas debe estar
separada por punto y coma ;
Si bien nuestra última instrucción que vamos a dar de CSS funciona sin el punto y
coma ; es recomendable por estandares de programación cerrar cada instrucción
sin importar si es HTML, CSS, JavaScript o un lenguaje robusto como JAVA, PHP etc.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
● Valor
El valor será aquel dato en específico que queremos que cambie nuestra etiqueta, es decir,
responde a la pregunta que como diseñadores web nos haremos en el momento.
ej:
¿Qué color quiero que tenga mi título?: Blanco en hexadecimal (#FFFFFF o #FFF)

¿Qué tipo de fuente quiero que tenga mi título?: Algerian

El valor se coloca entre los dos puntos : que siguen a la propiedad y el punto y coma ;
que finaliza nuestra línea de CSS o instrucción de estilo.

CSS reconoce el selector como un todo, es decir, si le especificamos que vamos a editar el
contenido de un <h1></h1> nos va a editar todo lo que se llama como h1

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Como vemos, tenemos varias etiquetas <h1></h1> cada una con un contenido diferente.
En la etiqueta <style></style> queremos editar estos elementos y al llamarlos h1 CSS colocará el
color de texto rojo y un tipo de fuente Algerian a todos mis <h1></h1>

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Pero, yo no quiero que ellos tengan los mismos estilos, ¿Es posible manejar cada etiqueta de
forma independiente? El matrimonio de CSS y HTML me permite manejar cada elemento de
forma global o de forma independiente usando el atributo class=” ”

Como sabemos los atributos son propios de HTML y estos van dentro de la apertura de nuestra etiqueta

ATRIBUTO CLASS
El atributo class=” ” me permite dar un nombre, apodo a una etiqueta en especial para poder
manejar sus estilos de forma independiente.
Se coloca en la apertura de la etiqueta HTML y si deseo modificar su estilo CSS su selector ya no
será la etiqueta sino el apodo que digitamos dentro de class=” ” siendo antecedida de un punto y
este apodo tiene que estar escrito exactamente igual tanto en el CSS como en el HTML

Usando una clase en CSS

.apodo {
propiedad: valor;
}

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Usando una clase en HTML
<etiqueta class=”apodo”> contenido </etiqueta>

De esta forma puedo dar estilos de manera independiente a mis etiquetas sin que un selector
global afecte a aquella que yo quiero manejar aparte del resto

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Mi <h1 class=”hola”>Hola</h1> tendrá un color y una fuente diferente a la ya establecida por mis
h1 en CSS gracias a que estoy usando el nombre o apodo que le di con class=”hola” y con .hola

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Puedo usar sin ningún problema la misma clase (su mismo nombre) en las etiquetas que yo quiera
que tengan esos estilos y así ahorrarme líneas de CSS.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
No importa que esté usando una etiqueta distinta a <h1></h1> puedo tranquilamente usar sus
estilos manejando su class=” ”, este nombre NO es propio de una sola etiqueta, sino que es de uso
para todas las etiquetas que yo quiera que tengan ese tipo de estilo.

Gracias al atributo class=” ” puedo colocar la cantidad de nombres o apodos que yo quiera a una
etiqueta, es decir, puedo tener varias clases y usar dichos estilos propios de esa clase y seguir

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
ahorrando líneas de código CSS sin la necesidad de crear un estilo para cada etiqueta si así lo
deseamos. Cada nombre o apodo se separa solo con espacio en la clase.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
DANDO ESTILO A NUESTRO TEXTO
Como sabemos a un texto puedo cambiarle el color, tamaño de fuente, tipo de fuente con las
siguientes propiedades:

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
● color:
Esta propiedad cumple la función de dar color a nuestro elemento de texto. Recibe valores
de tipo name white, red, blue, yellow.

color: red;

Tipo Hexadecimal #FFFFFF, #FF0000, #0000FF, #FFFF00.

color: #FF0000;

Tipo rgb()

color: rgb(255, 0, 0);

Tipo rgba()

color: rgba(255, 0, 0, 0.5);

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
● font-family:
Con esta propiedad podremos modificar el tipo de fuente que queremos que nuestro
elemento de texto tenga. Es crucial e indispensable que el valor que se agregue acá sea el
nombre exacto de nuestra fuente deseada.

font-family: ALGERIAN;

Esta propiedad nos permite también indicarle a nuestro sitio web un orden de prioridades
para nuestra fuente, es decir, si el navegador no tiene la primera fuente que deseamos, que
use entonces la segunda y así sucesivamente. A continuación un ejemplo para esta clase de
instrucción.

font-family: ALGERIAN, Bauhaus 93, Calibri;

Nuestra fuente deseada en primer lugar es la fuente ALGERIAN, separando por comas, le
indicamos al navegador que si no encuentra el tipo de fuente ALGERIAN, entonces que use
la segunda fuente escrita, en este caso, Bauhaus 93, si el navegador no encuentra esta
fuente entonces que use Calibri. Finalmente si el navegador no encuentra ninguna de estas
fuentes, nuestro texto se verá en Arial, que es la fuente por defecto que el navegador
maneja.

● font-size:
Esta propiedad nos va a permitir darle tamaño a nuestra fuente. Recibe como valor la
medida px (pixel / pixeles).

font-size: 30px;

Conoceremos ahora nuevas propiedades CSS para nuestros textos

text-align:
Con la propiedad text-align (alinear texto) podremos colocar el texto en el lugar de la página que
queramos. Recibe valores center, right, left, justify. Por defecto, el texto siempre se alinea a la
izquierda de nuestra pantalla o de un div.

Con el valor center podemos colocar mi texto en el centro de mi pantalla o de un div

text-align: center;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Con el valor right podemos colocar nuestro texto a la derecha de la pantalla o de un div

text-align: right;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
PROPIEDAD MARGIN
Gracias a CSS también podemos editar las márgenes de un elemento ya sean videos, imágenes,
texto, divs, etc. Con la propiedad CSS margin podremos lograrlo.

La propiedad margin tiene la particularidad de aceptar uno o más valores aportando mayor
comodidad para los diseñadores web ampliando una gama de variedades en nuestra codificación.
Agregaremos una imagen para divisar bien los ejemplos para el uso de cada una de las márgenes:

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Existen varios parámetros a tener en cuenta a la hora de usar esta propiedad:

● Un solo valor:
Usando la propiedad CSS margin e indicando un solo valor, decimos a nuestro sitio web que
el elemento tendrá dicho valor en sus 4 lados de las márgenes (arriba, derecha, abajo,
izquierda)
margin: 50px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Hemos colocado un margen a nuestra caja de 50px que dar un margen de 50px arriba,
50px a la derecha, 50px abajo y 50px a la izquierda, desplazando nuestra caja un poco más
del div en el cual está contenida.

● Dos valores:
Al indicar dos valores a nuestro margin, decimos a nuestro sitio web que el elemento
tendrá dicho valor en sus 4 lados de las márgenes de la siguiente forma: El primer valor
afectará a las márgenes de arriba y abajo y el segundo valor afectará a las márgenes
izquierda y derecha.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Los diferentes valores se separan solo con espacio, no hay necesidad de separarlos con
comas, puntos o cualquier otro separador.

margin: 50px 10px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Hemos indicado ahora que nuestra caja tendrá un margin con dos valores, 50px y 10px. El
primer valor, en este caso 50px afectará solo a las márgenes de arriba y abajo y el
segundo valor, en este caso 10px afectará solo a las márgenes izquierda y derecha.

Las márgenes se desplazan en el sentido del reloj siendo el primer valor siempre el
correspondiente de la margen superior y el segundo valor el correspondiente a la margen
derecha.

Nuestra caja se ha desplazado ahora de manera significativa en las márgenes de arriba y


abajo pero muy poco a su costado izquierdo y derecho.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
A pesar de que la medida lateral de la margen está en px para poder demostrar el ejemplo
con mayor precisión, cabe recordar y destacar que si queremos que nuestra margen haga
parte de una adaptación a cualquier pantalla y siguiendo la premisa de que cada vez que
modifiquemos una anchura esta debe usarse en porcentaje % , con esta margen lateral de
px la cambiaríamos a % para su correcto responsive design

margin: 50px valor%;

Acá la clave es jugar con los valores pues si colocamos 10% será muchísimo más alejado del
borde del contenedor que los 10px que teníamos antes. Todos nosotros como diseñadores
debemos confiar en nuestro gusto y en nuestro juego pero debemos seguir los parámetros
indicados para que todos nos funcione, para la creatividad no hay un patrón a seguir.

● Tres valores:
Al indicar tres valores a nuestro margin, decimos a nuestro sitio web que el elemento
tendrá dicho valor en sus 4 lados de las márgenes de la siguiente forma: El primer valor
afectará a la margen de arriba, el segundo valor afectará a las márgenes izquierda y
derecha y el tercer valor afectará a la margen de abajo.

Los diferentes valores se separan solo con espacio, no hay necesidad de separarlos con
comas, puntos o cualquier otro separador.

margin: 50px 10px 5px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Hemos indicado ahora que nuestra caja tendrá un margin con tres valores, 50px, 10px y
5px. El primer valor, en este caso 50px afectará solo a las márgenes de arriba. El segundo
valor, en este caso 10px afectará solo a las márgenes izquierda y derecha y el tercer
valor, en este caso 5px afectará solo la margen de abajo.
Las márgenes se desplazan en el sentido del reloj siendo el primer valor siempre el
correspondiente de la margen superior y el segundo valor el correspondiente a la margen
derecha.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
A pesar de que la medida lateral de la margen está en px para poder demostrar el ejemplo
con mayor precisión, cabe recordar y destacar que si queremos que nuestra margen haga
parte de una adaptación a cualquier pantalla y siguiendo la premisa de que cada vez que
modifiquemos una anchura esta debe usarse en porcentaje % , con esta margen lateral de
px la cambiaríamos a % para su correcto responsive design

margin: 50px valor% 5px;

Acá la clave es jugar con los valores pues si colocamos 10% será muchísimo más alejado del
borde del contenedor que los 10px que teníamos antes. Todos nosotros como diseñadores
debemos confiar en nuestro gusto y en nuestro juego pero debemos seguir los parámetros
indicados para que todos nos funcione, para la creatividad no hay un patrón a seguir.

● Cuatro valores:
Al indicar los cuatros valores a nuestro margin, decimos a nuestro sitio web que el
elemento tendrá dicho valor en sus 4 lados de las márgenes de la siguiente forma: El
primer valor afectará a la margen de arriba, el segundo valor afectará a la margen de la
derecha, el tercer valor afectará a la margen de abajo y el cuarto valor afectará a la margen
izquierda.

Los diferentes valores se separan solo con espacio, no hay necesidad de separarlos con
comas, puntos o cualquier otro separador.

margin: 50px 10px 5px 200px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]
www.bit.institute
A pesar de que la medida lateral de la margen está en px para poder demostrar el ejemplo
con mayor precisión, cabe recordar y destacar que si queremos que nuestra margen haga
parte de una adaptación a cualquier pantalla y siguiendo la premisa de que cada vez que
modifiquemos una anchura esta debe usarse en porcentaje % , con estas márgenes
laterales de px las cambiaríamos a % para su correcto responsive design

margin: 50px valor% 5px valor%;

Acá la clave es jugar con los valores pues si colocamos 10% será muchísimo más alejado del
borde del contenedor que los 10px que teníamos antes. Todos nosotros como diseñadores
debemos confiar en nuestro gusto y en nuestro juego pero debemos seguir los parámetros
indicados para que todos nos funcione, para la creatividad no hay un patrón a seguir.

Con la propiedad margin podremos indicar a gusto y comodidad cada margen bajo nuestro control
de acuerdo al valor que queramos, pero también para mayor facilidad CSS nos ofrece propiedades
para cada margen, dando paso a margin-top, margin-left, margin-right y margin- bottom.

De acuerdo con la funcionalidad de margin y que cada valor se asigna de acuerdo al sentido de las
manecillas del reloj, podremos estipular lo siguiente:
Queremos usar solo la margen superior

margin: 50px 0px 0px 0px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Esto es correcto y funcional, no presenta ningún problema, pero para aquellos que no quieren
manejar cada uno de los px por aparte usamos la siguiente propiedad:

margin-top: 50px;

Esto es exactamente igual y funciona perfectamente, ¿Cuándo lo usamos? Depende de cada


diseñador, no hay un estándar aplicado para esta propiedad o la anterior.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Queremos usar solo la margen derecha

margin: 0px 10px 0px 0px;

Esto es correcto y funcional, no presenta ningún problema, pero para aquellos que no quieren
manejar cada uno de los px por aparte usamos la siguiente propiedad:

margin-right: 10px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Esto es exactamente igual y funciona perfectamente, ¿Cuándo lo usamos? Depende de cada
diseñador, no hay un estándar aplicado para esta propiedad o la anterior.

Tener en cuenta que, por ser una margen lateral, debe ir en % porcentaje para que sea adaptable a la
pantalla de cualquier dispositivo.

Queremos usar solo la margen inferior

margin: 0px 0px 5px 0px;

Esto es correcto y funcional, no presenta ningún problema, pero para aquellos que no quieren
manejar cada uno de los px por aparte usamos la siguiente propiedad:

margin-bottom: 5px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Esto es exactamente igual y funciona perfectamente, ¿Cuándo lo usamos? Depende de cada
diseñador, no hay un estándar aplicado para esta propiedad o la anterior.

Queremos usar solo la margen izquierda

margin: 0px 0px 0px 200px;

Esto es correcto y funcional, no presenta ningún problema, pero para aquellos que no quieren
manejar cada uno de los px por aparte usamos la siguiente propiedad:

margin-left: 20px;

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute
Esto es exactamente igual y funciona perfectamente, ¿Cuándo lo usamos? Depende de cada
diseñador, no hay un estándar aplicado para esta propiedad o la anterior.

Tener en cuenta que por ser una margen lateral, debe ir en % porcentaje para que sea adaptable a la
pantalla de cualquier dispositivo.

BIT - Bogotá Institute of Technology SAS |  Cra. 13 # 54-55 Of 420 | [email protected]


www.bit.institute

También podría gustarte