Complete Css Style Sheet Resource: The

Showing posts with label The. Show all posts

Saturday, October 23, 2010

Setting the line-height Using Percentage

It is worth setting line-height in the body selector, as all elements can benefit from inheriting
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}

The browser window on the right clearly shows that a line-height of 200% creates spacing
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.

Other line-height Values
As well as the very flexible method of setting line-height using percentage, some other values
can be used.

Normal
Sets what the experts call a “reasonable distance between lines.” In actuality, this setting is
exactly the same as specifying no line-height at all, and it is only useful if you wish to override
inherited line-height for a particular element.
line-height:normal;

Number
Sets a number that will be multiplied with the current font-size to set the distance between
the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in
a space of 24 pixels between lines of text.
line-height:2;

Length
Sets a fixed distance between the lines, which is great for precision, but it is important to
remember that when text is resized, the line spaces will not increase or decrease at the same
ratio as the text.
line-height:8px;
To ensure appropriate scaling when text is resized, use a flexible length measurement such as
ems or percentage.

Convey the Mood with the Right Font

The right font for the right job communicates with the user instantly. Your text is the first ingredient
to appear as the page is downloaded, and it can instantly tell the user whether the web
site is serious or friendly, modern or traditional, formal or casual. Do you want the web site to
give the impression of a newspaper or journal, newsletter or fact sheet? If you do not want to
convey such an authoritative standpoint, then maybe something humorous or light-hearted is
needed? Choosing the right font or combination of fonts is key to creating the right impression
from the outset.

Monday, October 4, 2010

Margin, Padding, and the Body in Css

Back to good old browser default style sheets again. In order to ensure your page content sits
exactly as you desire on all browsers and doesn’t inherit browser defaults, it is important to
consider resetting the page margin and padding in the body selector.
Netscape and IE place a default margin of 8px around the <body> element. The Opera browser
confuses things further by applying a default padding of 8px. Therefore, until all browsers agree
and can settle on either margin or padding to provide this default spacing, it is recommended
that margin and padding be given the values you desire in the body selector:
/* Define default values for the whole site */
body {
margin: 0;
padding: 0;
}
Obviously values of 0 will remove the default spacing entirely, so it may be that you prefer
to set the margin to 10px, 20px, or whatever you need.
Other methods are available that will reset all margins and padding to a defined value that
is inherited throughout unless you declare otherwise. Such methods should be used with caution however, as all headings, paragraphs, lists, and so on will also inherit the value, and if the value
is 0, you might end up in trouble, with all of your page elements bunched together. This would
then require margin and/or padding values to be declared for all headings, paragraphs, and other
elements that typically have sensible default spacing values.

Careful with the Cascade

It can sometimes be hard to track the cascade across several style sheets. For example, if two
selectors have matching properties but varying values, e.g., each instance of a selector was made up
of font-family, color, and background, but with different values for each, the selector in the
style sheet with the highest hierarchy would win out and be rendered. Things get even more
interesting when each selector has unique properties.
Let’s clarify this with an example. Imagine that in a modular style sheet such as forms.css
you have defined a class called highlight as follows:
/* Highlight important form information */
.highlight {
color:#F00;
font-style:italic;
text-decoration:underline;
}
Should there be no other instance of that selector in any style sheets higher up the hierarchy,
highlight will indeed be rendered in red italicized text with a neat underline. However,
imagine that a few weeks later in external.css, a style sheet of more hierarchical importance,
you’ve forgotten about the original class and decide to reuse highlight as follows:
/* Highlight author’s name underneath articles */
.highlight {
color:#F00;
font-style:normal;
}
First, the cascade dictates that the font-style value for highlight in external.css (fontstyle:
normal;) is of greater importance than the value in forms.css (font-style: italic;).
Therefore, all instances of highlight sitewide will be normal red text, not italicized. Without
realizing it, you have just turned all your lovely italicized form text into boring normal text, and
you probably won’t notice until you revisit your forms in your browser.
And to further illustrate this pitfall, the new highlight class in external.css does not define a
value for text-decoration, so the normal red text you wished to create will be underlined, taking
that value from forms.css. Sure, your new highlight class takes precedence in the hierarchy,
but unless you turn off the underline in external.css, the cascade will still find its way to the
original rule and look for anything not being overruled.

