CSS Basic and Common Errors

Using the CSS
Prepared by: Sanjay Raval | http://www.usableweb.in/

What is CSS?
CSS is a language that’s used to define the formatting applied to a Website, including
colors, background images, typefaces (fonts), margins, and indentation.

Let’s look at a basic example to see how this is done.

<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
<style type="text/css">
h1, h2 {
font-family: sans-serif; color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1><p>…</p>
<h2>Second Title</h2><p>…</p>
<h2>Third Title</h2><p>…</p>
</body>
</html>

Using CSS in HTML
lnline Styles
The simplest method of adding CSS styles to your web pages is to use inline styles.
An inline style is applied via the style attribute, like this:

<p style="font-family: sans-serif; color: #3366CC;">
Amazingly few discotheques provide jukeboxes.
</p>

Inline styles have two major disadvantages:
1) They can’t be reused. For example, if we wanted to apply the style above to another p element,
we would have to type it out again in that element’s style attribute.
2) Additionally, inline styles are located alongside the page’s markup, making the code difficult to
read and maintain.

Using CSS in HTML
Embedded or Internal Styles
In this approach, you can declare any number of CSS styles by placing them between the opening
and closing <style> tags, as follows:

<style type="text/css">
CSS Styles here
</style>

While it’s nice and simple, the <style>tag has one major disadvantage: if you want to use a
particular set of styles throughout your site, you’ll have to repeat those style definitions within
the style element at the top of every one of your site’s pages.

Using CSS in HTML
External Style Sheets
An external style sheet is a file (usually given a .css filename) that contains a web site’s CSS
styles, keeping them separate from any one web page. Multiple pages can link to the same .css
file, and any changes you make to the style definitions in that file will affect all the pages that
link to it.

To link a document to an external style sheet (say, styles.css), we simply place a link element in
the document’s header:

<link rel="stylesheet" type="text/css" href="styles.css" />

CSS Selectors
Every CSS style definition has two components:
 A list of one or more selectors, separated by commas, define the element or elements to which the
style will be applied.
 The declaration block specifies what the style actually does.

CSS Selectors
Type Selectors – Tag Selector
By naming a particular HTML element, you can apply a style rule to every occurrence of that
element in the document.

For example, the following style rule might be used to set the default font for a web site:

p, td, th, div, dl, ul, ol {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}

CSS Selectors
Class Selectors
CSS classes comes in when you want to assign different styles to identical elements that occur in
different places within your document.

Consider the following style, which turns all the paragraph text on a page blue:

p { color: #0000FF; }

Great! But what would happen if you had a sidebar on your page with a blue background? You
wouldn’t want the text in the sidebar to display in blue as well—then it would be invisible. What
you need to do is define a class for your sidebar text, then assign a CSS style to that class.

To create a paragraph of the sidebarclass, first add a classattribute to the opening tag:

<p class="sidebar">
This text will be white, as specified by the CSS style definition
below.
</p>

CSS Selectors
Class Selectors
Now we can write the style for this class:

p { color: #0000FF; }
.sidebar { color: #FFFFFF; }

This second rule uses a class selector to indicate that the style should be applied to any element
of the sidebar class. The period indicates that we’re naming a class—not an HTML element.

CSS Selectors
ID Selectors
In contrast with class selectors, ID selectors are used to select one particular element, rather
than a group of elements. To use an ID selector, first add an id attribute to the element you wish
to style. It’s important that the ID is unique within the document:

<p id="tagline">This paragraph is uniquely identified by the ID
"tagline".</p>

To reference this element by its ID selector, we precede the id with a hash (#). For example, the
following rule will make the above paragraph white:

#tagline { color: #FFFFFF; }

ID selectors can be used in combination with the other selector types.

#tagline .new {
font-weight: bold;
color: #FFFFFF;
}

CSS Selectors
Descendant or Compound Selectors
A descendant selector will select all the descendants of an element.

p { color: #0000FF; }
.sidebar p { color: #FFFFFF; }

<div class="sidebar">
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
</div>

In this case, because our page contains a div element that has a class of sidebar, the descendant
selector .sidebar p refers to all p elements inside that div.

CSS Selectors
Child Selectors
A descendant selector will select all the descendants of an element, a child selector only targets
the element’s immediate descendants, or “children.”

Consider the following markup:

<div class="sidebar">
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
<div class="tagline">
<p>If we use a descendant selector, this will be
white too. But if we use a child selector, it will be
blue.</p>
</div>
</div>

CSS Selectors
Child Selectors
In this example, the descendant selector we saw in the previous section would match the
paragraphs that are nested directly within div.sidebar as well as those inside div.tagline. If you
didn’t want this behavior, and you only wanted to style those paragraphs that were direct
descendants of div.sidebar, you’d use a child selector.

A child selector uses the > character to specify a direct descendant.

Here’s the new CSS, which turns only those paragraphs directly inside .sidebar (but not those
within .tagline) white:

p { color: #0000FF; }
.sidebar>p { color: #FFFFFF; }

Note: Unfortunately, Internet Explorer 6 doesn’t support the child selector.

ID vs. Class What
An ID refers to a unique instance in a document, or something that will only appear once on a
page. For example, common uses of IDs are containing elements such as page wrappers,
headers, and footers. On the other hand, a CLASS may be used multiple times within a document,
on multiple elements. A good use of classes would be the style definitions for links, or other types
of text that might be repeated in different areas on a page.

In a style sheet, an ID is preceded by a hash mark (#), and might look like the following:

#header { height:50px; }
#footer { height:50px; }
#sidebar { width:200px; float:left; }
#contents { width:600px; }

ID vs. Class What
Classes are preceded by a dot (.). An example is given below.

.error {
font-weight:bold;
color:#C00;
}
.btn{
background:#98A520;
font-weight:bold;
font-size:90%;
height:24px;
color:#fff;
}

Redundant Units for Zero Values
The following code doesn't need the unit specified if the value is zero.

padding:0px 0px 5px 0px;

It can be written instead like this:

padding:0 0 5px 0;

Don't waste bytes by adding units such as px, pt, em, etc, when the value is zero. The only
reason to do so is when you want to change the value quickly later on. Otherwise declaring the
unit is meaningless. Zero pixels is the same as zero points.

Avoid Repetition
We should avoid using several lines when just one line will do.
For example, when setting borders, some people set each side separately:

border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;

But why? When each border is the same! Instead it can be like:

border:1px solid #00f;

Excess Whitespace
Usually we have tendency to include whitespace in the code to make it readable. It'll only make
the stylesheet bigger, meaning the bandwidth usage will be higher.

Of course it's wise to leave some space in to keep it readable.

Grouping Identical Styles together
So when we want a same style to a couple of elements. It is good to group them together and
define the style instead of defining the style for each element separately.

h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}

It will also make updating the style much easier.

Margin vs. Padding
As margins and paddings are generally be used interchangeably, it is important to know the
difference. It will give you greater control over your layouts. Margin refers to the space around
the element, outside of the border. Padding refers to the space inside of the element, within the
border.

Example: No Padding, 10px Margin

p {
border: 1px solid #0066cc;
margin:10px;
padding:0;
}

Result:

Margin vs. Padding
Example: No Margin, 10px Padding

p {
border: 1px solid #0066cc;
padding:10px;
margin:0;
}

Result:

CSS Basic and Common Errors

Recommended

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to CSS Basic and Common Errors (20)

More from Hock Leng PUAH (20)

Recently uploaded (20)

CSS Basic and Common Errors