CSS PDF

INTRODUCCIÓN AL CSS.
QUE SIGNIFICA CASCADING STYLE

SHEETS.
CSS es el acrónimo de Cascading Style Sheets. Lo que en castellano vendría a ser

Hoja de Estilos en Cascada.
CSS vienen a ser el conjunto de reglas que indican a un navegador web como debe
interpretar una página web a nivel de visualización.
«Tu eres un párrafo en mayúsculas«.
«Este otro es un enlace de color rojo y en cursiva«
«Estos 2 contenedores tienen un ancho del 50% y deben estar uno al lado del otro
para dar 2 columnas«.
Etcétera.
Se denomina en cascada porqué las reglas que indican como se debe visualizar un
documento web se escriben y son leídas una tras otra.
Una vez el ordenador ha leído todas las instrucciones entonces las procesa y
decide cuales debe obviar y a cuales debe hacer caso.
¡Ah! La extensión de los documentos CSS es .css a pesar de que veremos que hay
veces que se puede escribir directamente en el documento .html
El HTML sirve para determinar el CONTENIDO y la ESTRUCTURA web

El CSS sirve para determinar el ASPECTO VISUAL de los contenidos de una página web.
El JS sirve para determinar el COMPORTAMIENTO web.
QUE NO ES EL CSS
El CSS no es un lenguaje de etiquetas.
El CSS no es un lenguaje de programación del mismo modo que HTML tampoco lo
es.
La gran ventaja del css es que no hay que pensar mucho.
Hay una serie de instrucciones que hay que aprender y en base a ellas podemos
empezar a modificar el aspecto visual de nuestra página web.
PRIMERA TOMA DE CONTACTO CON EL CSS

En la captura de la imagen podemos ver un simple documento web con un párrafo
y un enlace.
El CSS lo veran dentro de las etiquetas <style>.
Lo que estamos indicando al documento web es que todas las etiquetas de tipo
párrafo pinten el texto rojo y que la transformen a mayúscula.
También que todas las etiquetas de tipo enlace pinten el contenido rojo, que lo
escriban en cursiva y que además quiten el subrayado.
Al margen de la sintaxis y si se a puesto de una o otra forma el objetivo es hacer

una primera toma de contacto.
Fijarse en la estructura:
selector{
propiedad1: valor1;
propiedad2: valor2;
}
Resultado código sublime introductorio. No te agobies por las instrucciones, quédate con la lógica de ellas
y poco a poco lo irás asimilando.
COMO MEZCLAR CSS Y HTML. ACOPLAMIENTO CSS
Mezclar html y css es fácil si se conocen las normas.
Podemos hacerlo en línea con el html, en la cabecera del documento web y en una
hoja externa.
Veamos los 3 casos posibles.
EN LÍNEA CON EL HTML
Para mezclar html y css en línea hacemos uso del atributo style=»».
En el interior del atributo style escribimos cada una de las instrucciones separadas
de punto y coma ;.
Hay ocasiones en que no tienes más remedio que hacerlo así pero siempre que
puedas… evitar este sistema. Siempre es mejor cualquiera de los dos
mencionados a continuación.
Veamos un ejemplo.
EN EL <HEAD>
Otra posibilidad es escribir el html dentro del <head>.

Hacemos uso de la etiqueta <style>.
Es un sistema bastante cómodo cuando se está aprendiendo.
Veamos la imagen adjunta.

EN UNA HOJA EXTERNA DE EXTENSIÓN .CSS
Para desvincular al máximo html y css escribimos el siguiente html en la cabecera.
<link rel=»stylesheet» href=»url-de-la-hoja-css»>
Este sistema es el mejor de todos porqué permite una carga más eficiente del
documento web.
En el ejemplo de la imagen estamos poniendo una hoja de nombre style.css dentro

del directorio de nombre «css».
SINTAXIS CSS BÁSICA. CÓMO SE ESCRIBE EL CSS
¿Como se escribe el CSS?
Lo bueno del Cascading Style Sheets es que es un lenguaje muy lógico.
Pero como en todo lenguaje necesitamos aprender unas normas de escritura

básica. Un vocabulario y una gramática.
En el caso de las hojas estilos nos estamos refiriendo a como se escriben las
instrucciones CSS.
SINTAXIS DE UNA INSTRUCCIÓN CSS

