So the great thing about the way web applications are developed now (sites,games,google,youtube), is that everything is separated. So you can keep your HTML in one file, a CSS in another file, a JavaScript in a different file. You can even put them in their own folders. This is important, because if you don't do this, your shit's going to get all big and shit son.
Separating your css and scripts into their own folder/file makes it super easy to navigate through the different parts of your project and makes your files easily readable.
So let's pull our CSS out of the html file and create a .css file.
Copy everything between the <style> </style> tags and put them in a new document. Save this file in a folder called "css" relative to your .html file. save it as "pagestyle.css" or whatever you want. If you name it something different than pagestyle.css, you'll need to change the code in this example to reflect that difference.
after you've saved your file, you'll need to delete the <style></style> tags... or don't... this doesn't matter, but I like to delete shit that I'm not using to keep my file clean.
Now my file looks like this:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title of my project: A learning experience.
</title>
</head>
<body>
ANYTHING!!!
</body>
</html>
Look familiar? Yeah, thought so.
So now add the <link> under <title> This will be where we "link" the css to the html file.
<link rel="stylesheet" href="css/pagestyle.css">
the "rel='stylesheet'" portion of this line tells the page what relationship the linked content has to the page. This is important. Otherwise the page wouldn't know what to do with the linked content.
... href="css/pagestyle.css">
This portion of the link is the location. This tells the page where the content is stored relative to the content. This can very well be another www.whateversiteyouwant.com/location/file.extention if you'd like... but since the file is not stored externally, you won't need to go through all that business.
Save your html file and reload it in your browser.
Looks the same? good. If not, make sure your html file looks like this:
<!DOCTYPE HTML>
<html>
<head>
<title>
Title of my project: A learning experience.
</title>
<link rel="stylesheet" href="css/pagestyle.css">
</head>
<body>
ANYTHING!!!
</body>
</html>
and make sure you saved your css file the correct location, and that it looks like this:
html{
background:#e00000;
height:100%;
background:-moz-linear-gradient(top,#fe471d,#e00000) no-repeat #e00000;
background:-webkit-gradient(linear,left top, left bottom, from(#fe471d), to(#e00000)) no-repeat #e00000;
font-family: "helvetica", Arial, sans-serif;
color:#000;
}
If it doesn't work and the contents of your pages are as shown above... I got nothin'. and you should probably not be developing web content. :).
But now, if you want to change the style of your page, you simply need to change the .css file linked to the page, and you're ready to go. Coming up, we'll talk about classes, JavaScript, changing style through JavaScript, and making functions to do that stuff.
Cheers, and good luck!
No comments:
Post a Comment