Cap 10 - Dipartimento di Matematica e Informatica · par pefl So row you understand widths, what's...
Transcript of Cap 10 - Dipartimento di Matematica e Informatica · par pefl So row you understand widths, what's...
Cap 10
div and span
Div
Div
How we can divide a page into logical section
Identify your logical sections
Using <div>s to mark sections
Labelling the <div>s
Adding some style
Exposing even more structure
Adding structure on structure
Div in the Elixir
Taking the <div> for the test drive
Adding a border
An over-the-border test drive
Adding some real style to elixir section
Working on Elixir width
Test driving the width
The width property specifies the width for the content area only
Adding the basic style to elixirs
Test driving the new style
What we need is the way to select descendants
What we need is the way to select descendants
Changing the color of elixirs headers
A quick test drive
Fixing line height
It’s time to take little shortcut
Shortcut…
Shortcut…
Adding <span>s in three easy way
Step one and two: add the <span>s
Step three: style the <span>s
<a> and style
<a> style
Putting pseudo-classes to work
Cascade style sheet
The cascade
What’s my specifity game
Step one
Step two
Step three
Step four
Step five
Homework