CSS es un lenguaje descriptivo.
Se compone de instrucciones CSS.

Cada instrucción CSS consiste en un selector, una apertura a un conjunto de
instrucciones y un cierre según se representan en la imagen.
Fijarse en las llaves de apertura, los dos puntos y el punto y coma.
Es muy importante nunca olvidarse ninguno de los elementos descritos.
El punto y coma sirve para cerrar cada propiedad + valor.
Los dos puntos sirven para separar las propiedades del valor.
PROPIEDADES MÍNIMAS QUE DEBEMOS APRENDER
Existen muchas propiedades CSS.
No es necesario que las memorices todas pero si que las entiendas.
En realidad verás que existen unas pocas instrucciones que siempre son las que se
terminan utilizando para un nivel básico.
Estas son algunas de las propiedad mas conocidas y usadas de CSS:
background, border, padding, margin, width, height, box-sizing para modelo de

cajas.
display, position, float, para posicionamiento en el espacio.
color, text-decoration, font-size, font-weight, … etc
Y no muchas más… (en realidad si, pero con estas pocas de momento puedes
sobrevivir).
Luego cada una de las propiedades citadas anteriormente pueden tener cantidad
de valores distintos que también hay que aprender.
SELECTORES CSS. QUE SON Y COMO USARLOS
CSS es un lenguaje que nos permite describir el formato visual de un documento
HTML.
Determina como se visualizarán todas y cada una de las etiquetas que conforman
una página web.
Todos y cada uno de los aspectos visuales.
Esto significa que es necesario un sistema que nos permita identificar a todas y
cada una de las etiquetas de una página web.
Las herramientas que nos permiten hacer este metier son los selectores.
SELECTOR UNIVERSAL
El selector universal sirve para indicar todas las etiquetas del documento web.
Se representa con un asterisco.
*{
//instrucciones CSS
}
Usualmente se utiliza para resetear los estilos de un documento web y

asegurar el mismo visionado para todos los navegadores web.
Típicamente en muchas páginas web encontraréis la siguiente instrucción:
*{
margin:0;
padding:0;
}
SELECTOR DE ETIQUETA
El selector de etiqueta sirve afectar con unos estilos determinados todas las
etiquetas de un tipo de un documento web.
Se suelen usar para aplicar una guía de estilos en un documento web.
Se escriben de la siguiente forma:
Todos los párrafos: p{/*instrucciones CSS*/}

Todas las secciones: section{/*instrucciones CSS*/}
Todos los enlaces: a{/*instrucciones CSS*/}
Todas las imagenes: img{/*instrucciones CSS*/}
Si varias instrucciones CSS aplican los mismos estilos entonces podemos llamar
varios selectores en una misma línea.
Para hacerlo sólo debemos separarlos por comas. Por ejemplo:
Todos los títulos de un documento web.
h1,h2,h3,h4,h5,h6{/*Instrucciones CSS*/}
SELECTOR DE CLASE Y/O DE CLASE MÚLTIPLE
Cualquier etiqueta html puede tener un atributo de tipo clase.
Un misma clase puede ser por diferentes etiquetas tantas veces como se necesite.
Por ejemplo:
<span class="relevante">Un contenido cualquiera</span>

<p class="importante">Un contenido cualquiera</p>
El selector de clase siempre empieza con un punto. Es importante no

olvidarlo.
.importante{
/*instrucciones CSS que afectan a todas las etiquetas con el atributo
de clase importante*/
}
.importante.destacado{
/*instrucciones CSS que afectan a todas las etiquetas con el atributo
de clase importante y destacado al mismo tiempo*/
}
Cuando una etiqueta tiene varias clases simultáneas
<p class="importante destacado">texto de un párrafo cualquiera</p>
Entonces el selector recibe el nombre de «selector de clase

