SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS | really basics | need a little guidence >>>

    Hi,

    I'm very new to web design and trying to understand how to layout a page with CSS. I was provided with the following code (see below) as an example to play with and deconstruct. I have a few questions...

    To begin with to help me understand this can anyone, in simple terms just break down what's happening?

    Thanks in advance - Dave


    Code:
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample layout</title>
    </head>
    <body>
    <div id="Container">
    <div id="Header">
    <ul id="TopNav">
    <li><a href="http://www.microsoft.com/">microsoft</a>...
    <li><a href="http://apple.com/">apple</a></li>...
    <li><a href="http://www.adobe.com/">adobe</a></li>...
    <li><a href="http://www.macromates.com/">macromates</...
    </ul>
    </div>
    
    <div id="Main">
    <p>Main content</p>
    </div>
    
    <div id="Footer">
    Copyright 2006, My Company Inc.
    </div>
    </div>
    </body>
    </html>
    
    
    
    html {
    font: 12px/1.6em Arial, sans-serif;
    }
    
    #Container {
    width: 500px;
    margin: 0 auto;
    padding: 0;
    }
    
    #Container #Header {
    background: #f3f3f3;
    border-bottom: 3px solid #09c;
    }
    
    #Container #Header #TopNav {
    font-size: 1.2em;
    margin: 0 15px;
    padding: 0;
    }
    
    #Container #Header #TopNav li {
    display: inline;
    padding-right: 5px;
    }
    
    #Container #Main,
    #Container #Footer {
    padding: 0 15px;
    }
    
    To use this CSS, insert this within the 'head' tag:
    <style type="text/css">
    
    </style>
    Last edited by everlite; Nov 29, 2006 at 08:04.

  2. #2
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi everlite,

    First off, besides the CSS question, you need to add a doctype to the HTML code. In simple terms, a Doctype tells a browser to render HTMl elements in a certain way. Whenever you write HTML within a page, that page MUST have a Doctype - if you don't your page will be rendered in whats called 'Quirks' mode where some browsers get confused with how to render the page properly.

    So below is the Doctype:-

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Now, we'll add this to your HTML. In an HTML page, the Doctype goes before the opening HTML tag, like this:_

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample layout</title>
    </head>
    <body>
    <div id="Container">
    <div id="Header">
    <ul id="TopNav">
    <li><a href="http://www.microsoft.com/">microsoft</a>...
    <li><a href="http://apple.com/">apple</a></li>...
    <li><a href="http://www.adobe.com/">adobe</a></li>...
    <li><a href="http://www.macromates.com/">macromates</...
    </ul>
    </div>
    
    <div id="Main">
    <p>Main content</p>
    </div>
    
    <div id="Footer">
    Copyright 2006, My Company Inc.
    </div>
    </div>
    </body>
    </html>
    Lets get to the CSS...

    Now, there are two ways to include the CSS within a page - embedded (when the CSS is wrapped in the <style> tags that you included within the <head> tags of the HTML page. Or placing your CSS in an external style sheet which you link to each of your pages that you want to use for the CSS styles.

    When you're dealing with a complete site with multiple pages, ALWAYS put your CSS in an external style sheet, as this keeps the weight of the individual HTML pages to a minimum, and also means that you only need to change an element within the CSS external style sheet to change all the HTML elements linked to that CSS style within all the HTML pages of your site.

    For the moment, as you are only using a few styles, I would recommend using the embedded CSS technique.

    So, to embed the CSS within your HTML page you use the <style> tags within your <head> tags, like so:-

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/b]
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample layout</title>
    <style type="text/css">
    </style>
    </head>
    <body>
    <div id="Container">
    <div id="Header">
    <ul id="TopNav">
    <li><a href="http://www.microsoft.com/">microsoft</a>...
    <li><a href="http://apple.com/">apple</a></li>...
    <li><a href="http://www.adobe.com/">adobe</a></li>...
    <li><a href="http://www.macromates.com/">macromates</...
    </ul>
    </div>
    
    <div id="Main">
    <p>Main content</p>
    </div>
    
    <div id="Footer">
    Copyright 2006, My Company Inc.
    </div>
    </div>
    </body>
    </html>
    Then place your CSS within your <style> tags like so:-

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/b]
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Sample layout</title>
    <style type="text/css">
    html {
    font: 12px/1.6em Arial, sans-serif;
    }
    
    #Container {
    width: 500px;
    margin: 0 auto;
    padding: 0;
    }
    
    #Container #Header {
    background: #f3f3f3;
    border-bottom: 3px solid #09c;
    }
    
    #Container #Header #TopNav {
    font-size: 1.2em;
    margin: 0 15px;
    padding: 0;
    }
    
    #Container #Header #TopNav li {
    display: inline;
    padding-right: 5px;
    }
    
    #Container #Main,
    #Container #Footer {
    padding: 0 15px;
    }
    </style>
    </head>
    <body>
    <div id="Container">
    <div id="Header">
    <ul id="TopNav">
    <li><a href="http://www.microsoft.com/">microsoft</a>...
    <li><a href="http://apple.com/">apple</a></li>...
    <li><a href="http://www.adobe.com/">adobe</a></li>...
    <li><a href="http://www.macromates.com/">macromates</...
    </ul>
    </div>
    
    <div id="Main">
    <p>Main content</p>
    </div>
    
    <div id="Footer">
    Copyright 2006, My Company Inc.
    </div>
    </div>
    </body>
    </html>
    Other answers coming in a sec...

  3. #3
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Hi everlite,
    Welcome to Sitepoint

    Here's the page reworked a little.. you can insert these code snippets in sitepoint posts using [ code ] and [ /code ] around the code (without the spaces)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Sample layout</title>
    <style type="text/css">
    <!--
    html {
    	font: 12px/1.6em Arial, sans-serif;
    }
    
    #Container {
    	width: 500px;
    	margin: 0 auto;
    	padding: 0;
    }
    
    #Container #Header {
    	background: #f3f3f3;
    	border-bottom: 3px solid #09c;
    }
    
    #Container #Header #TopNav {
    	font-size: 1.2em;
    	margin: 0 15px;
    	padding: 0;
    }
    
    #Container #Header #TopNav li {
    	display: inline;
    	padding-right: 5px;
    }
    
    #Container #Main,
    #Container #Footer {
    	padding: 0 15px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="Container">
    	<div id="Header">
    		<ul id="TopNav">
    			<li><a href="http://www.microsoft.com/">microsoft</a>...			</li>
    			<li><a href="http://apple.com/">apple</a></li>...
    			<li><a href="http://www.adobe.com/">adobe</a></li>...
    			<li><a href="http://www.macromates.com/">macromates&lt;/...		</li>
    		</ul>
    	</div>
    	<div id="Main">
    		<p>Main content</p>
    	</div>
    	<div id="Footer">
    		<span>Copyright 2006, My Company Inc.</span>	</div>
    </div>
    </body>
    </html>
    You place CSS inside these 'style' tags, this needs to be somewhere in between <head> and </head> see above.
    Code:
    <style type="text/css">
    <!--
    -->
    </style>
    CSS can reference tags themselves e.g. 'a' for anchors, the following code would turn all links red on the page.
    a {
    color: red;
    }
    CSS can also reference page elements by id using the # symbol e.g. the following code gives a page element with id="Container" a width of 500px.
    Code:
    #Container {
      width: 500px;
    }
    So now I'll work through your example..
    Code:
    html {
    	font: 12px/1.6em Arial, sans-serif;
    }
    This sets all text with the <html> and </html> tags to be 12px or 1.6em in size, and the font Arial - If it is installed, if not it will use any sans-serif font present on the computer
    Code:
    #Container {
    	width: 500px;
    	margin: 0 auto;
    	padding: 0;
    }
    The container is a wrapper for all the other page elements.
    It has a width of 500px and no padding.
    margin: 0 auto; centers the Container div, When two values are given it evaluates the top and bottom to the first value, the left and right to the second.
    So Top and bottom margins are set to 0, and left and right margins are set to auto - this centers the element.
    Code:
    #Container #Header {
    	background: #f3f3f3;
    	border-bottom: 3px solid #09c;
    }
    The 'selector' here - #Container #Header - will add the styles to a element with id="header" IF it is within another element with id #Container.
    The code sets background color to #f3f3f3( a hexadecimal value for the light blue) and also sets a border at the bottom that is 3 pixels high, solid color and The colour blue.
    Code:
    #Container #Header #TopNav li {
    	display: inline;
    	padding-right: 5px;
    }
    The default display of a list item is to be displayed as a 'block' takes up as much width as possible(100% width) and line broken(nothing to the left or right of it). Consecutive block level elements will stack upon each other like a bullet point list.
    Setting the li element to display as inline makes them come one after the other.

    Does that help?

  4. #4
    SitePoint Member
    Join Date
    Nov 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers guys, nice to meet some friendly people willing to help, i've had a few real flamers previous to this when asking for the basics. I've updated the post, thanks for that, wasn't quite sure how that was done. I'll take a read down your advice and see what i can learn.

    Cheers again - David.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •