Web Lesson 2 – Linking a HTML Web Page to a Style Sheet
As a Web Designer it is very important to know how to style your websites to make them look aesthetically pleasing, as well as keeping all of the pages on your site constant. CSS is an excellent tool to achieve exactly that process, and it can be linked in with your existing HTML code to make your website design look beautiful and function smoothly.
There are two options when it comes to linking to a style sheet within your HTML:
- Embedding your style sheet within the HTML code itself. This means that the CSS will only relate to the page in question; fine for very small websites that only consist of a page or two, but certainly not the favoured option for larger sites.
- Linking to an external style sheet from your HTML code. The code that you might have embedded in the first of the two options can simply be removed to a separate .css file which can be linked to from your HTML, making it applicable to every separate page on your website.
Let’s consider both of these options.
1. Embedding your style sheet
Let’s say that this is the very simple HTML code for our first website:
<html>
<body>
<p>Welcome to my website!</p>
</body>
</html>
This isn’t very interesting really; it just displays one sentence of text on our web browsers, so let’s say we decide we want to change the background colour of the page itself to a beautiful blue, with hex code #07CED9. We can use embedded CSS to achieve this result by styling the Body section of our webpage using the following code within our HTML:
<html>
<body>
<style type =”text/css”>
body {
background-color: #07CED9
}
</style>
<p>Welcome to my website!</p>
</body>
</html>
The <style> tags inform the web browser that everything in between the two corresponds to CSS code, and applies said code to the finished web page.
2. Linking to your style sheet
It is better practice as a Web Designer to remove the CSS code from within your HTML, instead putting it in a separate file and linking to it. In the example shown above our very simple CSS document, named style.css, would look like this:
body {
background-color: #07CED9
}
And in our HTML document we would simply need to include a line within the <head> section to alert it to the requirement to load a style sheet:
<html>
<head>
<link rel=”stylesheet” href=”style.css”>
<body>
…
It’s as simple as that. We have only looked at one very simple example here, but there are numerous stylistic options within CSS to make any web designer’s pages look great.
If you enjoyed reading the above, you may like to read more articles like this in our Articles For Web Designers category.
Comments are closed.