css

¿Qué es CSS?

2. Lo que es CSS

CSS (cuyas siglas significan Cascading StyleSheets, u Hojas de Estilo en Cascada) es un lenguaje usado para

describir la apariencia y el formato de tu HTML.

Una hoja de estilo es un archivo que describe como debería verse un archivo HTML. ¡Eso es!

Decimos que estas hojas de estilo están en cascada porque las hojas pueden aplicar el formato cuando

corresponde más de un estilo. Por ejemplo, si indicas que todos los párrafos deben tener una fuente de color azul,

pero señalas que un párrafo específico debe tener fuente de color rojo, ¡CSS lo puede hacer! (Hablaremos más

sobre la cascada en la sección cuatro.)

Observa la pestaña stylesheet.css . Colocamos el CSS para que el texto del párrafo tenga color rojo, pero tú

debes añadir el CSS que hará que el texto entre las etiquetas <span></span> sea de color azul. ¡Complétalo

y haz clic en Ejecutar!

Ejemplo:

<!DOCTYPE html>

<html>

<head>

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<title>Fuentes elegantes</title>

</head>

<body>

<p>Soy un párrafo escrito en fuente de color rojo, ¡pero una de mis palabras es de color

<span>azul</span>!</p>

</body>

</html>

CSS:

p {color: red;

}

span {color:blue

}

Resultado:

Soy un párrafo escrito en fuente de color rojo, ¡pero una de mis palabras es de color azul!

3. ¿Por qué separar forma de función? ¡Buen trabajo! Mírate: ya estás escribiendo CSS.

Existen dos razones principales para separar tu forma/formato (CSS) de tu contenido/estructura funcional (HTML):

1. Puedes aplicarle el mismo formato a diversos elementos de HTML sin reescribir el código (p.ej., style="color:red": ) una y

otra vez

2. Puedes aplicarle una apariencia y un formato similares a varias páginas de HTML desde un solo archivo CSS

Observa el HTML en index.html . ¡Esas son muchas etiquetas <span></span> ! Todas esas palabras tienen una fuente normal,

pero queremos que se vean súper elegantes.

Ve a la pestaña stylesheet.css y dile al selector span que quieres que font-family sea cursive . ¡Si necesitas ayuda revisa

la Sugerencia!

Veamos... para que algo tuviera color rojo tuvimos que escribir

span {

color: red;

}

Así que si colocamos font-family:cursive; en vez de color: red; , ¡eso debería volver más elegante nuestra fuente!

Ejemplo:

HTML

<!DOCTYPE html><html>

<head><link type="text/css" rel="stylesheet" href="stylesheet.css"/><title>Fuentes aún más elegantes</title>

</head><body>

<p>Mucho de este texto es normal, ¡pero algo de él es <span>elegante</span>!Podemos usar nuestra <span>fuente recientemente elegante</span> para agregarle algo

de<span>gracia</span> a nuestro sitio web. Sería una <span>verdadera molestia</span> hacer <span>elegante</span> cada una de estas etiquetas span de forma separada,¡pero es pan comido con <span>CSS</span>!</p>

</body></html>

CSS:

span { font-family: cursive;

color:red;}

Resultado:

Mucho de este texto es normal, ¡pero algo de él es elegante! Podemos usar nuestra fuente recientemente elegante para agregarle algo de gracia a nuestro sitio web. Sería unaverdadera molestia hacer elegante cada una de estas etiquetas span de forma separada, ¡pero es pan comido con CSS!

5. ¡Enlázalo! Pero hay una forma aún mejor.

Ya sabes que deberías escribir tu CSS en un archivo completamente aparte. Pero, ¿cómo te aseguras de que tu archivo de HTML

pueda ver esa información de CSS?

Lo puedes hacer colocando una etiqueta <link> (tal como viste en el primer ejercicio de este curso) entre las

etiquetas <head></head> de tu página HTML. Tu etiqueta <link> necesita tres atributos:

