Los Identificadores

CSS - Lección 2: La sintaxis de las hojas de
estilo
Para escribir correctamente hojas de estilo en cascada necesitamos saber sus reglas
ortográficas. La consecuencia inmediata es la de poder identificar las partes que componen
este lenguaje.
La sintaxis es muy sencilla ya que siempre se sigue el mismo patrón. Vamos a introducirnos

en materia diciendo que los elementos son: un selector y una declaración.La declaración, a
su vez, está compuesta por una propiedad y un valor.
p {
color:blue;
font-size:14pt;
}
En el código de ejemplo, el selector es la letra p; haciendo referencia a la etiqueta p (párrafo)

del documento html asiciado. La declaración es todo lo que va dentro de las llaves. Como
parte de la declaración tenemos dos propiedades (en fucsia) y dos valores en verde.
Hay un aspecto importante que no se puede olvidar:
Las declaraciones se separan entre sí mediante un punto y coma

Las propiedades se separan de los valores mediante dos puntos
El preformateado que le hemos dado al código css es arbitrario y sirve para organizar

visualmente el código. De ello, te recomendamos que respetes este preformateado para que
luego no tengas dificultades a la hora de revisar tu código, la figura 1 ilustra muy bien esto.
Figura 1: El preformateado nos ayuda a identificar

los elementos del código
No cabe duda de las ventajas de preformatear nuestras hojas de estilo; esto nos ayuda a
identificar las propiedades y valores rápidamente, así cómo las distintas declaraciones.
CSS - Lección 3: Implementación del estilo en
cascada
Hay tres formas de implementar el código css en nuestros documentos html. Las primera
esestableciendo un atributo en la propia etiqueta html que deseemos darle un estilo. La
segunda es en la cabecera de nuestra página web, a través de la etiqueta <style>. La
tercera forma es la más flexible, se trata de un documento independiente en donde definir
el diseño.
En relación a la primera forma, utilizaremos el atributo style en la propia etiqueta html a la

cual deseemos proporcionarle diseño. En el siguiente código utilizamos esta forma de
implementación css para darle a un párrafo color azul y un tipo de fuente arial.


<p style="color:blue; font-family:arial;">
Las hojas de estilo en cascada nos ayudan
enormemente a generar y mantener un diseño
gráfico para nuestro sitio web.</p>
Como ves, el valor que debe de tomar el atributo style son las declaraciones de la

sintaxis cssnecesarias para dar el diseño deseado.
Con la segunda forma de utilizar código css, que hemos mencionado antes, podemos
darle diseño a todo un documento html de forma integral. Para ello, escribiremos el código
css en la cabecerade nuestra página web; dentro de la etiqueta <style>
<html>

<head>


<style type="text/css">

</style>
</head>

<body>


<h2>Hojas de estilo en cascada</h2>

<p>Con la etiqueta style podemos
diseñar nuestras páginas webs.</p>

<p>Esta técnica de diseño web es
muy flexible y potente para el
webmaster.</p>
</body>
</html>
En el código anterior tenemos un documento html con un título y dos párrafos en el cuerpo de
la página. En su cabecera hemos definido un diseño para el documento, que hemos escrito
en código css dentro de la etiqueta cerrada <style>. El atributo type="text/css" es
opcional ponerlo para que el navegador sepa de que tipo de código se trata.
Observa también que hemos metido el contenido de la etiqueta <style> dentro de los

símbolos de comentario html. La razón de esto es porque hay navegadores antiguos que
no soportan esta etiqueta; entonces, al encontrarse con este código lo tomará como
comentarios html y así no lo mostrará en nuestra página web.
Es recomendable que escribas el código anterior en tu blog de notas. Empieza escribiendo

primero laestructura html; después sigue por el cuerpo de la página y, finalmente, por el título
de la página y la etiqueta <style>.
Para la tercera forma de implementar css, vamos a utilizar una nueva etiqueta html: la
etiqueta<link>. Se trata de una etiqueta abierta, que sirve para establecer una conexión o
enlace entre la hoja de estilo en cascada y el documento html.
<html>
<head>
<title>Mi página web con diseño</title>


