Hojas de Estilo (CSS)

CSS Básico

Métodos para producir estilos

<p>
	<font face="Arial">Welcome to Greasy Joe's.</font>
	You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat 
	<font size="+4" color="red">OUR</font> prices!
</p>

Cascading Style Sheets (CSS): <link> 

<head>
	...
	<link href="filename" rel="stylesheet" />
	...
</head>

<link href="style.css" rel="stylesheet" />

Cascading Style Sheets

Incrustado de hojas de estilo: <style> 

<head>
	<style type="text/css">
		p { font-family: sans-serif; color: red; }
		h2 { background-color: yellow; }
	</style>
</head>

Estilos Inline: el atributo style 

<p style="font-family: sans-serif; color: red;">
This is a paragraph</p>

Contenido vs. presentación

Regla sintáctica básica CSS 

selector {
	property: value;
	property: value;
	...
	property: value;
}

p {
  font-family: sans-serif;
  color: red;
}

CSS 3 nuevas características

Estilos Body

body {
	font-size: 16px;
}

Estilos con valores diferentes

body { color: green; }
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }

This paragraph uses the first style above.

This heading uses both styles above.

Comentarios CSS: /* ... */ 

/* Este es un comentario.
  Puede estar en varias líneas del fichero CSS. */
p {
	color: red;
	background-color: aqua;
}

Estilos heredados (explicación) 

body { font-family: sans-serif; background-color: yellow; }
p { color: red; background-color: aqua; }
a { text-decoration: overline underline; }
h2 { font-weight: bold; text-align: center; }

This is a heading.

A styled paragraph. Previous slides are available on the web site.

  • a bulleted list

Propiedades CSS para colores 

p {
	color: red;
	background-color: yellow;
}

Este párrafo usa el estilo anterior.

propiedad descripción
color color of the element's text
background-color color that will appear behind the element

Una página de referencia de los diferentes colores en este enlace .

Chrome y otros navegadores tienen una utilidad (Color Picker) para seleccionar el color de manera interactiva

Especificación de colores

