CSS 3

Training and best practices

 CSS Definition
Is a stylesheet language.
describes display semantics (i.e. the look and
formatting of HTML elements).
Main use is for styling HTML documents.
Helps us separate content from presentation,
which improves accessibility and flexibility in
theming.
 How does it work?
A style is a definition of attributes such as fonts,
color, widths, heights, margins, paddings... etc.
Each style has a unique name; a selector.
Selectors and their style configuration are
defined in one place.
In our HTML, we only create relationships
between elements and selectors.
<table>
Classic HTML
<tr>
<td bgcolor=”#FFCCCC”
align=”left”>
<font face=”arial” size=”2”
color=”red”>
<b>This is some bold text....</b>
</font>
</td>
</tr>
 With CSS
<table>

<tr>
<td class=”subtext”>

This is some bold text...

</td>
</tr>
</table>
 With CSS
.subtext {

font-family: arial;
size: 2;
color: red;
background-color: #FFCCCC;
}
 Selectors

Selectors are names you give to different styles.

In style definition you define how each selector
should work.
In body of your page, you refer to these styles to
apply their settings.
 Type of selectors
HTML selectors: Used for defining style
associated to an HTML tag (a way to redefine
look of tags).
Class selectors: Used to define styles that can be
used on any tag, regardless of
ID selectors: Used to define styles relating to
objects with a unique ID.
 Where can we use CSS

Inline: using the “style” attribute.

Linked: using the link tag in the head area.
Embedded: using the <style> tag anywhere
within the body or head area.
 Anatomy of CSS code

declaration

p { color: red }

valu
selector
property e
 Carrier tags
The <div> and <span> tags are particularly
useful in combination with class selectors.

Both are “dummy” tags that don’t do anything

on their own, but combined with CSS they are
provide placeholders to whatever style you want
to apply.
 <span>

<span> is an inline tag, meaning that no line

breaks are inserted before or after the use of it.
<div> is a block tag, meaning that line breaks
are automatically inserted to distance blocks
from surrounding content.
DEMO
 Colors
Available in three flavors:

literal: red, white, black... etc.

hex: #fff, #cc0012
rgb and rgba: rgb(255,255,255) or
rgba(255,255,255, 0.2)
You have three color setting options:

Setting the foreground color for content

Setting the background color for content
 Background Colors
background-color: #444444
background-image: url(../img/logo.png);

Repeating options:
no-repeat, repeat-x, repeat-y
Position options:
top, center, bottom, or numerical
Margins and paddings
 Margins and paddings
margin: 2px;
margin: 2px 4px 2px 4px;
margin: 2px 4px;
margin-top: 2px;

(margin-left, margin-right, margin-

bottom)
 Margins and paddings
padding: 2px;
padding: 2px 4px 2px 4px;
padding: 2px 4px;
padding-top: 2px;

(padding-left, padding-right, padding-

bottom)
 Borders

border-width: 1px;
border-color: #ccc;
border-style: solid
border: solid 1px #ccc;
 Height and Width

height: 10px;
width: 300px;
width: 100% and height: 100% are possible for
items inside fixed width and height containers.
Caveat!
Floats
Floats
 How to float?

#picture {

float: left;
width: 100px; (this is important)
}
#column1 {

Floating columns
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}

#column3 {
 Clearing floats
Make sure to clear floats when you want to
return to the normal block or inline flow.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>

<h1>Bill Gates</h1>

<p class="clearfix">causas naturales et

antecedentes, idciro etiam nostrarum
voluntatum...</p>
 Clearing floats
Make sure to clear floats when you want to
return to the normal block or inline flow.
#picture {
float:left;
width: 100px;
}

.clearfix {
clear:both;
Positioning
The Principle
 Positioning
Absolute:

h1 {
position: absolute;
top: 100px;
left: 200px;
}
Positioning
Relative:
#item1 {
Positioning
position:relative;
left: 350px;
bottom: 150px;
}

#item2 {
position:relative;
left: 150px;
 Layering

z-index
Hide / Show Elements

Display: none vs. visibility: hidden

display: block;
display: inline;
display: inline-block;
 Pseudo-classes
a:link
a:visited
a:hover
a:active
*:first-child
*:last-child
*:nth-child(2) do this every 2nd occurrence of
this element in its parent group.
PRACTICAL DEMO
 Common Mistakes

More than one CSS file.

Serve CSS without caching.
Do not minify CSS in production environment.
CSS file larger than 100Kb
 Best practices
Reset the style before you start

CSS Resets available on the internet

Eric Meyer’s 2.0 reset
HTML5 Doctor
Alternatively, use Normalize.css
 Best practices

Apple consistent font sizes

Remove underline from links
Remove borders from linked images