1. Un atributo type que siempre debe ser igual a "text/css"

2. Un atributo rel que siempre debe ser igual a "stylesheet"

3. Un atributo href que debe apuntar a la dirección web de tu archivo CSS

En el editor de la derecha verás dos archivos: index.html y stylesheet.css .

Inserta una etiqueta <link> hacia stylesheet.css en index.html . ¡Si necesitas ayuda revisa la Sugerencia!

La sintaxis completa debe verse así:


Ejemplo:

HTML:


<head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/>

<title>Resultado</title></head><body>

<p>¡Quiero ser una fuente de TAMAÑO 44!</p></body>

</html>

CSS:

p {font-size: 44px;

}

Resultado:

¡Quiero ser una fuente de TAMAÑO 44!

1. Sintaxis

La sintaxis de CSS es distinta de la de HTML a la que estás acostumbrado, pero no te preocupes: ¡es fácil de

aprender! El formato general se ve así:

selector {

propiedad: valor;

}

Un selector puede ser cualquier elemento de HTML, como <p> , <img> , o <table> . ¡Simplemente obvias

los <> ! Para hacer que el texto de un párrafo tenga color rojo con CSS, escribirías:

p {

color: red;

}

Una propiedad es un aspecto de un selector. Por ejemplo, puedes cambiar font-family , color , y font-size del

texto en tus páginas web (además de muchos más).

Un valor es una posible configuración de una propiedad. color puede ser roja, azul, negra, o casi de cualquier

color; font-family puede ser un montón de fuentes diferentes; y así sucesivamente.

Debes finalizar cada propiedad-valor con un punto y coma ( ; ). Así es como CSS sabe que ya terminaste de trabajar

en un par y que estás listo para trabajar en el siguiente.

¡Muy bien! Es hora de que escribas un poco de CSS por tu cuenta.

En la pestaña stylesheet.css , haz que el color de la fuente del selector p sea verde . (Si necesitas ayuda

revisa la Sugerencia.)

Recuerda la sintaxis general para CSS:

selector {

propiedad: valor;

}

HTML


<head><link type="text/css" rel="stylesheet" href="stylesheet.css"/><title>Resultado</title>

</head><body>

<p>¡Estás a punto de darle estilo a este párrafo con CSS por tu cuenta!</p></body>

</html>

CSS:

p { color: gree;}

Resultado:

¡Estás a punto de darle estilo a este párrafo con CSS por tu cuenta!

2. Un selector, muchas propiedades

¡Buen trabajo!

Otra ventaja genial de CSS es que puedes hacer que un selector tenga muchas propiedades. Por ejemplo, si quieres establecer la

fuente, el color de fuente y el tamaño de fuente de un párrafo, sencillamente puedes escribir:

p {

font-family: Arial;

color: blue;

font-size: 24px;

}

Recuerda: ¡finaliza cada par propiedad-valor con un punto y coma!

Ten en cuenta: Si has ajustado el nivel de zoom de tu navegador, los ejercicios que incluyen font-size y height no funcionarán

correctamente. Para solucionarlo, presiona Comando+0 o Ctrl+0 para restaurar tu vista.

Debajo de tu par propiedad-valor color:green (¡pero antes del } final!), haz que font-family sea Garamond y

que font-size sea 24px .

HTML:

<!DOCTYPE html>

<html>

<head>


<title>Resultado</title>

</head>

<body>

<p>¡Estás a punto de darle estilo a este párrafo con CSS por tu cuenta!</p>

</body>

</html>

CSS:

p { color: green; font-family:Garamond; font-size:24px;}

Resultado:

¡Estás a punto de darle estilo a este párrafo con CSS por tu cuenta!

Por otro lado, los comentarios de CSS lucen así:

/*¡Soy un comentario!*/

Revisa bien antes de que te estrelles

Has aprendido mucho en solo unas lecciones cortas. ¡Estamos impresionados! Vamos a hacer un repaso rápidamente, para asegurarnos de que sabes del tema.

