Adding CSS to an HTML document
There are basically 4 ways of adding CSS to an HTML document though the most commonly used are Inline CSS and External CSS. In this tutorial we are going to be talking about the common methods.
Embedded CSS
You can embed your CSS rules into an HTML document by writing the CSS in the <style>
element that is placed inside <head>
element. Rules defined in this way are limited only to the document within which they are embedded.
For example:
<!DOCTYPE html>
<html>
<head>
<style type = "text/css">
body {
padding:20px;
background-color:black;
}
h1 {
color:olive;
margin:40px;
padding:20px;
font-weight:bold;
text-align:center;
}
p {
color:teal;
text-indent:5%;
}
code {
color:red;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
<p>You can embed your CSS rules into an HTML document by writing
the CSS in the <code><style></code> element that is placed
inside <code><head></code> element. Rules defined in this
way are limited only to the document within which they are
embedded.</p>
</body>
</html>
Output
Inline CSS
You can style an HTML element using its style attribute. However in this case, the applied CSS rules will style that element only.
The syntax is:
<element style = "style1; style2; etc">
For example:
<!DOCTYPE html>
<html>
<head>
</head>
<body style = "padding:20px; background-color:black;">
<h1 style="color:blue; text-align: center">Welcome to my website</h1>
<p style ="color:teal; text-indent:5%;"> You can embed your CSS rules into an HTML document by writing
the CSS in the <code style="color:red"><style></code> element that is placed
inside <code style ="color:red"><head></code> element. Rules defined in this
way are limited only to the document within which they are
embedded.</p>
</body>
</html>
Output
External CSS
To separate content from presentation you can include external CSS style sheets using the <link>
element. This also has the advantage of making your CSS rules global. You can include the style sheet in as many documents as you like.
A CSS style sheet is just a text file with a .css extension. This sheet includes all the defined style rules which you can then include in any HTML document through the <link>
element.
The general syntax for including external CSS is:
<head>
<link rel="stylesheet" type = "text/css" href = "path/to/stylesheet.css"/>
</head>
Here is an example of using an external style sheet in which the the HTML file and the CSS file are in the same folder:
index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href= "myStyle.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p> You can embed your CSS rules into an HTML document by writing
the CSS in the <code><style></code> element that is placed
inside <code><head></code> element. Rules defined in this
way are limited only to the document within which they are
embedded.</p>
</body>
</html>
myStyle.css
body {
padding:20px;
background-color:black;
}
h1 {
color:olive;
margin:40px;
padding:20px;
font-weight:bold;
text-align:center;
}
p {
color:teal;
text-indent:5%;
}
code {
color:red;
}
Output
CSS Comments
Comments are a great way of explaining your code or of temporarily disabling parts of your code. CSS comments are generally the same as in C based programming languages.
Single line comments are created starting with //
. For example to comment out a single line:
body {
padding:20px;
// background-color:black;
}
Multi line comments are created by starting with /*
and ending with */
.
body {
padding:20px;
background-color:black;
}
/* THIS WHOLE BLOCK HAS BEEN COMMENTED OUT...
h1 {
color:olive;
margin:40px;
padding:20px;
font-weight:bold;
text-align:center;
}
p {
color:teal;
text-indent:5%;
}
... UP TO THIS POINT */
code {
color:red;
}