Cascading Style Sheet Examples

From LoveToKnow Web-Design

Cascading style sheet examples are essential when trying to integrate the separation of style and content into a website. Trying to puzzle out the code from the rules of selectors and classes and such can be done, but when there are so many places to get the proper syntax and most efficient code, it's faster to do a search for "cascading style sheet examples" and then just start clicking.

Cascading Style Sheet Examples

What Kinds of Examples?

The first kind of code that should be found would most likely be the layout. There are a few standard layout setups, divided up by criteria such as:

  • Number of columns
  • Fixed or "liquid" (adjustable) width
  • Header
  • Footer
  • Right or left navigation bar

There are more divisions (in fact, there are as many categories as there are characteristics of web pages) but knowing that a "two-column left-nav liquid layout with footer" is what works best for a site can give a good start for finding the code examples that will work.

Looking at the Code

When using the code, the designer needs to decide if they are going to integrate the full style declaration into the head of the HTML page or refer to a separate ".css" page, usually that can be referenced by multiple pages on the site.

This latter technique is usually considered more efficient, for two reasons. First, it reduces the code needed on every page – rather than a full style declaration:


<style type="text/css">

body{
margin:0;
padding:0;
line-height: 1.5em;
}

b{font-size: 110%;}
em{color: red;}


#topsection{
background: #EAEAEA;
height: 90px; /*top section height */
}

#topsection h1{
margin: 0;
padding-top: 15px;
}

#contentwrapper{
float: left;
width: 100%;
}

#contentcolumn{
margin-left: 200px; /*puts margin on left equal to LeftColumnWidth*/
}

#leftcolumn{
float: left;
width: 200px; /*left column width */
margin-left: -100%;
background: #C8FC98;
}

#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}

#footer a{
color: #FFFF80;
}

.innertube{
margin: 10px; /*padding for columns*/
margin-top: 0;
}

</style>


The HTML page simply has something like the following line in the head:


<link rel="stylesheet" href="MyCSS.css" type="text/css" title="Cascading Style Sheet Examples" />

All of the style declaration code is kept on the "MyCSS.css" document and is referenced by every page that uses that particular style and/or layout.

Note: the above style declaration was simply for the example of a left-column liquid layout. Further elements of style such as fonts, rollover buttons, etc. would also be added into the style declaration.

Second, should the site need to be edited later on to change some element such as background color or font, only the reference page needs to be changed. This is the primary advantage to using separating style and content, and can be very useful in web design

Some pages can integrate javascript into the page as well to reference different stylesheets depending on what device is used to access the site – so that an iPhone, for example, can get a different cascading style sheet layout than a Firefox web browser. Finding code examples of these and other style sheet switchers is again a matter of simply searching for them on the web.

The Best Source of Cascading Style Sheet Examples

As mentioned before, there are many different places on the web to find examples of CSS code that can be copied and used on a website. While specific style layouts can be copyrighted, with the change of fonts, colors, etc. to suit a desired style the CSS code becomes the property of the person using it.

Two resources stand out above the rest. First is the W3C Cascading Style Sheets Home page. Aside from free code examples, this page also is the standard by which all CSS is created and evaluated. It contains many links for learning the why of the code that it provides, and that can be essential when trying to integrate CSS into any website.

The other very useful site is a collaborative effort, one of the finest examples of web 2.0 and social networking. It is the CSS Zen Garden. While it is actually only one page, it contains a special javascript styleswitcher that lets people submit their own CSS styles and then display them using the content of that page. Ranging from industrial to gothic to Victorian to surreal, the styles each have been validated by the W3C standards and are freely available to reference when creating a site. The images and color schemes are copyrighted, of course, but the site has been a great teacher to CSS newcomers all over the world.

CSS has been a fundamental change in the efficiency and technique of web design. Using the free examples on the web, any web designer can quickly come up to speed and add the features to their website. .

Retrieved from "http://web-design.lovetoknow.com/Cascading_Style_Sheet_Examples"

 


Comment on Cascading Style Sheet Examples



(Displayed with your comment)                        (Will not be displayed)
Verification Code:   
    

Web Design Categories
LoveToKnow Tools
More Articles