By the end of today, you will be able to:
Last time, we learned:
selector { property: value; property: value; }
#
character in the selector.
.
(dot) character in
the selector.
one of these inside one of those.
DIV
and SPAN
are generic
elements, just to carry CSS. DIV is a block
element, and SPAN is a inline
element
margin:auto
.
How can you open the Chrome Inspector?
View / Developer / Developer Tools
Option-Command I (on a Mac)
Right-click (control-click) and choose "inspect element"
menu icon / More tools / Developer Tools
If you have already read the notes about Chrome's Inspector, practice your skills by following the instructions in this new example.
As we learned in the last exercise, sometimes we need to be a bit more focussed with our CSS selectors than just saying every occurrence of some tag will appear the same way. For example, it's common for hyperlinks in the nav bar to look different from ordinary hyperlinks.
How do we specify that hyperlinks inside the nav bar are to be teal and 30px bold Verdana?
navbar a { color: teal; font: 30px bold Verdana; }
nav a { color: teal; font: 30px bold Verdana; }
navbar .a { color: teal; font: 30px bold Verdana; }
#nav a { color: teal; font: 30px bold Verdana; }
Here's an example in action:
In the jsfiddle exercise last time, we used an inline style attribute to style a particular element. But you know that inline styles are frowned upon (deprecated). Instead, we should use a ...
class
id
div
span
The <DIV>
tag is used to create a generic box
(technically, a block element) that you can put other elements
into, including other DIVs! Then, you can use CSS to style the
elements. Similarly, a <SPAN>
is a generic inline
container.
By putting an ID or a CLASS onto an element, any element (not just DIV and SPAN), you can style it specially.
The difference between ID and CLASS is:
only one thing can have a particular ID
only one thing can have a particular CLASS
they are interchangeable
IDs avoid class discrimination
Which is most likely to use ID rather than CLASS:
important
best
optional
highlight
How would you create a CSS rule such that elements with the class "optional" are in a smaller, gray font?
optional { font-size: smaller; color: gray}
#optional { font-size: smaller; color: gray}
.optional { font-size: smaller; color: gray}
class=optional { font-size: smaller; color: gray}
How would you apply that CSS rule to a paragraph?
<p id="optional">lorem ipsum</p>
<p style="optional">lorem ipsum</p>
<p class="optional">lorem ipsum</p>
none of above
Why not name the class gray
rather than optional
?
One of the many powerful ways to use CSS selectors is to use more than one, namely descendant selectors. For example, as we saw before, to style hyperlinks with the nav, we can do:
nav a { color: teal; font: 30px bold Verdana; }
This idea can be combined with classes and ids in lots of powerful ways.
Suppose you want the font of paragraphs inside the legal disclaimer to be 5px silver. How would you do that?
#disclaimer p { font-size: 5px; color: silver}
p .disclaimer { font-size: 5px; color: silver}
.disclaimer p { font-size: 5px; color: silver}
p #disclaimer { font-size: 5px; color: silver}
Suppose you want hyperlinks that are inside something that is optional to lack the usual underlining. How would you do that?
a optional { text-decoration: none}
a .optional { text-decoration: none}
.optional a { text-decoration: none}
optional a { text-decoration: none}
From outside to inside, a box (block) has
border, margins, padding
margins, padding, border
padding, margins, border
margins, border, padding
The difference between margins and padding is...
indistinguishable if there's no border
padding has background color, margins don't
padding is measured in EM; margins in PX
none; there is no difference
This example shows how div-s are
block elements and spans are inline elements.
Applying certain properties to divs and spans doesn't produce the same results.
Check which of the span
CSS styles have been applied to the style
elements. Play with setting styles for margin and padding to the different spans.
The property width
of an element refers to the width occupied by
its content. By adding margin, padding, and borders, the width the element occupies
in the page increases. The following examples show different ways to specify
values for width
and its effect on the page:
This short example shows text
aligned center and right. Resize the browser window
to notice how the text flows to always fill the space. Use Inspector
to set the body
width to 600px and give it a border (enter the styles in the rule for
element.style
).
Now try to resize the browser window again. What has changed?
Given this example where the body
is centered with text-align, try to enter the needed CSS rules for ol
, so
that the list is centered and the numbers are close to the list
items. It should look like this:
If you'd like visited links to be green, unvisited links to be blue, and links that the mouse is over to be red, you would do ...
a:visited { color: green } a:unvisited { color: blue } a:mouseover { color: red }
a:link { color: blue } a:visited { color: green } a:hover { color: red }
a:hover { color: red } a:visited { color: green } a:link { color: blue }
a:active { color: green } a:link { color: blue } a:hover { color: red }
Note that it matters what order you do these in. See CSS Links
Will be posted later, visit again after .