<link href="midiseño.css" type="text/css"
rel="stylesheet" />
</head>
<body>
<h2>Hojas de estilo independientes</h2>
<p>Podemos escribir hojas de estilo

independientes que se pueden aplicar
a cualquier documento html.</p>
<p>Con solo enlazar la página con la

etiqueta link aplicaremos todo el
diseño escrito en el archivo css.</p>
</body>
</html>
Cuando usamos una hoja de estilos independiente: un documento css; es
importante asignarle a la etiqueta link el atributo rel. Este atributo es imprescindible y sirve
para especificar si se trata de un diseño persistente, es decir, que nunca se va alternar con
otro diseño (valor stylesheet); o bien si vamos a ir alternando con otros diseños (valor alternate
stylesheet). Este aspecto es algo obsoleto, ya que los navegadores actuales carecen de
capacidad para hacer que el usuario elija el estilo alterno que quiera, aún así hay que
especificar.
El enlace que establece la conexión entre los dos archivos; el html y el css, se realiza a través
del atributo html href="midiseño.css" que se encuentra en la etiqueta <link>. El valor que
toma el atributo href es el destino de la hoja de estilo. En la figura 2 podemos apreciarlo más
gráficamente.
Figura 2. El atributo href es imprescindible con

los documentos css externos
No cabe duda que la forma más ventajosa es la última que hemos visto; en un solo
documento definimos todo el diseño de nuestra web, de manera que para cambiar el
aspecto de todo un web tan solo tenemos que acudir al documento css. Queda pro ver
otra forma de implementación css, pero no lo veremos por ahora porque es para trabajar de
forma más avanzada.
css - Lección 4: Primeros pasos con css

Es hora de empezar a conocer el lenguaje css; o también llamado lenguaje de hojas de estilo
en cascada. Para ello vamos a hacerlo de forma práctica. Se propondrá códigos de trabajo
para practicar, y asimilar así todos los conceptos. A partir de los códigos de trabajo, irás
cambiando valores, añadiendo declaraciones, etc...
Para comenzar, abre esta página html con la que vamos a trabajar en una ventana/pestaña