p { color: red; }
h2 { color: rgb(128, 0, 196); }
h4 { color: #FF8800; }

Este párrafo usa el primer estilo de arriba.

Este h2 usa el segundo estilo de arriba.

Este h4 usa el tercer estilo de arriba.

Propiedades de backgrounds CSS

propiedad descripción
background-color color to fill background
background-image image to place in background
background-position placement of bg image within element
background-repeat whether/how bg image should be repeated
background-attachment whether bg image scrolls with page
background shorthand to set all background properties

background-image

body {
	background-image: url("images/draft.jpg");
}

Este es el primer párrafo

Este es el segundo párrafo...
Ocupa dos líneas

background-repeat

body {
	background-image: url("images/draft.jpg");
	background-repeat: repeat-x;
}

Este es el primer párrafo

Este es el segundo párrafo...
Ocupa dos líneas

background-position

body {
	background-image: url("images/draft.jpg");
	background-repeat: no-repeat;
	background-position: 370px 20px;
}

Este es el primer párrafo

Este es el segundo párrafo...
Ocupa dos líneas

Propiedades CSS para fonts

propiedad descripción
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
Lista completa de propiedades font

font-family

p {
	font-family: Georgia;
}
h2 {
	font-family: "Courier New";
}

Este párrafo usa el primer estilo anterior.

Este h2 usa el segundo estilo anterior.

Otros detalles de font-family

p {
	font-family: Garamond, "Times New Roman", serif;
}

Este párrafo usa el estilo anterior.

  • if the first font is not found on the user's computer, the next is tried
  • generally should specify similar fonts
  • placing a generic font name at the end of your font-family value ensures that every computer will use a valid font

font-size

p {
	font-size: 14pt;
}

Este párrafo usa el estilo anterior.

  • pt specifies number of point, where a point is 1/72 of an inch onscreen
  • px specifies a number of pixels on the screen
  • em specifies number of m-widths, where 1 em is equal to the font's current size

font-weight, font-style 

p {
	font-weight: bold;
	font-style: italic;
}

Este párrafo usa el estilo anterior.

Google Fonts

MathJax - Fórmulas matemáticas

Agrupando estilos

p, h1, h2 {
	color: green;
}
h2 {
	background-color: yellow;
}

Este párrafo usa el estilo anterior.

Este h2 usa el estilo de arriba.

Propiedades CSS para texto

propiedad descripción
text-align alignment of text within its element
text-decoration decorations such as underlining
text-indent indents the first letter of each paragraph
text-shadow a colored shadow near an existing piece of text css3
line-height,
word-spacing,
letter-spacing 		gaps between the various portions of the text
Complete list of text properties

text-align

blockquote { text-align: justify; }
h2 { text-align: center; }

The Emperor's Quote

[TO LUKE SKYWALKER] The alliance... will die. As will your friends. Good, I can feel your anger. I am unarmed. Take your weapon. Strike me down with all of your hatred and your journey towards the dark side will be complete.

text-decoration

p {
	text-decoration: underline;
}

This paragraph uses the style above.

text-shadow css3 

p {
	font-weight: bold;
	text-shadow: -2px 5px gray;
}

This paragraph uses the style above.

La propiedad list-style-type 

ol { list-style-type: lower-roman; }

CSS pseudo-classes

a:link    { color: #FF0000; }      /* unvisited link */
a:visited { color: #00FF00; }      /* visited link */
a:hover   { color: #FF00FF; }      /* mouse over link */
Buy early, buy often!
class description
:active an activated or selected element
:focus an element that has the keyboard focus
:hover an element that has the mouse over it
:link a link that has not been visited
:visited a link that has already been visited
:first-letter the first letter of text inside an element
:first-line the first line of text inside an element
:first-child an element that is the first one to appear inside another
:nth-child(N) applies to every Nth child of a given parent

Estilos de secciones de página

Motivación para secciones de página

flow

El atributo HTML id 

<p>Spatula City!  Spatula City!</p>
<p id="mission">Our mission is to provide the most
spectacular spatulas and splurge on our specials until our
customers <q>esplode</q> with splendor!</p>

Enlazado a secciones de una página

<p>Visit <a href=
		"http://www.textpad.com/download/index.html#downloads">
	textpad.com</a> to get the TextPad editor.</p>

<p><a href="#mission">View our Mission Statement</a></p>

CSS selectores ID 

#mission {
	font-style: italic;
	font-family: "Garamond", "Century Gothic", serif;
}

Spatula City! Spatula City!

Our mission is to provide the most spectacular spatulas and splurge on our specials until our customers esplode with splendor!

El atributo HTML class 

<p class="shout">Spatula City!  Spatula City!</p>
<p class="special">See our spectacular spatula specials!</p>
<p class="special">Today only: satisfaction guaranteed.</p>

CSS selectores class 

.special {                   /* any element with class="special" */
	background-color: yellow;
	font-weight: bold;
}
p.shout {                    /* only p elements with class="shout" */
	color: red;
	font-family: cursive;
}

Spatula City! Spatula City!

See our spectacular spatula specials!

Today only: satisfaction guaranteed.

CSS para los ejemplos siguientes

.special {
	background-color: yellow;
	font-weight: bold;
}
.shout {
	color: red;
	font-family: cursive;
}

Clases Múltiples 

<h2>Spatula City!  Spatula City!</h2>
<p class="special">See our spectacular spatula specials!</p>
<p class="special shout">Satisfaction guaranteed.</p>
<p class="shout">We'll beat any advertised price!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

Satisfaction guaranteed.

We'll beat any advertised price!

Especificidad de estilo

<aside>
	<p>
		<em id="recent" class="awesome">The 5 stages of H.F.S.</em>
	</p>
</aside>

aside               { color: gray; }
p                   { color: green; }
em                  { color: yellow; }
.awesome            { color: blue; }
em.awesome          { color: red; }
#recent             { color: black; }
em#recent.awesome   { color: orange;}

The 5 stages of H.F.S.

Cuando se aplican múltiples estilos a un elemento y tienen la misma precedencia de origen. El más específico se aplica. Si tienen la misma especifidad, se usará el último.

Secciones de una página: <div>

una sección o división de una página HTML (block) 

<div class="shout">
	<h2>Spatula City!  Spatula City!</h2>
	<p class="special">See our spectacular spatula specials!</p>
	<p>We'll beat any advertised price!</p>
</div>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

Secciones Inline: <span>

elemento inline usado puramente como rango de aplicación de estilos 

<h2>Spatula City!  Spatula City!</h2>
<p>See our <span class="special">spectacular</span> spatula specials!</p>
<p>We'll beat <span class="shout">any advertised price</span>!</p>

Spatula City! Spatula City!

See our spectacular spatula specials!

We'll beat any advertised price!

CSS context selectors 

selector1 selector2 {
	properties
}

selector1 > selector2 {
	properties
}

Ejemplo Context selector 

<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
<ul>
	<li>The <strong>best</strong> prices in town!</li>
	<li>Act while supplies last!</li>
</ul>

li strong { text-decoration: underline; }

Ejemplo más complejo

<div id="ad">
	<p>Shop at <strong>Hardwick's Hardware</strong>...</p>
	<ul>
		<li class="important">The <strong>best</strong> prices!</li>
		<li>Act <strong>while supplies last!</strong></li>
	</ul>
</div>

#ad li.important strong { text-decoration: underline; }

CSS Box Model

box model

Document flow - elementos block e inline

flow

CSS propiedades para bordes

h2 { border: 5px solid red; }

This is a heading.

property description
border thickness/style/color of border on all 4 sides

Más propiedades de bordes

property description
border-color, border-width,
border-style 		specific properties of border on all 4 sides
border-bottom, border-left,
border-right, border-top 		all properties of border on a particular side
border-bottom-color, border-bottom-style,
border-bottom-width, border-left-color,
border-left-style, border-left-width,
border-right-color, border-right-style,
border-right-width, border-top-color,
border-top-style, border-top-width 		properties of border on a particular side
Complete list of border properties

Ejemplo de borde

h2 {
	border-left: thick dotted #CC0088;
	border-bottom-color: rgb(0, 128, 128);
	border-bottom-style: double;
}

This is a heading.

Esquinas redondeadas con border-radius css3 

p {
	border: 3px solid blue;
	border-radius: 12px;
	padding: 0.5em;
}

This is a paragraph.

This is another paragraph.
It spans multiple lines.

CSS propiedades para padding

property description
padding padding on all 4 sides
padding-bottom padding on bottom side only
padding-left padding on left side only
padding-right padding on right side only
padding-top padding on top side only
Complete list of padding properties

Ejemplo Padding 1

p { padding: 20px; border: 3px solid black; }
h2 { padding: 0px; background-color: yellow; }

This is the first paragraph

This is the second paragraph

This is a heading

Ejemplo Padding 2

p {
	padding-left: 200px; padding-top: 30px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

CSS propiedades para márgenes

property description
margin margin on all 4 sides
margin-bottom margin on bottom side only
margin-left margin on left side only
margin-right margin on right side only
margin-top margin on top side only
Complete list of margin properties

Ejemplo Margin 1

p {
	margin: 50px;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

Ejemplo Margin 2

p {
	margin-left: 8em;
	background-color: fuchsia;
}

This is the first paragraph

This is the second paragraph

CSS propiedades de dimensions 

p { width: 350px; background-color: yellow; }
h2 { width: 50%; background-color: aqua; }

This paragraph uses the first style above.

An h2 heading

property description
width, height how wide or tall to make this element
(block elements only)
max-width, max-height,
min-width, min-height 		max/min size of this element in given dimension

Centrado de un elemento de bloque: auto margins

p {
	margin-left: auto;
	margin-right: auto;
	width: 750px;
}

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Elementos Flotantes

La propiedad CSS float (referencia)

property description
float side to hover on; can be left, right, or none (default)

Ejemplo Float

<img src="images/borat.jpg" alt="Borat" class="headericon" />
Borat Sagdiyev (born July 30, 1972) is a ...

img.headericon {
	float: left;
}
Borat Borat Sagdiyev (born July 30, 1972) is a fictional Kazakhstani journalist played by British-Jewish comedian Sacha Baron Cohen. He is the main character portrayed in the controversial and successful film Borat: Cultural Learnings of America for Make Benefit Glorious Nation of Kazakhstan ...

Float vs. alignment

none 1 before
none 2 before
right #1
right #2
left #1
left #2
none 1 after
none 2 after

Contenido flotante y ancho

I am not floating, no width set

I am floating right, no width set

I am floating right, no width set, but my text is very long so this paragraph doesn't really seem like it's floating at all, darn

I am not floating, 45% width

I am floating right, 45% width

La propiedad clear 

p { background-color: fuchsia; }
h2 { clear: right; background-color: yellow; }

homestar runnerHomestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ...

My Homestar Runner Fan Site

property description
clear disallows floating elements from overlapping this element;
can be left, right, both, or none (default)

diagrama Clear

div#sidebar { float: right; }
p { clear: right; }

float clear

Error común: contenedor demasiado pequeño 

<p><img src="images/homestar_runner.png" alt="homestar runner" />
	Homestar Runner is a Flash animated Internet cartoon.
	It mixes surreal humour with ....</p>

p { border: 2px dashed black; }
img { float: right; }

La propiedad overflow 

p { border: 2px dashed black; overflow: hidden; }

homestar runner Homestar Runner is a Flash animated Internet cartoon. It mixes surreal humour with ....

property description
overflow specifies what to do if an element's content is too large;
can be auto, visible, hidden, or scroll

Disposición Multi-columnas 

<div>
	<p>the first paragraph</p>
	<p>the second paragraph</p>
	<p>the third paragraph</p>
	Some other text that is important
</div>

p { float: right; width: 20%; margin: 0.5em;
    border: 2px solid black; }
div { border: 3px dotted green; overflow: hidden; }

Tamaño y posicionado

La propiedad position 

div#ad {
	position: fixed;
	right: 10%;
	top: 45%;
}
property value description
position static default position
relative offset from its normal static position
absolute a fixed position within its containing element
fixed a fixed position within the browser window
top, bottom,
left, right 		positions of box's corners

Posicionado Absoluto

#menubar {
	position: absolute;
	left: 400px;
	top: 50px;
}
absolute positioning

Posicionado relativo 

#area2 { position: relative; }
absolute positioning

Posicionado fijo

fixed positioning

Alineamiento vs. flotante vs. posición

  1. si es posible disponer un elemento alineando su contenido
    • alineamiento horizontal: text-align
      • asignarlo en un elemento bloque; esto alinea el contenido dentro dentro de él (no el elemento bloque en sí)
    • alineamiento vertical: vertical-align
      • asignarlo en un elemento inline, para alinearlo verticalmente dentro del elemento contenedor
  2. si el alineamiento no funciona, intentar el elemento flotante
  3. si no funciona flotar, probar el posicionamiento del elemento
    • el posicionado absoluto/fijo debe ser el último recurso y no debe ser sobreusado

Propiedad vertical-align

property description
vertical-align specifies where an inline element should be aligned vertically, with respect to other content on the same line within its block element's box

Ejemplo vertical-align

<p style="background-color: yellow;">
<span style="vertical-align: top; border: 1px solid red;">
Don't be sad!  Turn that frown
<img src="images/sad.jpg" alt="sad" /> upside down!
<img style="vertical-align: bottom" src="images/smiley.jpg" alt="smile" />
Smiling burns calories, you know.
<img style="vertical-align: middle" src="images/puppy.jpg" alt="puppy" />
Anyway, look at this cute puppy; isn't he adorable!  So cheer up,
and have a nice day.  The End.
</span></p>

Error común: espacio debajo de imagen

<p style="background-color: red; padding: 0px; margin: 0px">
<img src="images/smiley.png" alt="smile" />
</p>

Detalles sobre inline boxes

Propiedad display 

h2 { display: inline; background-color: yellow; }

This is a heading

This is another heading

property description
display sets the type of CSS box model an element is displayed with

Flexbox

Mostrando elementos block como inline

<ul id="topmenu">
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

#topmenu li {
	display: inline;
	border: 2px solid gray;
	margin-right: 1em;
}

Propiedad visibility 

p.secret {
	visibility: hidden;
}

Since nobody can see this anyway: ca-ca poo-poo pee-pee!!!

property description
visibility sets whether an element should be shown onscreen;
can be visible (default) or hidden

Propiedad opacity css3 

body     { background-image: url("images/marty-mcfly.jpg"); background-repeat: repeat; }
p        { background-color: yellow; margin: 0; padding: 0.25em; }
p.mcfly1 { opacity: 0.75; }
p.mcfly2 { opacity: 0.50; }
p.mcfly3 { opacity: 0.25; }

Marty McFly in 1985

Marty McFly in 1955 fading away, stage 1

Marty McFly in 1955 fading away, stage 2

Marty McFly in 1955 fading away, stage 3

property description
opacity how not-transparent the element is; value ranges from 1.0 (opaque) to 0.0 (transparent)

Animación

Esta es una tecnología experimental!

Validación W3C CSS

CSS Frameworks

Social Bars