About Bottom of the cascade

Always at the bottom of the cascade hierarchy is the browser’s own default style sheet. Typically,
the browser style sheet will have default settings for headings, paragraphs, lists, and all common
(X)HTML elements. It is the browser style sheet that makes links blue and visited links purple.
View any page in your browser that isn’t styled with CSS, and you will see the default browser styles.
So long as you define all the elements you wish to control, the default browser CSS will be
overridden. Remember that the default styling was designed for numerous reasons, specifically
legibility, accessibility, and common understanding. It is up to you to integrate these accepted
conventions into your designs, and seek to improve them, not disregard them.

Using the Cascade in Css

CSS. Cascading Style Sheets. Cascading. Lovely word. Hmm. Many never stop to think about
that first word, and we are all guilty of just referring to CSS as style sheets. It is a shame that
many ignore the first part of the acronym, when it is the cascade that gives CSS developers the
most power.
Remember that a class value will override that of a base CSS rule. Well, there is also a hierarchy
to be embraced with multiple style sheets dependent on the order and method by which
they are applied to the (X)HTML. That is the cascade.
If you are applying CSS only from one external style sheet, then there is no cascade, as
nothing is applied before or after that style sheet. Things get interesting when you begin to
combine style sheets or methods of application. Let’s look at three examples.

The Cascade Through Varying Methods of Application

In Chapter 1, you learned of the various methods for applying CSS—inline, embedded, external,
and importing. It is possible to combine these methods to have an effect on the cascade.
Let’s say that you are storing all of your CSS rules in an external style sheet that is dictating
the presentation across your vast web site. For whatever reason, you need to overrule some of
the external styles for just one web page.
Time to embrace the cascade. For that one web page, you could use embedded CSS in the
<head> of the page, redefining the appropriate rules right there. When that web page is loaded,
the browser will apply the CSS it first encounters—the embedded CSS—before looking at your
external CSS to apply the remaining rules. Any identical selectors in the external style sheet will
be ignored.
Need further control? No problem. At the top of the hierarchy are inline styles—the CSS
added directly to the (X)HTML elements. Whatever styles you apply inline will overrule any
declarations in the <head> of the page or in an external style sheet.