nueva, copia el código, pégalo en tu blog de notas y guárdalo en tu disco duro con el
formato html. Vamos a introducirnos en el diseño modificando las propiedades de los párrafos
Si abres el archivo que has guardado con tu navegador verás que la página consta de un
título y dos párrafos.
En primer lugar, nos centraremos en los párrafos; por ello, escribiremos el selector css para
párrafos y sus llaves. En el siguiente código puedes ver como se escribe.
p {
</style>
La primera declaración que escribamos será para cambiar el color del texto de los párrafos.
Esta declaración se escribe dentro de las llaves. Su escritura es: color:blue;
p {
color:blue; /* color del texto */
}
</style>
La figura 3 muestra como el texto de la página ha cambiado a color azul, tal y como hemos
puesto como valor en la propiedad color para el selector p
Figura 3: Cambio a color azul de los párrafos
Con tan solo cambiar el valor de la propiedad del color al selector de párrafos, podemos
cambiar el color de los párrafos de nuestra página web. Experimenta con otros
valores como green,orange, yellow o purple.
CSS - Lección 5: Dando presentación al texto

En la lección anterior hemos visto como darle color al texto. Por supuesto, el diseño no se limita
solo alto, en vez de eso, podemos controlar hasta el más mínimo detalle en cuanto a la
presentación del texto se refiere.
En concreto, vamos a aprender como cambiar el tipo de letra, la alineación, la separación de

líneas, el tamaño del texto y muchos otros aspectos en cuanto a la presentación del texto se
refiere.
Ovserva la siguiente tabla, en ella se detallan las diferentes propiedades para configurar la

presentación del texto:
propiedades para darle presentaci?n al texto
color Con esta propiedad le damos color al texto
font-family Para aplicar un tipo de letra
font-size Nos permite modificar el tama?o de la fuente
font-weight Habilitamos con esta propiedad el texto en negrita
text-align Nos permite alinear el texto y justificarlo
line-height Para controlar la separaci?n de los renglones
Por ejemplo, el siguiente código nos permite diseñar una página en la que tenemos un título y
un párrafo. En concreto, presenta el texto en color rojo para el título, y naranja para el
párrafo. Además, el párrafo tiene el texto justificado y un interlineado grueso. También, le
daremos altítulo un tipo de letra arial y le cambiaremos el tamaño.
h1 {
color:red; /* color rojo del texto */
font-family:arial; /* tipo de letra arial */
font-size:20px; /* tamaño de letra 24 pixels */
}
p {
color:orange; /* color rojo del texto */
text-align:justify; /* texto justificado */
line-height:18px; /* interlineado grueso */
font-size:12px; /* tamaño de letra 24 pixels */
}
Hay propiedades cuyo valor es un tamaño, como el tamaño del texto (font-size) o el tamaño
del interlineado (line-height). Para estas magnitudes utilizaremos una cantidad en pixeles. El
atributo text-align tiene cuatro valores: left para alinear a la izquierda, right para
alinear a la derecha, center para centrar el texto y justify para ajustarlo al ancho de la
ventama.
El código presentaría así el texto en una página:
Figura 4. Dise?o de una página cambiando la

presentación del texto
CSS - Lección 6: Diseñando listas
Con las hojas de estilo podemos diseñar nuestras listas de forma muy flexible. Por ejemplo, no
estaremos limitados a listas verticales; sino que podemos transformarlas en listas horizontales.
Esto es útil para hacer barras de navegación que respeten los estándares web. Así, se
pueden meter una serie de enlaces de navegación en una lista y transformar ésta en una lista
horizontal.
Antes de nada, y como es costumbre, veamos las propiedades para diseñar listas:
Propiedades css para listas

list-style-type Para especificar el tipo de marcador para cada elemento
list-style-image Para implementar una imagen como marcador
list-style-position Para situar el marcador dentro del texto o en el margen
display Disponer los elementos horizontalmente
Por defecto, en las listas ordenadas cada elemento viene identificado por un número por
defecto. Con la propiedad list-style-type podemos cambiar esto y hacer que la
ordenación sea alfabética o mediante numeración romana. Los valores que puede adoptar
esta propiedad son: decimal (por defecto), lower-alpha, upper-alpha, lower-
roman y upper-roman.
Figura 5. Direfentes valores para la propiedad

list-style-type en listas ordenadas.
En cuanto a los valores que pueden tener los elementos de una lista desordinada para la
propiedadlist-style-type son: disc (por defecto), circle y square. Existe otro valor que
poseen las dos clases de listas, se trata de none, y sirve para que no aparezca símbolo
alguno en cada elemento.
También tenemos la posibilileco usar ninguno de los marcadores vistos, sino el que nosotros
queramos por medio de una imagen. Así, es posible establecer como marcador una
imagen. Para ello tenemos que utilizar la propiedad list-style-image. Solo sirve para listas
desordenadas como es lógico.
ul {
list-style-image:url("imagenes/rombo.gif");
}
El código anterior nos habilitaría una imagen como marcador en todas las listas desordenadas
de nuestras páginas. El valor que toma la propiedad indica que se use la
imagen rombo.gif situada en la carpeta imagenes. Para poner un valor, siempre hay que
poner "url" y, entre paréntesis, el destino del archivo a enlazar.
Figura 6. Se pueden poner imágenes
como marcadores.
Si observas, los marcadores siempre se quedan a la izquierda, ocupando el margen izquierdo

del texto. Podemos cambiar esto con la propiedad list-style-position, cuyos valores
posibles son outside (por defecto) y inside. Así podremos hacer que los marcadores se
coloquen a la altura del texto.
Figura 7. Efecto en una lista para los dos valores de la

propiedad list-style-position.
Por último decir que podemos mostrar listas en las que los elementos se dispongan de
forma horizontal. para ello nos valdremos de la propiedad display, dándole un valor
de inline. Existen muchas más propiedades para dar diseño a las listas, pero aún no las
veremos para no complicar el aprendizaje.
CSS - Lección 7: Definición del color del texto

En esta lección vamos a profundizar en el tema de aplicar color a distintos elementos; por
ejemplo, explicaremos técnicas para dominar la aplicación de color a nuestros textos.
Estos elementos tienen un denominador común: albergan dentro de ellos texto, el color del
texto de los diversos elementos se puede manipular por medio de las hojas de estilo en
cascada.
Existen muchas formas de implementar color al texto; cada una tiene sus ventajas y sus
incovenientes. La razón por la que se puede aplicar color al texto de diversas formas, es
porque hay circunstancias a la hora de diseñar que requieren una forma de
implementación u otra.
Por ejemplo, hay desarrollos de diseños que no son muy complejos, entonces bastaría para
implementar color dándole valores a la propiedad color mediante el nombre del color en
cuestión. Trabajando en diseños complejos no podríamos aplicar esta clase de valores.
La forma más simple de aplicar color al texto de un elemento; como puede ser un párrafo o
una lista, es estableciendo como valor el nombre (en inglés) del color que deseemos
aplicar a la propiedad color. Por ejemplo, en la declaración color:blue; estableceríamos el
color azul para el texto.
La segunda forma de controlar el color del texto es aplicando valores hexadecimales al

color. Esta nueva forma de implementar valores es más precisa que la primera, y
está destinada a conseguir mayor precisión en el color que deseamos establecer. Como
ejemplo, para introducirnos, tenemos la siguiente declaración que establece el color verde para
el texto:color:#00FF00;.
Su funcionamiento es el siguiente: se trata de tres pares de números; que miden la catidad

de color primario que se aplicará. El primer par de números corresponde al color rojo, el
pár de números del medio corresponde al color verde, y el último par de números al
color azul. Mezclando estos tres, en mayor o menor grado, podemos crear cualquier color.
Figura 8. Los colores que representa cada pareja

de números hexadecimales.
La tercera forma de aplicar color se basa en la anterior: mezclando distintas cantidades de

colores primarios. La diferencia está en la sintaxis, ya que en este caso no se usa notación
hexadecimal; lo que se usa son coordenadas paramétricas. Aquí un ejemplo de esta forma
para color azul:color:rgb(0,0,255);.
La sintaxsis del valor de la propiedad empieza por unas siglas, las iniciales de cada color que
se representa: red, green y blue. Entre paréntesis ponemos los parámetros de cada color
separados por comas; el rango va de 0 a 255.
Existe una variante que consiste en poner los parámetros en tanto por ciento, en vez de
utilizar el rango de 0 a 255. Por ejemplo, podemos escribir la siguiente declaración para poner
un colorrojo:rgb(100%,0%,0%);.
Relación de valores para el color

color nombre hexadecimal paramétrica paramétrica
rojo red #FF0000 rgb(255,0,0) rgb(100%,0%,0%)
lima lime #00FF00 rgb(0,255,0) rgb(0%,100%,0%)
azul blue #0000FF rgb(0,0,255) rgb(0%,0%,100%)
negro black #000000 rgb(0,0,0) rgb(0%,0%,0%)
blanco white #FFFFFF rgb(255,255,255) rgb(100%,100%,100%)
amarillo yellow #FFFF00 rgb(255,255,0) rgb(100%,100%,0%)
celeste aqua #00FFFF rgb(0,255,255) rgb(0%,100%,100%)
rosa pink #FFC0CB rgb(255,192,203) rgb(100%,75%,80%)
morado purple #800080 rgb(128,0,128) rgb(50%,0%,50%)
Estos son solo algunos ejemplos, puedes acceder a una completa paleta de colores a través
de este enlace.
CSS - Lección 8: Aplicando hojas de estilo a
las tablas
Con las hojas de estilo podemos proporcionarle un aire nuevo a nuestras tablas, que son
los objetos que albergan a los datos tabulados. En esta misma web se utiliza código CSS para
diseñar las tablas de este curso.
Como ves, por las tablas de este curso, podemos diseñar éstas de forma muy flexible;
personalizándolas hasta límites insospechados. Por ejemplo, dándole un color a cada fila.
A continuación se te presentan las propiedades que podemos usar para diseñar nuestras

tablas:
Propiedades para diseñar tablas

border-collapse Fuerza a que los bordes contiguos de las celdas se solapen
border-spacing Para establecer la distancia entre los bordes de las celdas
border-style Para habilitar un borde, con un estilo determinado
background-color Para aplicar un color de fondo a la tabla
padding Pone un margen entre el borde de las celdas y su contenido
Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco

separadas las unas de las otras. Con la propiedad border-collapse podemos conseguir
controlar este aspecto.
Esta propiedad tiene dos valores: collapse y separate. El primer valor es el que establece el

que se adosen las celdas contiguas. El segundo valor es el que se establece por defecto, y
deja una separación entre las celdas.
En la imagen 9 puedes ver este concepto más gráficamente:
Figura 9. Podemos hacer colapsar los bordes para que las celdas
se adosen unas con otras.
Si lo que deseamos es que las celdas de una tabla guarden una separación entre
ellas, podemos controlar la distancia de la separación de las celdas. Para ello nos
valdremos de la propiedadborder-spacing. Los valores que tomará esta propiedad serán
cantidades en píxeles.
Aunque existen otras magnitudes para medir la cantidad de distancia, como por ejemplo
porcentajes, por ahora nos vamos a centrar en la unidad de pixel. En una próxima lección nos
centraremos en las distintas unidades que podemos manejar con las hojas de estilo en
cascada.
También tenemos la posibilidad de ponerle un color de fondo a las celdas. Mediante
la propiedadbackground-color estableceremos los valores en las modalidades que
analizamos en la lección 7 de este mismo curso.
Cuando creamos una tabla, ésta no aparece como tal, sino que lo que vemos son solo los
datos tabulados contenidos en la tabla. Esto es porque los bordes no aparecen. Con la
propiedadborder-style podemos hacer que se muestren los bordes, pudiendo elegir
entre varios tipos. A continuación los tipos y sus características:
 solid - la línea del borde se muestra con un solo trazo y lisa.

 double - la línea del borde aparece con doble trazo.
 groove - la línea aparece con bajo relieve.
 ridge - la línea del borde se muestra con alto relieve.
Figura 10. Podemos elegir entre distintos tipos de bordes

para las tablas o las celdas.
Vamos a implementar un código para que asimiles mejor el funcionamiento de todas estas
propiedades que hemos visto para las tablas y sus celdas (también pondrémos la imagen de la
tabla que genera el código):
table {
border-style:double;
background-color:aliceblue;
border-spacing:12px;
}
th {
border-style:solid;
background-color:aquamarine;
}
td {
border-style:groove;
background-color:orange;
padding:4px;
}
Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el

código diferentes valores para el estilo del borde; en concreto, tenemos doble trazo para el
borde de la tabla, uno sólido para los encabezados y otro de bajo relieve para las celdas
normales. Obversa también que le hemos dado un color de fondo diferente para cada
elemento: los encabezados con un azul verdoso, las celdas con naranja y la tabla con gris.
Por otro lado se ha puesto un espacio entre el borde de la tabla y las celdas mediante la
declaración border-spacing:12px; ubicada en el selector table. Esta declaración la
heredarán las celdas también. Por último hemos utilizado la declaración padding:4px; en el
selector td para dejar un margen entre el borde de las celdas y su contenido.
En la figura 11 se muestra el resultado del diseño que implementaría el código anterior:
Figura 11. Un diseño de tabla realizado con código css.
CSS - Lección 9: Identificadores y clases
Los identificadores
Con los identificadores podemos aplicar un diseño exclusivo para una determinada
etiqueta dentro de las que haya en nuestro código html. Por ejemplo, si queremos poner en
negrita el primer párrafo, bastaría con identificar con un nombre a la etiqueta <p> del primer
párrafo y añadir un identificador al selector del código css.
Para identificar un determinado elemento en el código html, necesitamos darle un nombre

por medio del atributo id. Posteriormente, necesitamos acceder a este elemento desde el
código css para aplicarle el diseño. Esto se hace a través del selector: tenemos que escribir
el nombre de la etiqueta seguido del símbolo # y del nombre que pusimos en el
atributo id.
Veamos un código de ejemplo:
Código html: Código css:
<p id="EnNegrita"> p#EnNegrita {

Párrafo 1</p> font-weight:bold;
}
<p>Párrafo 2</p>
<p>Párrafo 3</p>
Observa como hemos incluído el atributo id en el código html; y como hemos pasado su valor
al código css, incluyéndolo en el selector. Al ser un identificador tenemos que anteponerle
la almohadilla para indicarlo a la hoja de estilos. El código anterior nos habilitaría lo
siguiente en el navegador:
Figura 12. Con los identificadores podemos aplicar

