Programacin Web

Unidad 3. Lenguaje de presentacin

The benefits of CSS3

Traditionally, the web design process (from a visual perspective)

began by creating a new design in Photoshop and then attempting
to re-create it in HTML and CSS. This is starting to change.
With a plethora of devices, browsers, and therefore contexts to be
catered for, more and more designers are beginning to design in
the browser.

The benefits of CSS3

Specifying rich web fonts: No more creating type in an image

editor and serving it via image replacement or using a tool
Opacity and alpha channels: Create transparency without
images using opacity or rgba.
Reducing heavy scripting for simple animations: No need to
use JavaScript to create simple transitions or transforms. It
can now be handled in CSS .
3

Anatomy of a rule (or rule set)

As youre hopefully aware, a simple CSS rule is written as

follows:
selector {
property: value;
}

A property

In the following example the border is the property:

h1 {
border: 1px;
}

A property is a style that you apply to a selector. Looking at the generic

example in the previous section, a selector can be any of a number of
elements, such as an h1, p, or img element.

A declaration

A property: value pair is called a declaration. Continuing with the same

example, the declaration is border: 1px; , as follows:

h1 {
border: 1px;
}
h1 {
border: 1px dotted red;
}

Declaration block

A rule can have more than one declarationand

frequently does.
h1 {
border: 1px;
border-style: dotted;
border-color: red;
}

Keywords

The CSS specification also defines a number of

keywords that can be used to define values. Our
previous example showed two additional keywords in
action: the border-style, set to dotted and the bordercolor, set to red.

Functional notation

As the W3C helpfully put it, "functional notation is used to denote colors, attributes,
and URIs in CSS3.
First, using hexadecimal:
blockquote {
background: #FF0000;
}
Second, using a keyword:
blockquote {
background: red;
}

Functional notation

Third, using functional notation:

blockquote {
background: rgb(255,0,0);
}
As the W3C put it, "The calc(<expression>) function can be used wherever
length values are allowed.
section {
float: left;
margin: 1em;
border: solid 1px;
width: calc(100%/3 - 2*1em - 2*1px);
}

10

Selectors

Selectors are the way to declare which elements the styles

should apply to and h1, blockquote, .callout, and
#lovelyweather are all selectors.

11

Styling Content and Interfaces

For far too long, we developers have hacked around CSS
to get the effects we need in our code.
Weve used JavaScript or server-side code to stripe table
rows or put focus and blur effects on our forms.
We ve had to litter our tags with additional class
attributes just so we could identify which of our fifty form
inputs we want to style.
12

Styling Content and Interfaces

But no more! CSS3 has amazing selectors that make
some of this work trivial.
A selector is a pattern that you use to help you find
elements in the HTML document so you can apply styles
to those elements.
We ll use these new selectors to style a table.
13

We ll look at these CSS features

:nth-of-type [p:nth-of-type(2n+1){color: red;}]
Finds all n elements of a certain type. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]

:first-child [p:first-child{color:blue;}]
Finds the first child element. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]

:nth-child [p:nth-child(2n+1){color: red;}]

Finds the first child element. [C2, F3.5, S3, IE9, O9.5, iOS3, A2]|
14

We ll look at these CSS features

:first-of-type [p:first-of-type{color:blue;}]
Finds the first element of the given type. [C2, F3.5, S3, IE9, O9.5, iOS3,
A2]

last-of-type [p:last-of-type{color:blue;}]
Finds the last element of the given type. [C2, F3.5, S3, IE9, O9.5, iOS3,
A2]

Column support [#content{ column-count: 2; column-gap: 20px;

column-rule: 1px solid #ddccb5; }]
Divides a content area into multiple columns. [C2, F3.5, S3, O11.1,
iOS3, A2]
15

CSS3 modularity

One major change to the evolution of CSS is the W3Cs

decision to split CSS3 into a series of modules. As the CSS
Working Group put it

16

Styling Tables with Pseudoclasses

A pseudoclass in CSS is a way to select elements
based on information that lies outside the document or
information that can t be expressed using normal
selectors.

17

18