Example
To see this in action, you can run through the following simple example:
1. Open external.css and define the default paragraph color (as in Chapter 1) with
p {color#F00;} and save the file.
2. View external.html in your browser. Assuming you are still applying CSS using
external.css, any default paragraphs should be red.
3. Now open external.html and apply the embedded style <style type="text/css">p
{color: #333;}</style> in the head of the template and save the file.
4. Reload external.html in your browser. Now any default paragraphs should be dark
gray, as the embedded CSS is overriding the linked style sheet.
5. Finally, find a default paragraph in external.html and define it with an inline style, such
as <p style="color: #CCC">, and save the template.
6. Reload external.html in your browser. Now the paragraph to which you applied the
inline style should be light gray, as the inline CSS is overriding the embedded CSS and
the linked style sheet. Any other default paragraphs should still be dark gray based on
the embedded style.
Thus the hierarchy is in place. The browser performs the inline rule first, and then looks
to perform any other rules embedded in the <head>, and finally looks to any external files to
complete its understanding of the CSS you created.

The Cascade Through Multiple External Style Sheets
Another method of exploiting the cascade uses multiple external style sheets. You already
know how to link to one or more external style sheets for various platforms (such as printers
and mobile devices), and this approach is similar, except all the external files here are specifically
for the screen:

The Cascade Through Imported Style Sheets
The hierarchy is also present with imported style sheets. As with the previous examples, it’s all
about the order in which the style sheets are specified. In Chapter 1, we looked at modular CSS,
where the CSS for a site is organized into relevant style sheets, such as default styles, layout
styles, navigation styles, and so on. Here’s a similar example where four modules are imported
via a master external style sheet called external.css. external.css contains the following lines:
@import url("default.css");
@import url("layout.css");
@import url("navigation.css");
@import url("forms.css");
As you’d expect from the order, forms.css is highest in the hierarchy, whereas default.css
is apparently lowest. Let’s assume that in navigation.css (second in the hierarchy) there is a
class called highlight, used to render text red. Let’s also assume that highlight appears in
default.css, but is used to render text orange. As navigation.css has more weight due to its
place in the hierarchy, the rendered text will be red.
Yet still, forms.css isn’t necessarily top of the tree. Remember that these style sheets are
being imported via a master external style sheet. In Chapter 1, you used external.css to call in
two modular sheets. Here external.css can be used again to import the modular sheets. If you
define highlight in external.css, the declared color will override either the red or the orange
specified in the imported style sheets.
Even then, the rule in external.css can still be overridden using embedded or inline CSS
in the (X)HTML template. It’s up to you when you stop the cascade, but be careful not to get
washed away by the cascade and tie yourself in knots.

**■Note If another style sheet were to be imported through one of the modular style sheets using @import,
it would automatically be lower in the hierarchy. In a nutshell, a style sheet always has less weight than the
one calling it.

Friday, October 1, 2010

Ignoring the abbr element in CSS

Problem: The browser does not recognize the abbr element, completely ignoring it.

Solution: Use JavaScript to fix the behavior (at least for those users who have JavaScript
enabled), as shown in “<ABBR> Support in IE,” by Jason Davis (www.browserland.org/
scripts/abbrhack/). Note that since Internet Explorer 7 does not exhibit this behavior,
the script should be targeted at earlier versions of the browser only, by using conditional
comments.

Monday, September 27, 2010

The great table debate

Tables were initially intended as a means of displaying tabular data online, enabling web
designers to rapidly mark up things like price lists, statistical comparisons, specification
lists, spreadsheets, charts, forms, and so on.

It wasn’t long, however, before web designers realized that you could place any web content
within table cells, and this rapidly led to web designers chopping up Photoshop layouts
and piecing them back together in table-based web pages, often by using automated
tools. CSS should have put an end to that, but many web designers continue to use tables
for layout because they’re simple to set up—even though they cause problems (see the
“Tables for layout” section later in the chapter).
The strong will of CSS advocates, who typically shout that tables are evil, sometimes leads
designers to believe that tables should be ditched entirely—however, that’s not the case at
all. As mentioned, tables have a specific purpose in HTML, and one that’s still valid.
Therefore, the bulk of this chapter is going to look at tables in the context for which
they’re intended: the formatting of tabular data. Web page layout will be looked at in the
next chapter, which concentrates on CSS layout.

Sunday, September 26, 2010

The dos and don’ts of web navigation

Use appropriate types of navigation.
Provide alternate means of accessing information.
Ensure links stand out.
Take advantage of link states to provide feedback for users.
Get the link state order right (link, visited, hover, active).
Use styled lists for navigation.
Use CSS and as few images as possible (preferably one) for rollovers.

Don’t

Add search boxes just for the sake of it.
Use deprecated body attributes.
Style navigation links like normal body copy.
Use image maps unless absolutely necessary.
Open new windows from links or use pop-ups.
Use clunky JavaScript for rollovers.

Creating a CSS-only tab bar that automates the active page

1. Edit the body element—in the HTML page, edit the body start tag, adding the class
value shown. Its significance will be explained later.
<body id="homePage">

2. Edit the body rule. In the CSS document, amend the body rule as shown to add a
light gray background:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
background: #dddddd;
}

3. Style structural divs. Add the following #wrapper rule, which defines a set width for
the page, centers it, and sets the background color to white.
#wrapper {
width: 700px;
margin: 0 auto;
background: #ffffff;
}
Next, style the content div by adding the following rule, which adds a border to all
edges but the top one, and defines internal padding:
#content {
padding: 15px 15px 0;
border-right: 1px solid #898989;
border-bottom: 1px solid #898989;
border-left: 1px solid #898989;
}
These rules work slightly differently from those in the previous exercise. We want
the content borders to start right under the navigation, hence the padding
being applied to the top of the content div, rather than a margin below the
navContainer div.

