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
Just like HTML, and JavaScript, CSS doesn't require you to install anything special on your computer to get it into action. All you need is a web browser, which you will definitely already have on your machine (unless you have an ancient computer!).
This is the best part of learning HTML, CSS as well as JavaScript - we don't have to set up compilers and interpreters to get the languages executed - just a browser and a cup of tea.
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.- External
.cssfile also known as external stylesheet.
style attribute
Can you name some HTML attributes for the elements <p>, <div> etc? Well we have id, class, 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 <body>, <input>, <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.
<style> tag
Apart from the style attribute, CSS can also go inside the <style> tag.
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 <style>...</style> tags.
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 <body>.
<!DOCTYPE html>
<html>
<head>
<style>/* CSS in head */</style>
</head>
<body>
<style>/* CSS in body */</style>
</body>
</html>External .css file
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 style.css:
/*
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 valuestylesheet.href- it simply specifies the path to the CSS file. For instance if the filestyle.cssis in the same location as the HTML page we will writehref="style.css".
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 <body>. Becareful!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.
- The
styleattribute comes in use usually together with JavaScript in manipulating style of HTML elements. Let's say we want to hide all paragraphs on a page when the user clicks a button, we'll loop through all paragraphs and apply inline styles to them as we do so. We can also use thestyleattribute when we want an element to be styled differently than its similar ones. - The
<style>tag can be used to write CSS for an HTML page different from other pages. For example, if your website has four pageshome.html,about.html,contact.htmlanderror.htmland you want different styles forerror.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 - style attributes only apply CSS to their container element and will mostly be used in our JavaScript tutorial.
