css-with-indexhibit

Document Sample
css-with-indexhibit Powered By Docstoc
					/**
* CSS
*
* @version 1.0
* @author Vaska
* @author Gregory Cadar
*/
*{
            margin: 0;
            padding: 0;
}


body {
            font-size: 10px;
            font-family: Verdana, sans-serif;
            background: #fff;
}


body.section-1 { }
body.section-2 { }
body.section-3 { }


a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: underline; }


a img { border: none; }


#menu {
      width: 215px;
      overflow: auto;
      top: 0;
      bottom: 0;
            left: 0;
      position: fixed;
      height: 100%;
            background-color: #fff;
}


#menu ul {
            list-style: none;
            margin: 0 0 12px 0;
}
#menu ul li.section-title { }


#content {
    height: 100%;
    margin: 0 0 0 215px;
    top: 0;
}


.container {
    padding: 5px 5px 25px 5px;
}


#content p { width: 400px; margin-bottom: 9px; }


p{
    margin: 0 0 9px 0;
}


h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 16px; }
h4 { font-size: 12px; }


#img-container { margin: 0; padding: 0; }
#img-container p           { width: 400px; margin: 0; padding: 0 0 12px 0; }


#once { clear: left; }


Let’s explain what that means:


CSS




What is CSS? CSS is a kind of code primarily used to go give 'style' or aesthetics to html.



How can I tell them apart? CSS is usually stored in an external file called something like 'style.css'. 
Html and CSS do not
do the same things in most cases. With html you can wrap text in <strong>tags to get bold text. With CSS you can place
a property onto text that will make it bold. But the two are different procedures. 



HTML: <strong>My text is bold</strong> CSS: .bold {font-weight:bold; }

Attributes Html is composed of tags and attributes. Attributes tell the tag various things.


For instance, this image has attributes of source, height and width: 
<img src='myimage.jpg' height='100' width='100'
/>
Properties CSS uses properties, many of which can do similar things to html, to place style onto things. 



Consider this example: 
CSS: p { font-size: 12px; }


HTML: <p>Now my text is 12px tall</p>
What we have done here is style ALL the p (paragraph) tags on our page with a
font-size of 12px.
An attribute works directly with a tag (above the tag ‘<p>’ defines the text as an attribute) while a CSS property can affect
many tags at the same time.


Body

The <body> tag defines the document's body.

The <body> element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc. That means if
you style in here your whole document gets styled. Within this property you can set the background color for your website or the
font:


body {
         font-size: 16px;
         font-family: Times New Roman, serif;
         background: #FF99FF;
}


Links


Special for links are that they can be styled differently depending on what state they are in.
The four links states are:
        a:link - a normal, unvisited link
        a:visited - a link the user has visited
        a:hover - a link when the user mouses over it
        a:active - a link the moment it is clicked


If you weren’t to have any style here your links would look like this: a:link and your visited links: a:visited


There are lots of ways to style links. You can create rollover effects with the a:hover property. The below example
changes your link from blue to pink when you rollover.


a:link { text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; color: #666; }
a:hover { text-decoration: none; color:#0000FF;}


Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.


Menu
Your menu has what is known as a div id (the #). The below info tells you how big to make your menu. You can change
its width, and its position. The width is denoted in pixels and the position is fixed - The element is positioned relative to the
browser window. Below I’ve increased the width and moved it 40px from the top and left of the window.


#menu {
    width: 300px;
    overflow: auto;
    top: 40px;
    bottom: 0;
           left: 40px;
    position: fixed;
    height: 100%;
           background-color: #fff;
}


Other position rules:


static - Elements renders in order, as they appear in the document flow. This is default.
absolute -The element is positioned relative to its first positioned (not static) ancestor element
fixed - The element is positioned relative to the browser window
relative - The element is positioned relative to its normal position, so "left:20" adds 20 pixels to the element's LEFT
position
inherit - The value of the position property is inherited from the parent element


http://www.w3schools.com/cssref/playit.asp?filename=playcss_position


If there are other things you want to style remember to use firebug to look them up and then write that into the CSS.

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:89
posted:8/12/2012
language:
pages:4