múltiple».
Es importante concatenar todas las clases con un punto y sin espacios en blanco.
SELECTOR DE IDENTIFICADOR
En cada documento web sólo puede haber (salvo error) una única
etiqueta con un determinado identificador.
El identificador se indica en html mediante el atributo id.
Por ejemplo
<div id="container"></div>
Para llamarlo mediante un selector se hace de la siguiente forma:
#container{
/*instrucciones CSS que afecta a la etiqueta con un id determinado*/
}
Aunque parezca rebuscado, puede darse el caso que una etiqueta tenga
varios id.
Por ejemplo
<div id="contenedor1 contenedor2"></div>
Para llamarlo mediante un selector se haría de la siguiente forma:
#contenedor1#contenedor2{/*Instrucciones CSS*/}
SELECTOR DE ATRIBUTO
Los selectores de atributo nos sirven para indicar aquellos que tengan un atributo
determinado.
Para saber que atributos puede tener una etiqueta dar un vistazo a esta
entrada resumen de todos los atributos html que existen.
Podemos llamar a las etiquetas que tengan un atributo determinado.
Las entradas con un contenido determinado dentro del atributo.
Entradas cuyo atributo sea igual, empiece o acabe por unos determinados
caracteres.
a[target]{
/*instrucciones CSS que afecta a todas las etiquetas a que tengan un
atributo de tipo target*/
}
a[target="_blank"]{
/*instrucciones CSS que afecta a todas las etiquetas a que tengan un
atributo de tipo target y cuyo valor sea "_blank"*/
}
Hay una serie de expresiones que pueden ser útiles.

div[class *="col-"]{/*instrucciones CSS que afectan a todos los div
con una clase que empieze contenga "col-"*/}
div[class $="4"]{/*instrucciones CSS que afectan a todos los div con una clase
que termine por "4"*/}
div[class |="col-xs-"]{/*instrucciones CSS que afectan a todos los div con una
clase que empiece por "col-xs-"*/}
SELECTOR DESCENDIENTE
Selecciona los elementos que se encuentran dentro de otra etiqueta

aunque haya etiquetas intermedias en el html.
A los elementos que no estén en el interior no se les aplican los estilos.
p span{
/*instrucciones CSS que afectan a todos los span dentro de un párrafo
aunque haya etiquetas intermedias.*/
}
SELECTOR HIJO
Los selectores de tipo hijo sirven para seleccionar aquellas

etiquetas directamente después de una etiqueta determinada.
Se usa el símbolo «>»
li>ul{
/*instrucciones CSS que afecta a todas las etiquetas ul directamente
después de una etiqueta li sin etiquetas de por el medio.*/
}
Es importante destacar que no existen etiquetas por el medio.
No significa lo mismo
li ul{/*Instrucciones CSS*/}
que
li>ul{/*Instrucciones CSS*/}
En el primer caso llamamos a todos los ul a continuación de un li

aunque haya etiquetas por el medio.
En el segundo caso llamamos a todos los ul directamente a continuación de una

etiqueta li. Si existiera una etiqueta intermedia ya no sería lo mismo.
EJEMPLO DE DIFERENCIA ENTRE SELECTOR DE HIJO Y DE
HERENCIA
EN LA IMAGEN SE REPRESENTA EL ÁRBOL DE NODOS DE UN

DOCUMENTO WEB.
En el esquema se observa como la etiqueta <p> tiene un hijo de nombre <span>
y un hijo de nombre <em>. La etiqueta <em> tiene a su vez un hijo de nombre
<span>.
La instrucción p span{color: red ;} haría que todos los <span> se colorearan
de color rojo.
La instrucción p>span{color: red ;} haría que sólo el<span> hijo del <p> se
coloreara de rojo. El <span> hijo de <em> no se colorearía.
COLORES CSS PARA WEB
Para gustos los colores.
¿Como lo trasladamos a una página web?
Existen distintas formas de indicar los colores que queremos dar a los elementos
de un documento.
Básicamente necesitamos saber la diferencia entre CMYK y RGB y que significan.
Dominar los colores RGB, RGBa y Hexadecimal.
También existen los sistemas HSL y HSLa pero yo no los voy a mencionar en esta
publicación.
DIFERENCIA ENTRE RGB Y CMYK

