submit to reddit       

CSS - Cascading Style Sheets

CSS is a language used by web browsers to format HTML. When a browser downloads a page, it needs to download a site's CSS code so that it knows how to format the HTML in the page. CSS can either be embedded in a web page's head section enclosed in <style></style> tags, or it can be referenced in the head section using a link tag like this:

<link rel="stylesheet" type="text/css" href="http://somedomain.com/somefile.css" />

Applying styling to html elements

In CCS code selectors are used to identify HTML elements. Style properties can be applied to CSS selectors. For example if you wanted all h1 elements to be displayed in red, you could use this CSS code:

h1 { color: blue; }

Note that the property is enclosed in braces, and the property is indented to make the code more readable. A colon is used to separate the property and the value that's assigned to it. Make sure you put a semicolon after each property, otherwise that property will be ignored by browsers.

You can create custom CSS selectors for HTML elements using classes and IDs. CSS IDs are used for single HTML elements on a page. For example, a typical web page might have a div element for the page banner. There's only one banner on the page, so a it could be created with a CSS id. In the HTML code where the div is created, it can be given an ID like this:

<div id="page_banner"> <h1>Site title</h1> <h2>Tag line</h2> </div>

In the CSS code for this page, the selector for this element uses the name specified in the div id attribute, and it starts with a '#' to indicate that it's an ID:

#page_banner { text-align:left; background:#cccccc; padding:10px; margin:5px; }

Styling can be applied to an element contained inside another element. The following CSS selector applies to all h1 elements contained in the #page_banner element:

#page_banner h1 { font-family:Impact; }

CSS classes are selectors that can be used when there are several instances of an HTML element on the same page. Suppose we want to apply styling to divs that contain posts on a blog so that each post is displayed in a grey rectangle. The HTML code might look something like this:

<div class="post"> <h1>Post title</h1> <p>This is a sample post</p> </div> <div class="post"> <h1>Title of another post</h1> <p>This some text in another sample post</p> </div>

The CSS code for this selector would look like this:

.post { background:#eeeeee; padding:10px; margin:5px; }

Note that the selector begins with a '.' instead of a '#'.

Styling HTML links

By default, links are displayed in blue, and then shown in purple after you've visited them. These different colours indicate different states of the link - visited and unvisited. Styling can be applied to links using the 'a' selector, and styling for different states can be set using these state modifiers: link, visited and hover. Styling for the hover state is applied when the mouse cursor is over a link.

a:link { color:green; } a:hover { color:orange; } a:visited { color:red; }

Follow this link to see how the examples look on a web page.



comments powered by Disqus

Follow me