Selecting elements on the basis of their class names is a very common technique in CSS. The attribute selector syntax [class="top"] is rather awkward, but thankfully there’s a simpler and shorter form for it: the class selector.

Here’s a simple example that selects all elements with a class attribute that contains the value “top”:

.top {
your declarations
}

An ID selector matches an element that has a specific id attribute value. Since id attributes must have unique values, an ID selector can never match more than one element in a document. The attribute selector syntax (id=”top”) must be write on html document to use it.

#top {
your declarations;
}

after declaration please put a closing ; to close it.

Deciding Between id and class

You may assign classes to any number of elements, as demonstrated earlier; the class name warning was applied to both a p and a span element, and it could have been applied to many more elements. IDs, on the other hand, are used once, and only once, within an HTML document.

<link rel=”stylesheet” type=”text/css” href=”/style.css” media=”screen”>

The link element, which must reside within the head element of an HTML document, links an external style sheet to the document. Multiple, comma-separated media types can be specified in the media attribute, for example, media=”screen,projection”. If it’s omitted, this attribute defaults to media=”screen”, according to the HTML4 specification, but in reality, browsers seem to apply media=”all” if the attribute is omitted.

Here’s an example of a style sheet reference that uses an @import rule:

<style type=”text/css”>
@import url(/style.css);
</style>

The style element, like the link element, must reside within the head element. Relative URIs in the href attribute or @import rule are relative to the HTML document that contains the link. (When @import is used inside an external style sheet, relative URIs are relative to the importing style sheet.)

so what is media? actually, I don’t know what is media. But we specify the output media using the predefined media types.

“all” – applies to all media
“Braille” – Braille/tactile feedback devices
“embossed” – paged Braille printers
“handheld” – handheld devices
“print” – paged media and print preview mode on the screen
“projection” – projected presentation (used by Opera in full-screen mode)
“screen” – color computer screens
“speech” – speech synthesizers (see the note below)
“tty” – media with a fixed-pitch character grid
“tv” – television-type devices