Se explica este concepto porqué es prácticamente de lo primero que verás si
alguna vez has abierto photoshop.
Es interesante saber que significa cada cosa y no quedar como un «petardo»
cuando vayas a ver un cliente.
RGB y CMYK son diferentes esquemas para representar los colores.
RGB es el acrónimo de Red, Green, Blue.. Para web usaremos siempre RGB.
CMYK es el acrónimo de Cian, Magenta, Yellow y Black. Para impresión en papel
física usaremos siempre CMYK. Esto es flyers, tarjetas de visita, carpetas,
proyectos, etc.
Demos a continuación un poquito de forma al RGB.
ESQUEMA DE COLOR RGB APLICADO AL CSS
RGB son el acrónimo que representa el esquema de color Red, Green, Blue.
Todo color en una pantalla se puede representar como una mezcla de estos 3
colores, indicando la proporción de cada uno con un número del 0 al 255.
Por
Y deejemplo:
las mezclas anteriores obtendríamos
El amarillo
rojo se representaría
se representaría
comocomo
rgb(255,0,0)
rgb(255,255,0)
El azul
verdecyan
se representaría
se representaría
comocomo
rgb(0,255,0)
rgb(0,255,255)
El rosa
azul se
magenta
representaría
se representaría
como rgb(0,0,255)
como rgb(255,0,255)
El blanco se representaría como rgb(255,255,255)
El negro se representaría como rgb(0,0,0)
Hasta aquí la teoria. ¿Como lo aplicamos a CSS?

Veamos algunos ejemplos en la imagen contigua.
ESQUEMA DE COLOR RGBA APLICADO AL CSS
RGBa es una derivada de RGB en la que se incluye un cuarto parámetro «a» que
indica el grado de transparencia – alpha channel.
Indica de una escala de 0 a 1 el porcentaje de puntos que vamos a dejar de

«pintar».
 0, significa que no vamos a pintar nada, es decir transparencia total.

 1, significa que vamos a pintar todo, es decir el máximo grado de relleno de color
posible.
Veamos algunos ejemplos de como se utiliza en CSS:
RECURSOS ÚTILES PARA LIDIAR CON LOS COLORES DE

UNA WEB
PARA QUE TE HAGAS UNA IDEA NECESITO PEDIR CONSEJO
PARA SABER SI UNOS PANTALONES Y UNA CAMISA
COMBINAN.
No siempre puedo estar preguntando a mi diseñadora si algo le parece bien o no.
¡Viva los diseñadores!
Pero hay algunas herramientas que nos pueden ayudar.
1.Para encontrar paletas de colores que combinen recomiendo la

herramienta coolors.co
2.Para saber los colores que se están usando en una página web lo mejor es el usar
el inspector web. Sin embargo si quieres algo más rápido entonces usa la
extensión de chrome colorZilla
Y esto es todo. Usa los colores con criterio, y ante la duda… ¡pregunta!
MODELO DE CAJAS CSS. ANCHO, ALTURA, RELLENO, BORDE

Y MARGEN
Para entender el modelo de cajas de CSS lo más fácil es pensar un símil en el

mundo real.
Por ejemplo una persona tiene una altura, se viste, ocupa una superficie … y le
gusta que en un ascensor no le toquen.
En CSS se define un modelo de cajas que permite a las etiquetas html que se
encuentran dentro del <body> tener también unas «propiedades físicas»
similares.
De este modo en CSS definimos un ancho, una altura, un relleno, un borde, un

margen…
El conjunto de todas estas propiedades traducidas a lenguaje de estilos es lo que

conforma el modelo de cajas.
Se puede definir y «decorar» cualquier caja.
Veamos como ejemplo el modo como chrome representa por consola del
navegador (Ctrl + inspeccionar) una caja de una página web.
WIDTH, HEIGHT
El width y el height hacen referencia a la altura y al ancho de una caja html.
Como apuntes de clase considera los siguientes factores importantes:

