Ok, now, I know this is getting old, but could someone please explain to me, in plain english, how CSS can give you a header and a sidebar and a footer or whatever? What I have seen of CSS is just small aplications, like scrollbar colors and stuff like that. Thanks in advance.It doesn't, HTML gives you the content, CSS can style it- position all the parts and change the colors, shapes, and sizes.
And no Scrollbar colors are not part of the official CSS specWell, I know that, but what are all the <div>s laying around for?They're grouping HTML elements in some (hopefully) logical way so you can use them as part of the css selector to filter out what you don't want to style a certain way. If you have a div with id="nav" then you can specifically style the list of links in it without changing a list in some content area.
#nav ul, #nav li { margin:0; padding:0; list-style:none; }???The HTML contains the content of your document.
The CSS adds style to it; color, borders, position plus many more style options.
Look at this simple document below in your browser, then remove all the contents between the <style> tags. Now look at it again, this is CSS changing the style of the document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML">
<meta name="keywords" content="Basic HTML">
<meta name="description" content="HTML template">
<script type="text/javascript">
<!--
// all JavaScript here
//-->
</script>
<style type="text/css">
<!--
body {
margin:auto;
width:32em;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:100%;
color:#000;
background:#9cf;
}
ul {
margin:0;padding:0;
border:2px solid #ccc;
background:#ffc;
height:1%;
overflow:auto;
}
li {
float:left;
width:25%;
overflow:hidden;
list-style-type:none;
}
li a {
display:block;
text-align:center;
}
li a:hover {
background:#ccc;
color:#ff0;
}
h1 {
font-size:2em;
margin:0.67em 0;
text-align:center;
}
h2 {
float:left;
padding:0 0.5em;
margin:0.5em 0 0 0;
font-size:1.5em;
}
h1, h2 { font-weight: bolder;}
p {
margin:0.5em 0;
border:2px solid #ccc;
padding:1em;
background:#ffc;
}
h3 {
height:1%;
overflow: auto;
margin:1em 0;
border:2px solid #ccc;
padding:0 1em;
background:#ffc;
font-size:1.17em;
}
h3 a {
float:left;
text-decoration:none;
}
h3 span {
float:right;
font-size:0.6em;
}
-->
</style>
</head>
<body>
<h1>Title of my site</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.html">home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.html">services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"customers.html">customers</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html">contact</a></li>
</ul>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut viverra ante et wisi. Etiam purus mauris, laoreet nec, facilisis eget, facilisis quis, ipsum.
Phasellus nonummy elementum felis. Suspendisse potenti.
Aliquam feugiat, augue sit amet euismod lacinia, ligula erat aliquet velit, vel porttitor eros ante convallis augue.
Nullam quis pede. Vestibulum pretium eros nec orci. Aliquam ut justo. Duis commodo.
Praesent ut odio semper diam imperdiet elementum.</p>
<h3><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">webmaster</a><span>updated: 2005 06 26</span></h3>
</body>
</html>
CSS tutorial (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->)
And no Scrollbar colors are not part of the official CSS specWell, I know that, but what are all the <div>s laying around for?They're grouping HTML elements in some (hopefully) logical way so you can use them as part of the css selector to filter out what you don't want to style a certain way. If you have a div with id="nav" then you can specifically style the list of links in it without changing a list in some content area.
#nav ul, #nav li { margin:0; padding:0; list-style:none; }???The HTML contains the content of your document.
The CSS adds style to it; color, borders, position plus many more style options.
Look at this simple document below in your browser, then remove all the contents between the <style> tags. Now look at it again, this is CSS changing the style of the document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Basic HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="copyright" content="Basic HTML">
<meta name="keywords" content="Basic HTML">
<meta name="description" content="HTML template">
<script type="text/javascript">
<!--
// all JavaScript here
//-->
</script>
<style type="text/css">
<!--
body {
margin:auto;
width:32em;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size:100%;
color:#000;
background:#9cf;
}
ul {
margin:0;padding:0;
border:2px solid #ccc;
background:#ffc;
height:1%;
overflow:auto;
}
li {
float:left;
width:25%;
overflow:hidden;
list-style-type:none;
}
li a {
display:block;
text-align:center;
}
li a:hover {
background:#ccc;
color:#ff0;
}
h1 {
font-size:2em;
margin:0.67em 0;
text-align:center;
}
h2 {
float:left;
padding:0 0.5em;
margin:0.5em 0 0 0;
font-size:1.5em;
}
h1, h2 { font-weight: bolder;}
p {
margin:0.5em 0;
border:2px solid #ccc;
padding:1em;
background:#ffc;
}
h3 {
height:1%;
overflow: auto;
margin:1em 0;
border:2px solid #ccc;
padding:0 1em;
background:#ffc;
font-size:1.17em;
}
h3 a {
float:left;
text-decoration:none;
}
h3 span {
float:right;
font-size:0.6em;
}
-->
</style>
</head>
<body>
<h1>Title of my site</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"home.html">home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"services.html">services</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"customers.html">customers</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"contact.html">contact</a></li>
</ul>
<h2>Lorem ipsum</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Ut viverra ante et wisi. Etiam purus mauris, laoreet nec, facilisis eget, facilisis quis, ipsum.
Phasellus nonummy elementum felis. Suspendisse potenti.
Aliquam feugiat, augue sit amet euismod lacinia, ligula erat aliquet velit, vel porttitor eros ante convallis augue.
Nullam quis pede. Vestibulum pretium eros nec orci. Aliquam ut justo. Duis commodo.
Praesent ut odio semper diam imperdiet elementum.</p>
<h3><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]">webmaster</a><span>updated: 2005 06 26</span></h3>
</body>
</html>
CSS tutorial (<!-- m --><a class="postlink" href="http://www.w3schools.com/css/default.asp">http://www.w3schools.com/css/default.asp</a><!-- m -->)