un diseño diferente entre párrafos.
Como ves, ahora podemos darle un diseño exclusivo a un determinado elemento de

nuestra página web; como el primer párrafo, o el último. Pero no hay necesidad de limitarnos
a los párrafos; ya que podemos aplicar los identificadores a cualquier elemento, como una
tabla o una lista.
Las clases
Aunque los selectores nos ofrecen más flexibilidad a la hora de diseñar, probablemente te
habrás dado cuenta que, por sí solos, no son suficientes: ¿qué pasa si necesito agrupar
distintos grupos de párrafos con estilos diferentes? Para ello tenemos las clases.
Las clases son similares a los identificadores, aunque en vez de identificar a un solo elemento
html,nos identifica a un grupo de elementos. Esto nos permite dar estilo a varios elementos
de la nisma etiqueta dentro de una página.
Figura 13. Con las clases podemos aplicar diseño

a elementos por grupos.
En la figura 13 podemos ver una conversación entre Julia y Juan. Para distinguirlos, se han
puesto las frases de Juan en azul; y las de Julia en fucsia. Imagina hacer esto con
identificadores, y más aun en conversaciones mucho más largas. Caeríamos en un proceso
tedioso: darle un nombre direfente a cada párrafo de la conversación.
Con las clases es mucho más fácil, tan solo agrupamos los párrafos por los de Juan y por los
de Julia. Así tan solo tenemos dos clases de párrafos: los de Julia y los de Juan. Lo que
dice Juan lo etiquetamos como "juan" y lo que dice Julia lo etiquetamos como "julia". Veamos el
código que implementa lo que muestra la figura 13:
Código html: Código css:
<p class="juan"> p.juan {

Hola, Julia.</p> color:blue;
}
<p class="julia"> p.julia {
¿Qué tal?, Juan.</p> color:fuchsia;
}
<p class="juan">
Bien, estoy bien.</p>
<p class="julia">
¡Fantástico, me alegro!</p>
Para implementar clases, existen algunas diferencias respecto a la implementación de