Todos los navegadores tienen definido un width y un height por defecto para
todas las etiquetas mientras no se indique en la hoja de estilos el valor de width o
height.
Los elementos en línea no hacen caso del width ni el height que hayas podido
indicar en la hoja de estilos. Para que lo hagan hay que transformarlos a
elementos bloque o a elementos inline-block.
Los elementos bloque o inline-block si respetan lo que escribamos como width y/o
height en una hoja de estilos css.
Se pueden definir mediante unidades relativas. En caso de usar un porcentaje
(%) se toma como unidad absoluta la caja contenedora. Por ejemplo, una caja de
ancho 100% ocupará todo el espacio disponible dentro de su contenedor. En
última instancia este espacio es todo el ancho del documento web. (<body>).
PADDING (RELLENO)
Si se tratara de una caja de zapatos el padding es la distancia entre los zapatos
y las paredes de cartón.
Tenemos un padding superior (padding-top), derecho (padding-right), inferior
(padding-bottom) e izquierdo (padding-left).
Existen distintas formas de escribir los paddings en una hoja de estilos. Se
muestran en la imagen a continuación junto con sus equivalentes abreviados.
De izquierda a derecha como escribir el padding y sus expresiones equivalentes abreviadas.
BORDER (BORDE)
Siguiendo con el símil de la caja de zapatos, el border es el grosor que tienen las
paredes de cartón.
Existe un borde superior, derecho, inferior y izquierdo.
Para un borde se puede definir el grosor (border-width), el color (border-color) y el
trazado (border-style).
Personalmente no me gusta complicarme demasiado la vida con estos aspectos
pero conviene conocerlos.
Para definir sus propiedades aplica exactamente la misma lógica que con el
padding (sustituyendo la palabra padding por border y todo el resto igual).
Ejemplo de uso de borders en CSS
MARGIN (SEPARACIÓN)
Si estás en un ascensor puedes estar muy pegado o muy ancho. Esto es el

margen.
Aplicado a una caja html es la distancia entre cajas desde el borde. Es decir, el
espacio que queda entre cajas antes de tocarse.
Señalar como importantes los siguientes apuntes de clase:
Existe el margin superior, derecho, inferior e izquierdo.

Los elementos bloque si respetan todos los márgenes que hayamos podido
indicar. Pero atención, los márgenes inferior y superior de dos cajas una encima de
la otra se fusionan.
Los elementos en línea no respetan el margen superior ni inferior. Pero si el
izquierdo y el derecho.
Existen distintas formas de escribir los margin en una hoja de estilos. Aplica
exactamente la misma lógica que con el padding (sustituyendo la palabra padding
por margin y todo el resto igual)
BACKGROUND (FONDO)
Debemos pensar en una caja como un objeto en 2 dimensiones con varias capas
superpuestas.
El fondo es la última de las capas de una caja.
Podemos definir una imagen, un color, una posición dentro de la caja, si se repite o
no.
SIGNIFICADO DE LAS PROPIEDADES TOP, BOTTOM, LEFT,

RIGHT DE CSS
Las propiedades top, bottom, right y left de css sirven para desplazar una caja que
tiene un posicionamiento absoluto, relativo, fijo o sticky.
Ahora veremos un resumen que muestra visualmente como se desplaza una caja
en función del valor positivo o negativo que le demos a cada una de las
propiedades anteriores.
PROPIEDAD TOP
Si tomamos como referencia la línea horizontal superior:
un top positivo desplaza la caja hacia abajo.

un top negativo desplaza la caja hacia arriba.
PROPIEDAD BOTTOM
Si tomamos como referencia la línea horizontal inferior:
un bottom positivo desplaza la caja hacia arriba.

un bottom negativo desplaza la caja hacia abajo.
PROPIEDAD LEFT
Si tomamos como referencia la línea vertical izquierda:
un left positivo desplaza la caja hacia la derecha.

un left negativo desplaza la caja hacia la izquierda.
PROPIEDAD RIGHT
SI TOMAMOS COMO REFERENCIA LA LÍNEA VERTICAL

DERECHA:
un right positivo desplaza la caja hacia la izquierda.
un right negativo desplaza la caja hacia la derecha.
POSICIONAMIENTO FLOTANTE DE CAJAS. FLOAT: LEFT |

RIGHT | BOTH; Y PROPIEDAD CLEAR
El posicionamiento flotante es una propiedad que nos permite hacer saltar las
cajas del flujo normal del documento.
Nos permite posicionar elementos a la izquierda y/o a la derecha de su elemento

contenedor.
En caso de no existir elemento contendor se considera el body.
Puede tomar los siguientes valores:
float: left | right | both;
Una de las características del posicionamiento flotante es que el

resto de cajas del documento se redistribuyen para ocupar el espacio
vacío dejado por elemento con float.
EJEMPLO DE USO DE FLOAT
EN ESTE EJEMPLO TENEMOS UNA CAJA CENTRADA