1. Agrega una etiqueta <link> a index.html en medio de tus etiquetas <head></head> .

2. Cambia la fuente del encabezado <h1> a Verdana.

3. Cambia la fuente del encabezado <h3> a Courier.

4. Haz que el texto del párrafo tenga color púrpura.5. ¡Agrega un comentario a la pestaña CSS! Puede decir lo que quieras. (Recuerda: los

comentarios de HTML y los comentarios de CSS de escriben de forma diferente.)

3. Píxeles y em

¡Buen trabajo! Haremos más cosas con los colores a medida que aprendas más CSS.

Cuando te pedimos que ajustaras el tamaño de la fuente, especificamos que la unidad que debías usar era px (de "píxeles"), así:

p {

font-size: 10px;

}

Un píxel es un punto en la pantalla de tu computador. Especificar los tamaños de la fuente en píxeles es

genial cuando quieres que el usuario vea en su pantalla exactamente lo que diseñaste en la tuya, pero hacerlo

asume que las ambas pantallas tienen el mismo tamaño.

Pero, ¿qué tal si el usuario está usando una pantalla muy diferente en tamaño a la tuya (como la pantalla de un smartphone)? Presentamos los em. (¡No los confundas con las etiquetas <em></em> que usamos para

darénfasis!)

La unidad de font-size em es una medidarelativa: un em es igual al tamaño de fuente predeterminado en

cualquier pantalla que el usuario esté usando. Esto las convierte en algo genial para las pantallas de los

smartphones, ya que no tratan de decirle al smartphoneexactamente qué tan grande debe ser una fuente:

sencillamente le indican, "Oye; 1em es el tamaño de fuente que usas normalmente, así que 2em es el doble

de grande, ¡y 0.5em es la mitad de ese tamaño!"

Observa: hemos colocado tres párrafos diferentes con font-size 1em , 0.5em , y 2em . Por ahora, usa la

unidad ( px o em ) con la que te sientas más cómodo; nosotros simplemente queríamos

mostrarte em ahora, de modo que no te sorprendas cuando la veas más adelante.

Ejemplo:


<head><title>Resultado</title>

</head><body>

<p style="font-size: 1em">¡Un em!</p><p style="font-size: 0.5em">¡Medio em!</p><p style="font-size: 2em">¡DOS EM!</p>

</body></html>

4. Una fuente de conocimiento

También te hemos pedido que cambiaras la propiedad font-family de ciertos elementos usando CSS.

Nos has visto usar las fuentes Verdana, Courier y Garamond. ¿Pero cuántas fuentes conoce CSS?

La respuesta es: depende. La mayoría de los computadores entenderán las fuentes populares como Verdana,

Courier, y Garamond, pero cada computador tiene instaladas diferentes fuentes. La buena noticia es que CSS

tiene algunas fuentes predeterminadas incorporadas, con el objetivo de que tus usuarios vean lo que te

propones. Ellas son:

serif: una fuente con pequeños remates decorativos en los finales de los trazos que componen las letras.

Busca "serif" para ver a qué nos referimos.

sans-serif: una fuente sin adornos, como esta. No tiene las cositas de los extremos de las letras de una

fuente serif.

cursive: ¡Es una fuente que parece a mano alzada! Luce como escritura cursiva.

¡Te mostraremos cómo importar tus propias fuentes en un curso posterior! Esto te ayudará a asegurarte de

que la persona que está viendo tu página tiene todas las fuentes que quieres que tenga.

Haz que font-family del encabezado <h1> sea serif , la de <h2> sea sans-serif y la de <h3> sea cursive .

Ejemplo:



</head><body>

<h1>¡Cuando sea grande voy a ser una fuente serif!</h1><h2>Yo voy a ser una fuente sans-serif.</h2><h3>¡Yo voy a ser cursive!</h3>

</body></html>

CSS:

h1{ font-family:serif;}

h2{ font-family:sans-serif; }

h3{ font-family:cursive; }

Selección de elementos de HTML