identificadores. En primer lugar se utiliza, en el código html, el atributo class para identificar
un elemento. En el selector del código css, para pasar el valor del atributo class,
ponemos un punto en vez de una almohadilla.
CSS - Lección 10: La organización del código

css
Es muy común, cuando se empieza a desarrollar las primeras hojas de estilo en casada, que
empecemos a perdernos entre el código, no pudiendo encontrar una determinada regla para
su edición.
Cuando tenemos muy avanzada una web, el código css se hace muy extenso; y si no lo
hemos organizado previamente, podemos tener problemas a la hora de encontrar una
determinada declaración para cambiar sus valores.
Para solventar este tipo de problemas, podemos seguir una serie de pautas para organizar
nuestro trabajo; y para encontrar eficazmente los distintos selectores y declaraciones en un
momento determinado. Todo esto nos ahorrará tiempo en el desarrollo de nuestra web, y
muchos quebraderos de cabeza.
La primera técnica consiste en utilizar comentarios para nuestro código. Las líneas de

comentarios podemos usarlas como referencia para saber porqué hemos escrito
determinado código dentro del contexto de nuestra web. Por ejemplo, podemos agregar un
comentario al principio de todo el bloque de clases para tablas para identificarlas rápidamente.
Una cosa que hay que tener en cuenta es que es muy importante organizar el código. Las
reglas deben estár agrupadas según su selector; esto es que si tenemos varias reglas, por
ejemplo, con selector table (normales o clases), debemos agruparlas unas debajo de otras. La
imagen 14 muestra lo que se est? pretendiendo explicar:
Figura 14. Agrupando las reglas según su selector mantendremos
nuestras horas de estilo ordenadas.
En la figura 14 vemos como se puede ordenar las reglas de las hojas de estilo: agrupandolas
según el selector. En este caso tenemos tres reglas: la primera con un selector sencillo; y la
segunda y tercera cuyo selector son clases. Hay que agrupar las clases juntándolas por
familias (table, p, ul...).
Otra cosa aparte es cuando tenemos el desarrollo de la página web muy avanzado. En este
casosuele ocurrir que se genera mucho código css; quedando una hoja de estilos
largísima. El problema surge cuando tenemos que localizar un determinado selector para
editar los valores de sus propiedades.
Una solución muy útil es usar la función de búsqueda de tu editor de texto (notepad en

caso de windows). Si, por ejemplo, queremos localizar el selector table.miembros, solo
tenemos que acudir a la función búsqueda y poner el valor del atributo class para ese
elemento table.

