Hi--
I just started learning CSS, seems easy...kinda...but i was wondering...do you need to use HTML at all when using CSS?
EDIT: I figured out the background color thing but i still have above question
thanks for all help!CSS is what you use to layout a page. You use HTML and CSS togther. You use HTML for the basic structure and content, and then use CSS to format the way everything looks - colors, background colors, background images (but not images, that's HTML), and where blocks of text appear.absolutely, CSS is for styling, (x)HTML is for content/markup. CSS is absolutely worthless without (x)HTMLGlish (<!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->) may be a helpful resource.ok, so tables are CSS and the <body> tag is html? or is there a CSS alternative? i know of (thinks is right)
body {background:#colorhere}
so is there a normal body?That specifies the background color of the <BODY> tag. Maybe a tutorial at the W3C (<!-- m --><a class="postlink" href="http://www.w3.org/MarkUp/Guide/Style.html">http://www.w3.org/MarkUp/Guide/Style.html</a><!-- m -->) will help you understand that better.lol...lemme rephrase.
So the html <body> tag is still <body> if you are using CSS, correct?Yes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS/HTML Test</title>
<style type="text/css">
body {
color: #FFF;
background: #07A;
}
p {
text-indent: -15px;
padding-left: 15px;
}
</style>
</head>
<body>
<p>The background of this page is #0077AA, which is a dark blue, and the text color, #FFFFFF, is white. This paragraph is inverse-indented, meaning all lines of text, excluding the first line, will be indented by fifteen pixels. Normally text-indent indents the first line of a paragraph tag (<p> tag), but in this case it does not because it is set to a negative value. The CSS, then, in this case, is modifying the way the paragraph is displayed; yet we are still using HTML to display it.</p>
</body>
</html>YAY i get it! lol, man all this stuff is making me go to GT less often...oh no!!Gragh, i have read all of the provided links Jona, yet i still do not understand how to convert tables to CSS ?_?Okay here's what you do. I've outlined the DIVs so you can see what's going on. Basically the first div has the logo and is center-aligned, the second div has the content and is floated to the right, the third div has the navigation menu (notice it's an unordered list, and uses no <br> tags) and is floated to the left.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AW2 Site</title>
<style type="text/css">
body {
background: #000;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}
img {
border: none;
}
div {
border: solid 1px yellow;
}
#container {
width: 100%;
padding: 0px;
border: none;
}
#head {
width: 100%;
margin: auto;
text-align: center;
}
#content {
width: 65%;
float: right;
padding-left: 2%;
}
#nav {
width: 30%;
float: left;
padding-left: 1%;
}
#nav ul {
list-style-type: none;
}
#nav ul li a {
color: #C00;
text-decoration: underline;
}
#nav ul li a:hover {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
<h1><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html" title="Go to home page."><img src="logo.jpg" alt="The AW2 Site Logo."></a></h1>
</div>
<div id="content">
<h1>Heading 1</h1>
<p>This is the content of the site.</p>
</div>
<div id="nav">
<h1>Navigation</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html" title="Go to site homepage.">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html" title="About this site.">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html" title="Hyperlinks to different sites related to our own, in some way or another.">Links</a></li>
</ul>
</div>
</div>
</body>
</html>okay got it, thanks jona.You're welcome. Need anymore help? I'm anxious to see what your redesign will look like.LOL! i need so much help. I am just figuring out the div thing, but how do you decide on how big they are?CSS determines their size, although it's not necessary to set a size for them - they'll stretch to the width necessary for whatever resolution they're on to hold the inputted content. This way, very small screens won't have horizontal scrollbars, and large screens won't either.
Here's the basic run-down: instead of using tables, we're putting a few div's on the page. Then, we're using CSS to make them go into the places we want them to go. Whereas before we used tables to position things, we're now just floating blocks that hold text, images and/or links on different sides, or the center, of the page. If you disable CSS in my example, you'll see no formatting whatsoever; however, if you disabled CSS on one of your table-sites, you would still see formatting. This is good, except for the fact that the data is non-tabular, meaning it makes no sense when read in the format of a table.that makes sense.
Now for tutorials/information on CSS, etc, i have been using w3schools...do you know of any others?See the "Jona's Links" link in my signature.
I just started learning CSS, seems easy...kinda...but i was wondering...do you need to use HTML at all when using CSS?
EDIT: I figured out the background color thing but i still have above question
thanks for all help!CSS is what you use to layout a page. You use HTML and CSS togther. You use HTML for the basic structure and content, and then use CSS to format the way everything looks - colors, background colors, background images (but not images, that's HTML), and where blocks of text appear.absolutely, CSS is for styling, (x)HTML is for content/markup. CSS is absolutely worthless without (x)HTMLGlish (<!-- m --><a class="postlink" href="http://glish.com/css/">http://glish.com/css/</a><!-- m -->) may be a helpful resource.ok, so tables are CSS and the <body> tag is html? or is there a CSS alternative? i know of (thinks is right)
body {background:#colorhere}
so is there a normal body?That specifies the background color of the <BODY> tag. Maybe a tutorial at the W3C (<!-- m --><a class="postlink" href="http://www.w3.org/MarkUp/Guide/Style.html">http://www.w3.org/MarkUp/Guide/Style.html</a><!-- m -->) will help you understand that better.lol...lemme rephrase.
So the html <body> tag is still <body> if you are using CSS, correct?Yes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS/HTML Test</title>
<style type="text/css">
body {
color: #FFF;
background: #07A;
}
p {
text-indent: -15px;
padding-left: 15px;
}
</style>
</head>
<body>
<p>The background of this page is #0077AA, which is a dark blue, and the text color, #FFFFFF, is white. This paragraph is inverse-indented, meaning all lines of text, excluding the first line, will be indented by fifteen pixels. Normally text-indent indents the first line of a paragraph tag (<p> tag), but in this case it does not because it is set to a negative value. The CSS, then, in this case, is modifying the way the paragraph is displayed; yet we are still using HTML to display it.</p>
</body>
</html>YAY i get it! lol, man all this stuff is making me go to GT less often...oh no!!Gragh, i have read all of the provided links Jona, yet i still do not understand how to convert tables to CSS ?_?Okay here's what you do. I've outlined the DIVs so you can see what's going on. Basically the first div has the logo and is center-aligned, the second div has the content and is floated to the right, the third div has the navigation menu (notice it's an unordered list, and uses no <br> tags) and is floated to the left.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>AW2 Site</title>
<style type="text/css">
body {
background: #000;
color: #fff;
font-family: arial, verdana, sans-serif;
font-size: small;
}
img {
border: none;
}
div {
border: solid 1px yellow;
}
#container {
width: 100%;
padding: 0px;
border: none;
}
#head {
width: 100%;
margin: auto;
text-align: center;
}
#content {
width: 65%;
float: right;
padding-left: 2%;
}
#nav {
width: 30%;
float: left;
padding-left: 1%;
}
#nav ul {
list-style-type: none;
}
#nav ul li a {
color: #C00;
text-decoration: underline;
}
#nav ul li a:hover {
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div id="container">
<div id="head">
<h1><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html" title="Go to home page."><img src="logo.jpg" alt="The AW2 Site Logo."></a></h1>
</div>
<div id="content">
<h1>Heading 1</h1>
<p>This is the content of the site.</p>
</div>
<div id="nav">
<h1>Navigation</h1>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"index.html" title="Go to site homepage.">Home</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"about.html" title="About this site.">About</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"links.html" title="Hyperlinks to different sites related to our own, in some way or another.">Links</a></li>
</ul>
</div>
</div>
</body>
</html>okay got it, thanks jona.You're welcome. Need anymore help? I'm anxious to see what your redesign will look like.LOL! i need so much help. I am just figuring out the div thing, but how do you decide on how big they are?CSS determines their size, although it's not necessary to set a size for them - they'll stretch to the width necessary for whatever resolution they're on to hold the inputted content. This way, very small screens won't have horizontal scrollbars, and large screens won't either.
Here's the basic run-down: instead of using tables, we're putting a few div's on the page. Then, we're using CSS to make them go into the places we want them to go. Whereas before we used tables to position things, we're now just floating blocks that hold text, images and/or links on different sides, or the center, of the page. If you disable CSS in my example, you'll see no formatting whatsoever; however, if you disabled CSS on one of your table-sites, you would still see formatting. This is good, except for the fact that the data is non-tabular, meaning it makes no sense when read in the format of a table.that makes sense.
Now for tutorials/information on CSS, etc, i have been using w3schools...do you know of any others?See the "Jona's Links" link in my signature.