HORIZONTALMENTE DE ANCHO REAL 500 + 20 * 2 (PADDINGS)
+ 1*2 (BORDERS).
Contiene 1 imagen y 2 párrafos.
Se aplica float:left; a la imagen.
El resultado es que los dos párrafos se contornean alrededor de la imagen.
La imagen tiene un float:left;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplos posicionamiento flotante y clear">
<meta name="author" content="Francesc Ricart">
<title>Posicionamiento flotante cajas</title>
<style>
.contenedor{
margin:auto;
width:500px;
padding:20px;
border:1px solid #000;
}
img{
float:left;
}
</style>
</head>
<body>
<div class="contenedor">
<img src="spidercerdo.jpg" alt="spider cerdo">
<p class="primero">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam in odio
impedit nulla voluptas quaerat est sequi magni ex accusantium, omnis, perferendis, culpa error
maiores eveniet ab beatae quod.</p>
<p class="segundo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio odit qui officiis
earum nihil doloremque, itaque. Totam aut, facilis quaerat reprehenderit provident pariatur iusto
officiis exercitationem. Iure quaerat, neque. Iure.</p>
</div>
</body>
</html>
EJEMPLO DE USO DE LA PROPIEDAD CLEAR
Clear es una propiedad que sirve para borrar floats a partir de la caja en que son
citados.
Es muy usado cuando se maqueta mediante floats (es un tipo de maquetado que
a mi no me gusta pero ya hablaremos de ello más adelante)
Por ejemplo en el ejemplo hemos aplicado un float:left; para limpiar un float left.
Los valores que puede tomar son
clear: left | right | both;
Fijarse como en la imagen adjunta el segundo párrafo ha saltado de nivel justo

por debajo de la imagen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplos posicionamiento flotante y clear">
<meta name="author" content="Francesc Ricart">
<title>Posicionamiento flotante cajas</title>
<style>
.contenedor{
margin:auto;
width:500px;
padding:20px;
border:1px solid #000;
}
img{
float:left;
}
.segundo{clear:left;}
</style>
</head>
<body>
<div class="contenedor">
<img src="spidercerdo.jpg" alt="spider cerdo">
<p class="primero">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quisquam in odio
impedit nulla voluptas quaerat est sequi magni ex accusantium, omnis, perferendis, culpa error
maiores eveniet ab beatae quod.</p>
<p class="segundo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio odit qui officiis
earum nihil doloremque, itaque. Totam aut, facilis quaerat reprehenderit provident pariatur iusto
officiis exercitationem. Iure quaerat, neque. Iure.</p>
</div>
</body>
</html>
OTROS USOS DE FLOAT

Float nos permite por ejemplo:
•Apilar elementos lista o enlaces uno al lado de otro para simular un menú de
navegación.
•Desplazar un elemento de un menú a un extremo, al principio o al final.
•Apilar contenedores cuyos anchos son en porcentaje para simular las columnas
de un documento web.
COMO CENTRAR UN TEXTO MEDIANTE CSS Y NO CON

HTML
Hay ocasiones en las que necesitamos centrar un texto pero no hay manera.
La forma correcta de hacerlo es mediante CSS.
En esta breve entrada se explica como hacerlo y algunos errores comunes que no
debemos cometer.
COMO NO CENTRAR UN TEXTO
Elimina de tu mente la etiqueta <center>. Esta etiqueta se

considera deprecated en html5.
•Descarta también la opción de hacer espacios en blanco para centrar el texto
manualmente. Esta opción tiene 2 inconvenientes:
•Si te modifican el ancho disponible de pantalla tu texto dejará de estar centrado.
•Recuerda que en html 2 espacios en blanco se cuentan como uno. En su lugar
deberías escribir (Revisa el tutorial html si no sabes a que me refiero)
En general las 2 opciones anteriores denotan un mal maquetador/programador.

No te conviertas tu en uno de ellos y empieza a hacer las cosas bien.
COMO SI CENTRAR UN TEXTO Y PORQUÉ A TI NO SE TE

CENTRA.
La razón habitual por la cual no se te centra un texto es porqué el elemento que