Los Identificadores

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Los Identificadores

Uploaded by

Copyright:

Available Formats

CSS - Lección 2: La sintaxis de las hojas de

La sintaxis es muy sencilla ya que siempre se sigue el mismo patrón. Vamos a introducirnos

En el código de ejemplo, el selector es la letra p; haciendo referencia a la etiqueta p (párrafo)

Hay un aspecto importante que no se puede olvidar:

Las declaraciones se separan entre sí mediante un punto y coma

El preformateado que le hemos dado al código css es arbitrario y sirve para organizar

Figura 1: El preformateado nos ayuda a identificar

En relación a la primera forma, utilizaremos el atributo style en la propia etiqueta html a la

Como ves, el valor que debe de tomar el atributo style son las declaraciones de la

Observa también que hemos metido el contenido de la etiqueta <style> dentro de los

Es recomendable que escribas el código anterior en tu blog de notas. Empieza escribiendo

<title>Mi página web con diseño</title>

<h2>Hojas de estilo independientes</h2>

<p>Podemos escribir hojas de estilo

<p>Con solo enlazar la página con la

Figura 2. El atributo href es imprescindible con

css - Lección 4: Primeros pasos con css

Para comenzar, abre esta página html con la que vamos a trabajar en una ventana/pestaña

Figura 3: Cambio a color azul de los párrafos

