Now that you know What is CSS, we can move on to discover where can it be actually written. There are a couple of places where CSS can dwell, with each having its own specific purpose. We'll go through all of them in this very chapter, together with your first CSS code, so let's roll off!
Setting up the environment
CSS is parsed and executed using an interpreter built into the browser, designed by its vendor. The interpreter runs once the browser is opened up and understands all the CSS code you have written to it, or will write on the go. Now it's time to see where can the CSS interpreter find its food - where can CSS code go.
Where to write CSS?
CSS code can essentially go in 3 places:
style attribute also known as inline styling.
<style>tag also known as internal styling.
.cssfile also known as external stylesheet.
Can you name some HTML attributes for the elements
<div> etc? Well we have
title, and many more to easily fit here. Each attribute serves a purpose for the element it is on. For instance
title takes a text value and shows it when one hovers over an element with the mouse pointer.
In the same way, the
style attribute holds the CSS styles for its element.
Following is an illustration showing the attribute as used with the
<p> element. In a similar way it can be used with any element you like including
<audio> and so on.
<p style="">A paragraph</p>
The CSS code goes inside the attribute as shown below using a CSS comment. Comments are simply just comments - they are ignored by an interpreter and serve to only comment around code.
<p style="/* CSS goes here */">A paragraph</p>
For now try to get familiar with this attribute, later in the next section we will be writing some real CSS inside it and putting it in real implementation.
Apart from the
style attribute, CSS can also go inside the
Just like normal tags such as
<p>, where the content goes inside the starting and ending tags (
<p>Content</p>), CSS code for
<style> also goes within the
Following is a depiction of the tag syntax, once again using CSS comments to tell something to you.
<style>/* CSS code in a tag */</style>
However unlike most of HTML tags, it can go both, inside
<head> and well as
<!DOCTYPE html> <html> <head> <style>/* CSS in head */</style> </head> <body> <style>/* CSS in body */</style> </body> </html>
Last but not the least, CSS code can also be written inside a seperate file having the extension
.css. We usually refer to this by am external stylesheet.
Following we have a stylesheet named
/* CSS Code Inside an external stylesheet */
The file can be linked to an HTML page using the
<link> tag. Two attributes are needed for this purpose:
rel- it specifies the relationship the webpage and the given link have to each other. For CSS we have a stylesheet relationship hence the value
href- it simply specifies the path to the CSS file. For instance if the file
style.cssis in the same location as the HTML page we will write
Gathering all this together, refering to the stylesheet shown above will look something like the following in HTML:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> </html>
<link>tag can go inside
<head>only. It is invalid to nest it inside
What to use when?
It may seem fantastic to have quite a few places to write CSS in however with more options comes more complexity. Accordingly let's understand what is the use of each way.
styleattribute when we want an element to be styled differently than its similar ones.
<style>tag can be used to write CSS for an HTML page different from other pages. For example, if your website has four pages
error.htmland you want different styles for
error.htmlyou can consider using the
<style>tag. Usually the
<style>tag is used to reduce http requests on a web page in loading seperate CSS files when the CSS code within them is not large enough to be sent seperately.
- An external stylesheet is used much often when CSS styles need to be repeated on multiple pages. So let's say you have a website with the same header and footer on all pages, you can write CSS for both of them in a seperate file and then refer to it on all of the HTML pages. This comes with one advantage that if you want to make any changes to the styles of the header or footer you have to do them in only one file, and all the pages linked to it gets styled differently. CSS files seperate CSS code from HTML and can also be refered to remotely i.e files on other domains can also be linked on HTML pages.
In short, the
styleattribute is used to style specific elements
<style>tag is used to style specific HTML pages
- external stylesheet is used to style specific classes of HTML pages.
In the coming chapters we will mostly use the last two ways since they can be used to style multiple elements at once -