4. Style the navContainer div. Add the following rule to style the navContainer div.
The font settings define a size and family. Avoid setting a line-height value,
because that makes it much harder to line up the tabs with the borders later. The
padding value applies some padding above the soon-to-be-created tabs, and the
border-bottom value finally surrounds all edges of the content div with a border.
Because the wrapper div has a white background, this currently shows through the
navContainer div, and so a background setting is applied, using the same background
color value as applied to the body element.
#navContainer {
font: 1.1em Arial, Helvetica, sans-serif;
text-align: center;
padding: 20px 0 0;
border-bottom: 1px solid #909090;
background: #dddddd;
}

5. Style the list. Add the following rule to style the list. The bottom padding value
(5px here) adds padding to the bottom of the list, and needs to be equivalent to
the padding value you want to be under the text in each tab.
#navigation ul {
padding: 0 0 5px;
}
Next, style the list items to make them display inline.
#navigation li {
display: inline;
}

6. Add the following rule to style the links. Most of the property values should be
familiar by now. Note how the border value applies a border to each link; this, in
tandem with the background value, gives all the links the appearance of background
tabs. The padding setting provides space around the link contents (and
note how the vertical padding value is the same as the bottom padding value in
step 5), and the margin-right setting adds some space between each tab.
#navigation a:link, #navigation a:visited {
text-transform: uppercase;
text-decoration: none;
color: #000000;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
As per the previous exercise, the unwanted right-hand value for the rightmost tab
(in this case, the margin-right setting) can be overridden by using a contextual
selector that takes advantage of the id values defined in the HTML document’s
unordered list items.
#navigation #contactDetailsPageLink a:link, #navigation
å #contactDetailsPageLink a:visited {
margin-right: 0;
}

7. Style other link states. Add the following two rules to define the other link states.
The first makes the text slightly lighter when a link has been visited. The second
brings back the default underline on the hover state, along with making the link’s
background slightly lighter.
#navigation a:visited {
color: #222222;
}
#navigation a:hover {
text-decoration: underline;
background: #cccccc;
}

8. Create page-specific overrides. Remember back in step 1, when you defined an id
value for the body element? This can now be used to automate the active tab via
the following rule:
#homePage #homePageLink a:link, #homePage #homePageLink a:visited,
å #servicesPage #servicesPageLink a:link, #servicesPage
å #servicesPageLink a:visited, #customerSupportPage
å #customerSupportPageLink a:link, #customerSupportPage
å #customerSupportPageLink a:visited, #contactDetailsPage
å #contactDetailsPageLink a:link, #contactDetailsPage
å #contactDetailsPageLink a:visited {
background: #ffffff;
border-bottom-color: #ffffff;
}
The declaration is simple: a white background is applied and the bottom border
color is changed to white. The grouped selector is more complex, so I’ll start by
explaining the first contextual selector, which is #homePage #homePageLink a:link.
What this means is, “Apply the declaration to the link within an element with an id
of homePageLink that’s in an element with an id of homePage.” In the page you’ve
been working on, the body element has an id of homePage, and the first list element
in the unordered list has an id of homePageLink. Therefore, the link within this list
item is automatically given the style, making it look like the active tab (since the
background blends directly into the content area).
The other selectors in the grouped selector behave in the same way (in each case
for the link and visited styles); so if, for example, you change the id value of the
body start tag in the HTML document to customerSupportPage and then refresh
the web page, you’ll see the third link become the active tab.

Modularizing the collapsible content script