1. Background color, height, y width

¿Recuerdas a nuestra amiga <div> , y cómo la usamos para hacer esos bloques multicolores? ¡Es hora de que

construyas tus propios bloques! (Bueno, bloque. Todavía no nos adelantemos.)

Hay tres propiedades para las cuales deberás determinar los valores:

1. background-color , la cual determinas con un color o valor hex

2. height , la cual determinas con un valor en píxeles

3. width , la cual también se mide en píxeles

Estos ejercicios te mostrarán un breve resumen de los diferentes elementos de HTML que puedes seleccionar y

cuáles son algunos de sus pares propiedad-valor (como los nuevos pares que mencionamos arriba). ¡Veremos más

sobre la selección de elementos de HTML en el siguiente curso!

En la pestaña stylesheet.css :

1. Haz que background-color tenga como valor #cc0000 , así: background-color:#cc0000;

2. Haz que height tenga como valor 100px , así: height: 100px;

3. Haz que width también tenga como valor 100px .

Ejemplo:


<head><link type="text/css" rel="stylesheet" href="stylesheet.css"/>


<div>

</div></body>

</html>

CSS:

div{ background-color:#cc0000; height:100px; width:100px;}

Resultado:

2. Al borde de la locura

Muchos elementos de HTML admiten la propiedad border . Esta puede ser especialmente útil con las tablas.

La propiedad border a su vez admite varios valores. Por ejemplo, para hacer un borde de 2 píxeles de ancho,

sólido, y de color rojo, debes escribir

selector {

border: 2px solid red;

}

Los bordes: algo bastante elaborado.

En la pestaña stylesheet.css :

1. Haz que tus selectores td (celdas de datos de tabla) tengan height de 50px , de manera que podamos verlos

mejor cuando agreguemos nuestro borde.

2. Dale a tus td una propiedad border de 1px dashed blue .

3. Dale a tu table una propiedad border de 1px solid black .

Ejemplo:


<head><link type="text/css" rel="stylesheet" href="stylesheet.css"/><title></title>

</head><body>

<table><thead>

<th colspan="3">¡Nueve bloques!</th></thead><tbody>

<tr><td></td><td></td><td></td>

</tr><tr>

<td></td><td></td><td></td>

</tr><tr>

<td></td><td></td><td></td>

</tr></tbody>

</table></body>

</html>

CSS:

td{ height:50px; border:1px dashed blue;}

table{ border:1px solid black; }

Resultado:

3. Enlaces y text-decoration

Los enlaces tienen muchas de las mismas propiedades del texto normal: puedes cambiarle la fuente, el color, el

tamaño, y así sucesivamente.

Pero los enlaces también tienen una propiedad, text-decoration , que puedes modificar para darles un toque un

poco más personalizado. Probablemente estás acostumbrado a ver enlaces que son de color azul y están

subrayados, ¿verdad? Pues bien, ¡no tiene que ser de esa manera!

En la pestaña stylesheet.css , dale a tu selector a las propiedades color de #cc0000 y text-

decoration de none . ¡Observa cómo cambia el enlace en la pestaña Resultado!

Ejemplo:



</head><body>

<p>¡El siguiente enlace lleva hacia Google!</p><a href="http://www.google.com/">Google</a>

</body></html>

CSS:

a{ color:#CC0000; text-decoration: none;}

Resultado:

¡El siguiente enlace lleva hacia Google!

Google

¿Recuerdas la sintaxis para los valores de respaldo?

selector {

propiedad: mejorValor, siguienteMejorValor

}

http://www.google.com/

Ejemplo:


<head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/>


<h1>Codigo</h1> <h1>Code</h1> <p>Programacion</p> <p>Salinas</p>

</body></html>

CSS:

h1{ font-family:Verdana,sans-serif; color:#576D94;

}

p{ color:#4A4943; font-size:18px; font-family:Garamond,serif;}

Resultado:

Codigo

Code

Programacion

Salinas

css

Documents