I'm quite new to HTML/CSS/JavaScript so try to bear with me, but I need help - for the assignment the teacher gave us in class, we have to validate our pages using the w3 validator; however, because I used <span> in <head>, my page won't validate.
What I'm trying to do is have a link at the bottom of the page that lets you remove all the formatting of the page (to show that all the positioning and formatting is done via CSS). The way I did this is to put a <span> around <link rel="StyleSheet" type="text/CSS" href="CSS_style.css"> and change the innerHTML of the span when the user clicks a link.
If that makes no sense because I explained it really badly, here is the source for my page, the JS and the CSS:
The page:
[CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script type="text/javascript" src="CSS.js"></script>
<span id="style"><link rel="StyleSheet" type="text/CSS" href="CSS_style.css"></span>
</head>
<body onload="titleChange()">
<div id="wrapper">
<div id="heading">
<h1>C<span class="darker">S</span><span class="black">S</span></h1>
</div>
<div id="quote" class="quote">
</div>
<div id="page">
<div id="main">
<div class="text">
<h1>What is <acronym title="Cascading Style Sheet"><span class="highlight">CSS</span></acronym>?</h1>
CSS stands for "Cascading Style Sheet". Style Sheets allow web developers to improve the look of their HTML pages without using formatting tags such as <strong>, <em>, <font> and parameters such as "bgcolor" and "align". HTML is now used simply to structure the page, while formatting is controlled by what is known as a "StyleSheet".<br><br>
Style Sheets contain blocks of code which define certain properties; e.g. size, colour and font of headings. They can control the style of tags such as <h#> (# = 1-6) and <hr>, or the content of <div> and <span> tags using classes.<br><br>
Below are some examples of how to use CSS in your webpages.
</div>
<hr>
<div class="text">
<h2>How can I add <acronym title="Cascading Style Sheet"><span class="highlight">CSS</span></acronym> to my page?</h2>
An embedded style has to be defined inside the <head> tags like so:
<div class="code">
<div class="text">
<style type="text/css"><br>body<br>{<br>color:white;<br>background:grey;<br>}<br></style><br>
</div>
</div>
You can also define styles in a separate stylesheet (saved with a .css extension), using this code:
<div class="code">
<div class="text">
<link rel=StyleSheet href="fileName.css" type="text/CSS">
</div>
</div>
</div>
<hr>
<div class="text">
<h2><acronym title="Cascading Style Sheet"><span class="highlight">CSS</span></acronym> Parameters</h2>
Text:
<div class="code">
<div class="text">
text-align: <span class="param">(center,left,right)</span> <span class="hint">[Aligns text left, right and centre.]</span><br>
color: <span class="param">(colour)</span> <span class="hint">[Sets text colour]</span><br>
line-height: <span class="param">(size)</span> <span class="hint">[Sets the line height]</span><br>
text-shadow: <span class="param">(colour x y blur)</span> <span class="hint">[Adds a shadow to the text. Color = name or hex value, x = relative position, y = relative position, blur = how soft the shadow is - 0 is a solid shadow. DOES NOT WORK IN INTERNET EXPLORER.]</span>
</div>
</div>
Fonts:
<div class="code">
<div class="text">
font-family: <span class="param">(font,font family)</span> <span class="hint">[Sets the font family. Separate fonts by commas. If the first font is available, it will be used, if not then the next font, and so on. You can also choose a pre-set family, e.g. serif and sans-serif.]</span><br>
font-size: <span class="param">(size)</span> <span class="hint">[Sets the font size.]</span><br>
font-weight: <span class="param">(bold)</span> <span class="hint">[Makes the text bold.]</span><br>
font-style: <span class="param">(italic)</span> <span class="hint">[Makes the text italic.]</span><br>
</div>
</div>
Structure:
<div class="code">
<div class="text">
margin: <span class="param">(size auto;)</span> <span class="hint">[Will center the contents of the div.]</span><br>
margin-(left/right/top/bottom): <span class="param">(size)</span> <span class="hint">[Set the size of the margin.]</span><br>
position: <span class="param">(relative, absolute; top:/bottom:/left:/right:)</span> <span class="hint">[Absolute: Position element at the exact x,y positon. Relative: Position element at the x,y position relative to the containing element.]</span><br>
float: <span class="param">(left,right)</span> <span class="hint">[Positions the element on the left or right side of the container. Use position:relative; on the container.]</span><br>
(min-/max-)width: <span class="param">(size)</span> <span class="hint">[Sets width of the element to the specified size/%.]</span><br>
(min-/max-)height: <span class="param">(size)</span> <span class="hint">[Sets height of the element to the specified size/%.]</span>
</div>
</div>
Style:
<div class="code">
<div class="text">
background-color: <span class="param">(colour)</span> <span class="hint">[Sets the background colour of the element.]</span><br>
background: <span class="param">(colour)</span> <span class="hint">[Same as above.]</span><br>
border: <span class="param">(size style colour)</span> <span class="hint">[Adds a border to the element. Styles: double, solid, dashed.]</span>
</div>
</div>
</div>
<hr>
<div class="text">
<h2><acronym title="Cascading Style Sheet"><span class="highlight">CSS</span></acronym> Tricks</h2>
<ul>
<li><a href="http://www.barelyfitz.com/screencast/html-training/css/positioning/">CSS Positioning Tutorial</a></li>
</ul>
Helpful page explaining how to use parameters like float, position and margin to lay out your content.
<ul>
<li><a href="http://css-tricks.com/">CSS Tricks</a></li>
</ul>
Regularly updated page with CSS tips and tricks you can use in your own Style Sheets.
</div>
</div>
<div id="links">
<div class="text">
<h1>Navigation</h1>
<ul>
<li><a href="page2.htm">Another Page</a></li>
</ul>
<div class="smalltext">Another Description.</div>
</div>
<hr>
<div class="text">
<h1><acronym title="Cascading Style Sheet"><span class="highlight">CSS</span></acronym> Links</h1>
<ul>
<li><a href="http://google.com">Google</a></li>
</ul>
<div class="smalltext">Search.</div>
<ul>
<li><a href="http://csszengarden.com">CSS Zen Garden</a></li>
</ul>
<div class="smalltext">The power of pure CSS design.</div>
<ul>
<li><a href="http://w3schools.com">W3schools</a></li>
</ul>
<div class="smalltext">CSS / HTML / JavaScript Tutorials.</div>
<ul>
<li><a href="http://jigsaw.w3.org/css-validator/">W3 CSS Validator</a></li>
</ul>
<div class="smalltext">A very useful CSS validation tool.</div>
</div>
</div>
<div class="clear">
</div>
<div id="footer">
<hr>
<div class="text">
<a href="javascript:viewSource()">View Source</a> | <a href="CSS_style.css">View CSS</a> | <a href="javascript:changeStyle();"><span id="changeStyle">Clear Formatting</span></a>
</div>
<hr>
<div class="text">
<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!"></a>
<div class="text">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
[/CODE]
CSS:
[CODE]/* HTML Elements */
body
{
color:#202a20;
background:#506650;
font-size:14px;
font-family:Georgia,"Times New Roman",serif;
}
a:link
{
color:#506650;
}
a:visited
{
color:#99CC99;
}
a:hover
{
color:#1d1d1d;
}
hr
{
height:2px;
border:0px;
color:#99cc99;
background-color:#99cc99;
}
/* General Classes */
.quote
{
font-family:Georgia,serif;
color:#1d1d1d;
font-size:20px;
font-style:italic;
font-weight:bold;
margin-bottom:20px;
width:600px;
margin-left:auto;
margin-right:auto;
}
.clear
{
clear:both;
}
.text
{
text-align:left;
margin-top:8px;
margin-left:8px;
margin-right:8px;
margin-bottom:16px;
}
.code
{
background:#CCCCCC;
border:2px dashed #999999;
margin-top:6px;
margin-bottom:10px;
}
.code .param
{
color:#509950;
}
.code .hint
{
color:#506650;
}
.highlight
{
color:#506650;
}
/* Structure CSS */
/*Wrapper*/
#wrapper
{
text-align:center;
}
/*Title*/
#heading
{
width:600px;
height:120px;
margin-top:1%;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
}
#heading .black
{
color:#1d1d1d;
}
#heading .darker
{
color:#2c332c;
}
#heading h1
{
font-weight:bold;
font-size:250px;
line-height:0%;
}
/*Page Content Container*/
#page
{
border:4px solid #99cc99;
background-color:#DCFFDC;
width:600px;
margin:5px auto;
margin-bottom:50px;
text-align:left;
position:relative;
}
/*Main Content*/
#main
{
border:4px solid #99cc99;
background-color:#FFFFFF;
width:445px;
margin:5px;
margin-bottom:-2px;
float:left;
}
#main h1
{
font-size:18px;
font-weight:bold;
color:#1d1d1d;
margin-top:10px;
margin-bottom:5px;
text-align:center;
}
#main h2
{
font-size:14px;
font-weight:bold;
font-style:italic;
color:#1d1d1d;
margin-top:10px;
margin-left:5px;
margin-bottom:5px;
}
#main .text
{
text-align:justify;
}
#main .text ul
{
margin-left:0px;
margin-right:30px;
}
/*Navigation*/
#links
{
font-family:verdana,serif;
font-size:12px;
border:4px solid #99cc99;
background-color:#FFFFFF;
width:20%;
margin:5px;
margin-left:0px;
float:right;
}
#links ul
{
margin-left:-20px;
}
#links h1
{
margin-top:10px;
font-size:14px;
font-weight:bold;
}
#links .text .smalltext
{
font-size:10px;
margin-top:5px;
margin-left:0px;
margin-bottom:5px;
line-height:15px;
}
/*Footer*/
#footer
{
font-family:Georgia,serif;
margin:0 auto;
}
#footer .text
{
text-align:center;
font-size:12px;
margin-top:15px;
}
#footer a:link
{
color:#506650;
}
#footer a:visited
{
color:#506650;
}
#footer a:hover
{
color:#1d1d1d;
}
#footer hr
{
height:4px;
border:0px;
color:#99cc99;
background-color:#99cc99;
}[/CODE]
The JS:
[CODE]do
{
x=Math.random()*10;
x=Math.round(x);
}while(x!=3 && x!=4 && x!=5 && x!=6);
function titleChange()
{
switch (x)
{
case 3:
title="Title 1"
break;
case 4:
title="Title 2"
break;
case 5:
title="Title 3"
break;
case 6:
title="Title 4"
break;
default:
title="Cascading Style Sheet";
break;
}
document.getElementById("quote").innerHTML=title;
}
numstyle=2;
function changeStyle()
{
if (numstyle==1)
{
document.getElementById("style").innerHTML="<link rel=\"StyleSheet\" type=\"text/CSS\" href=\"CSS_style.css\" />";
document.getElementById("changeStyle").innerHTML="Clear Formatting";
numstyle=2;
}
else if (numstyle==2)
{
document.getElementById("style").innerHTML="<link rel=\"StyleSheet\" type=\"text/CSS\" href=\"CSS_blank.css\" />";
document.getElementById("changeStyle").innerHTML="Default Formatting";
numstyle=1;
}
}
function viewSource()
{
window.location="view-source:"+window.location.href;
}[/CODE]