estás intentando centrar es su elemento contenedor y no el texto en si.
O bien que en realidad si está centrado pero no te das cuenta respecto de que
caja.
La instrucción CSS que debes usar es
text-align:center;
Veamos un ejemplo:
Ejemplo de centrado de un texto mediante CSS

CSS PDF

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

CSS PDF

Încărcat de

Drepturi de autor:

Formate disponibile

INTRODUCCIÓN AL CSS.

QUE SIGNIFICA CASCADING STYLE

CSS es el acrónimo de Cascading Style Sheets. Lo que en castellano vendría a ser

El HTML sirve para determinar el CONTENIDO y la ESTRUCTURA web

La gran ventaja del css es que no hay que pensar mucho.

PRIMERA TOMA DE CONTACTO CON EL CSS

Al margen de la sintaxis y si se a puesto de una o otra forma el objetivo es hacer

Veamos los 3 casos posibles.

EN LÍNEA CON EL HTML

Otra posibilidad es escribir el html dentro del <head>.

Es un sistema bastante cómodo cuando se está aprendiendo.

Veamos la imagen adjunta.

Para desvincular al máximo html y css escribimos el siguiente html en la cabecera.

<link rel=»stylesheet» href=»url-de-la-hoja-css»>

En el ejemplo de la imagen estamos poniendo una hoja de nombre style.css dentro

SINTAXIS CSS BÁSICA. CÓMO SE ESCRIBE EL CSS

¿Como se escribe el CSS?

Lo bueno del Cascading Style Sheets es que es un lenguaje muy lógico.

Pero como en todo lenguaje necesitamos aprender unas normas de escritura

SINTAXIS DE UNA INSTRUCCIÓN CSS

Se compone de instrucciones CSS.

Fijarse en las llaves de apertura, los dos puntos y el punto y coma.

Es muy importante nunca olvidarse ninguno de los elementos descritos.

El punto y coma sirve para cerrar cada propiedad + valor.

PROPIEDADES MÍNIMAS QUE DEBEMOS APRENDER

Existen muchas propiedades CSS.

No es necesario que las memorices todas pero si que las entiendas.

Estas son algunas de las propiedad mas conocidas y usadas de CSS:

background, border, padding, margin, width, height, box-sizing para modelo de

Todos y cada uno de los aspectos visuales.

Se representa con un asterisco.

Usualmente se utiliza para resetear los estilos de un documento web y

Típicamente en muchas páginas web encontraréis la siguiente instrucción:

Se suelen usar para aplicar una guía de estilos en un documento web.

Se escriben de la siguiente forma:

Todos los párrafos: p{/*instrucciones CSS*/}

Para hacerlo sólo debemos separarlos por comas. Por ejemplo:

Todos los títulos de un documento web.

SELECTOR DE CLASE Y/O DE CLASE MÚLTIPLE

Cualquier etiqueta html puede tener un atributo de tipo clase.

<span class="relevante">Un contenido cualquiera</span>

El selector de clase siempre empieza con un punto. Es importante no

Cuando una etiqueta tiene varias clases simultáneas

<p class="importante destacado">texto de un párrafo cualquiera</p>

Entonces el selector recibe el nombre de «selector de clase

El identificador se indica en html mediante el atributo id.

Para llamarlo mediante un selector se hace de la siguiente forma:

<div id="contenedor1 contenedor2"></div>

Para llamarlo mediante un selector se haría de la siguiente forma:

Hay una serie de expresiones que pueden ser útiles.

Selecciona los elementos que se encuentran dentro de otra etiqueta

A los elementos que no estén en el interior no se les aplican los estilos.

Los selectores de tipo hijo sirven para seleccionar aquellas

Es importante destacar que no existen etiquetas por el medio.

En el primer caso llamamos a todos los ul a continuación de un li

En el segundo caso llamamos a todos los ul directamente a continuación de una

EN LA IMAGEN SE REPRESENTA EL ÁRBOL DE NODOS DE UN

¿Como lo trasladamos a una página web?

Básicamente necesitamos saber la diferencia entre CMYK y RGB y que significan.

Dominar los colores RGB, RGBa y Hexadecimal.

DIFERENCIA ENTRE RGB Y CMYK

RGB y CMYK son diferentes esquemas para representar los colores.

Demos a continuación un poquito de forma al RGB.

Todos los párrafos: p{/instrucciones CSS/}