Although the previous script works perfectly well for a single div, it’s awkward if you want
to use several divs over the course of a page. That’s how the old Images from Iceland site
works, and I had to keep track of id names and values while constructing it. However, it is
possible to make a toggler strip more modular, although this relies on keeping document
structure very strict as far as the collapsible sections go. The files for this section are in the
collapsible-div-modular folder within the chapter 5 folder.
The JavaScript is similar to that in the previous example.
function toggle(toggler) {
if(document.getElementById) {
targetElement = toggler.parentNode.nextSibling;
if(targetElement.className == undefined) {
targetElement = toggler.parentNode.nextSibling.nextSibling;
}

if (targetElement.style.display == "block") {
targetElement.style.display = "none";
}
else {
targetElement.style.display = "block";
}
}
}
The main change is that instead of targeting a div with a specific id value, the script
targets an element in relation to the one being used as a toggler, by way of the
parentNode/nextSibling JavaScript properties.
If you look at the HTML document, you’ll see that the parent of the anchor element is the
p element. What the next sibling element is depends on the browser—Internet Explorer
just looks for the next element in the document (div), but other browsers count whitespace
as the next sibling.
<p><a href="#" title="Toggle section" onclick="toggle(this); return
å false;">Toggle div 1!</a></p>
<div class="expandable">
<p>Initially hidden content (div 1) goes here.</p>
</div>
It would be possible to get around this by stripping whitespace. However, a line in the
JavaScript makes this unnecessary.
if(document.getElementById) {
targetElement = toggler.parentNode.nextSibling;
if(targetElement.className == undefined) {
targetElement = toggler.parentNode.nextSibling.nextSibling;
}
The first line of the previous code block sets the target to the next sibling of the parent
element of the link. In Internet Explorer this works, but other browsers find only whitespace.
Therefore, the second line essentially says, “If you find whitespace (undefined),
then set the target to the next sibling on.” It’s a bit of a workaround, but it’s only one line
of JavaScript.
The JavaScript also includes the method used in the preceding “Enhancing accessibility for
collapsible content” section, to make the togglable sections initially invisible in JavaScriptenabled
browsers only. Note that the related CSS is slightly different to that shown in the
previous section—instead of hidden content being in a div with an id value of hiddenDiv,
it’s now in multiple divs, all of which have a class value of expandable. Therefore, the
selector in the CSS rule has been updated accordingly:
.expandable {
display: none;
}

This system enables you to use as many collapsible divs as you like on the page, and you
don’t have to set id values—the toggling is essentially automated. However, as mentioned
earlier, you must ensure that your structure remains the same for each area that can be
toggled, otherwise the script won’t find the correct element to make visible or invisible
when the links are clicked.

The :focus pseudo-class

Rarely used due to a lack of browser support, the :focus pseudo-class is worth being
mindful of. It enables you to define the link state of a focused link. Focusing usually occurs
when tabbing to a link, and so the :focus pseudo-class can be a handy usability aid. At the
time of writing, it works in Firefox and Safari, but is ignored in Opera and Internet
Explorer, although Microsoft’s browser does at least surround any focused links with a
dotted line. (Note that Firefox and Safari also surround focused links with a dotted line
and aqua border, respectively.)
The following example, used in editing-link-styles-using-css.css, turns the background
of focused links yellow in compliant browsers:
1 :

a:focus {
background: yellow;
}

<a href="index.html">Homepage</a> | <a href="products.html">
åProducts</a> | <a href="contact-details.html">Contact
å details</a>
</div>

2. Add some padding to the existing body rule in the CSS to add some spacing around
the page content:
body {
font: 62.5%/1.5 Verdana, Arial, Helvetica, sans-serif;
padding: 30px;
}

3. Add some rules to define the main states for links on the web page. The following
rules color links orange, change them to red on the hover state, make them gray
on the visited state, and make them black on the active state.
a:link {
color: #f26522;
}
a:visited {
color: #8a8a8a;
}
a:hover {
color: #f22222;
}
a:active {
color: #000000;
}

4. Next, style the navigation links. Contextual selectors are used to style the links
within the navigation div.
#navigation a, #navigation a:visited {
text-decoration: none;
font-weight: bold;
color: #666666;
text-transform: uppercase;
}
#navigation a:hover {
text-decoration: underline;
}
The first rule removes the underline from all links within the navigation div, renders
them in bold and uppercase, and colors them a medium gray. The second rule
brings back the underline on the hover state.

5. Style the footer links. Add another contextual selector to style the footer links,
making them smaller than links elsewhere on the page:
#footer a:link, #footer a:visited {
font-size: 0.8em;
}
And there we have it: three different link styles on the same page, without messing around
with classes.

Pages

Saturday, October 23, 2010

Monday, October 4, 2010

Friday, October 1, 2010

Monday, September 27, 2010

Sunday, September 26, 2010