CSS Link to Style Sheet
Listening Video
CSS Link to Style Sheet
A CSS external style sheet is used to allow quick site-wide design changes to a large scale website. If you do not use an external CSS style sheet for your site layout and design you will have to edit all of your site pages if you wanted to change the color of links or the background image of the site for example. Using external CSS style sheets is the smarter way to design and manage robust websites.
- Create a new folder inside of your main project folder and name it "style".
- Fire up your HTML editor and create a new blank document named "main.css".
- Save main.css into the new folder you just created named style.
- Add the HTML <link> element(for external CSS) inside of your <head> tag.
CSS CODE EXAMPLE
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
</body>
</html>
TIP: We are naming our style sheet main.css because we sometimes will use secondary style sheets as well in the same document. Your document can be fed multiple external CSS style sheets. This comes in handy if one certain web page requires extra CSS that is not part of the main site layout or main styling of the site.<html>
<head>
<link rel="stylesheet" href="style/main.css">
</head>
<body>
</body>
</html>
Run a quick test to check your website's CSS style sheet linkage
1. Open your index.html file and place the following code within your <body> tag. Then save the file.
CSS CODE EXAMPLE
<div class="style1">Hello World!</div>
2. Open main.css and place the following code into it, then save the file.
CSS CODE EXAMPLE
.style1 {
background-color: #00FF00;
height:100px;
width:100px;
}
background-color: #00FF00;
height:100px;
width:100px;
}
3. Open index.html using your web browser. If you see "Hello World!" inside of a bright green 100x100px div, you have successfully linked to your new style sheet! If you do not see the bright green div, you do not have style sheet linkage. If you happen to fail in the linkage test:
- Be sure that you have saved both files before testing.
- Check that your directory structure is correct.
0 Response to "CSS Link to Style Sheet"
Post a Comment