CSS consist of 3 important parts which are selector, properties and value. Basically, selector is the target of our styling. Most off the time, we will be using HTML tags such as
<p>, <a>, <h1> etc as our selector. Properties are the property we want to style such as font-size, color etc while value refer to the value of the Property (i.e. red, blue, 12px, etc)There are 3 ways to apply CSS to our website which are the rarely used, inline, the normally used, internal and the most commonly used, external. Lets start with the inline method.
<p style="color:red">your text</p>The inline method is where we put the style directly into a HTML tag. In this case we don't need to specify a selector as the style is in the styling target itself. The properties here is color which refer to font-color while the value here is green. When using CSS, always remember the format, properties followed by a colon ':' followed by value. Also notice that the style attribute is placed to tell the browser that we're using CSS.
The inline method is pretty useful in some case but we would normally avoid it as we want to keep out HTML file clean. The next method, internal is slightly better is than inline as it didn't mess our HTML file that much. To do this, we simply use style as tag like we would with HTML tag. However, as styling is not in the target itself, we need to specify the selector.
<style>
p{
color:red;
/* other style for our paragraph */
}
h1{
/* some other style we want for our heading */
}
</style>
we can put as much style as we want and for anything we want this way, just remember the format. Basically anything within the curly braces are the style for the selector before the curly braces. Also make sure to put a semicolon ';' at the end of each style like this color:green;. The <style> can be placed anywhere in the HTML file but we normally put it in the <head> tag.
The last also the most popular method of using CSS is to create and external file for CSS and link it to our HTML file.
Your CSS file should looks something like this.
p{
color:red;
/* other style for our paragraph */
}
h1{
/* some other style we want for our heading */
}
It is same as when we're using the internal method but without the <style> tag. We can put as many style as we want in here and save it as css file (i.e. main.css).
To link our CSS file to HTML file, just open the HTML file and write the following code in the <head> tag.
<head>
<link rel="stylesheet" href="main.css" />
</head>
link tag is used to tell the browser to look through the content of an external file. the attribute rel="stylesheet" tells the browser that the file type is stylesheet which also means a CSS. The href="main.css" attribute specify the path to the file. If the file is in the same directory as the HTML file we're linking with, we just needs to put in the file name instead of a full path. Lastly, notice that there is a forward slash '/' at the end of our link tag. Basically it means that our tag are self-closing. Self-closing tag are tags that don't comes in pair of opening tag and closing tag like most of HTML tag.
Btw, the /* */ is used to write a comment, your browser will ignore anything written is in. Though it might sound pretty useless right now, it is actually really useful when you're working with a huge website as you can label what each parts of the code do so that you won't need to read through the whole code when there is a bug. Just make sure you don't overuse it.
Now that we know how to apply style to our our web page, we'll start styling our web page in our next tutorial. See ya.