CSS - Lección 5: Dando presentación al texto

En concreto, vamos a aprender como cambiar el tipo de letra, la alineación, la separación de

Ovserva la siguiente tabla, en ella se detallan las diferentes propiedades para configurar la

El código presentaría así el texto en una página:

Figura 4. Dise?o de una página cambiando la

Propiedades css para listas

Figura 5. Direfentes valores para la propiedad

Si observas, los marcadores siempre se quedan a la izquierda, ocupando el margen izquierdo

Figura 7. Efecto en una lista para los dos valores de la

CSS - Lección 7: Definición del color del texto

La segunda forma de controlar el color del texto es aplicando valores hexadecimales al

Su funcionamiento es el siguiente: se trata de tres pares de números; que miden la catidad

Figura 8. Los colores que representa cada pareja

La tercera forma de aplicar color se basa en la anterior: mezclando distintas cantidades de

Relación de valores para el color

A continuación se te presentan las propiedades que podemos usar para diseñar nuestras

Propiedades para diseñar tablas

Por lo general, en algunos navegadores, las celdas no se solapan, quedando un poco

Esta propiedad tiene dos valores: collapse y separate. El primer valor es el que establece el

En la imagen 9 puedes ver este concepto más gráficamente:

 solid - la línea del borde se muestra con un solo trazo y lisa.

Figura 10. Podemos elegir entre distintos tipos de bordes

Tenemos una tabla con celdas normales y de encabezados. Hemos escrito en el

En la figura 11 se muestra el resultado del diseño que implementaría el código anterior:

Figura 11. Un diseño de tabla realizado con código css.

CSS - Lección 9: Identificadores y clases

Para identificar un determinado elemento en el código html, necesitamos darle un nombre

Veamos un código de ejemplo:

Código html: Código css:

<p id="EnNegrita"> p#EnNegrita {

Figura 12. Con los identificadores podemos aplicar

Como ves, ahora podemos darle un diseño exclusivo a un determinado elemento de

Figura 13. Con las clases podemos aplicar diseño

Código html: Código css:

<p class="juan"> p.juan {

Para implementar clases, existen algunas diferencias respecto a la implementación de

CSS - Lección 10: La organización del código

La primera técnica consiste en utilizar comentarios para nuestro código. Las líneas de

Una solución muy útil es usar la función de búsqueda de tu editor de texto (notepad en

You might also like