Hello dear readers! welcome back to another section of my tutorial on Html. In my previous tutorial, i talked about the Html header. In this tutorial guide, am going to be discussing a little bit about Style Sheets. Although Cascading Style Sheets will be discussed in details in another part of my tutorial once I have rounded up my tutorial on Html. For now I will be introducing Cascading Style Sheets (Css) to you guys so you can have an idea about it.
Css describes how documents are presented on the screen, in print, or how they are pronounced.
Cascading Style Sheets provides an easy and effective alternatives to specify various attributes for the Html tags. By using Css, you can easily specify a number of styles properties for a given Html element. Each of the property has a name and a value, separated by a colon (;).
RECOMMENDED POST: Grouping Content
Example
First let us consider an example of a Html document which makes use of <font> tag and associated attributes to specify text color and font size.
<!DOCTYPE html>
<html>
<head>
<title> HTML CSS </title>
</head>
<body>
<p><font color="orange" size="10">First CSS Page</font></p>
</body>
</html>
<html>
<head>
<title> HTML CSS </title>
</head>
<body>
<p><font color="orange" size="10">First CSS Page</font></p>
</body>
</html>
We can re-write the above code with the help of Css as follows:
<!DOCTYPE html>
<html>
<head>
<title> HTML CSS </title>
</head>
<body>
<p style="color: orange; font-size: 15px;" >First CSS Page</p>
</body>
</html>
<html>
<head>
<title> HTML CSS </title>
</head>
<body>
<p style="color: orange; font-size: 15px;" >First CSS Page</p>
</body>
</html>
Feel free to try the above code out using your text editor to see the result for yourselves.
Css can be used in three distinct ways in your Html document:
External Style Sheet: A style sheet rules can be properly defined in a seperate .css file and then include that file into your Html document using Html <link> tag.
RECOMMENDED: Html Formating
Internal Style Sheet: A style sheet rules can be defined in the header section of your Html document by using <style> tag.
Inline Style Sheet: A style sheet rules can be defined directly along with the Html tags by using Style attribute.
Now let us quickly look at these three ways with a short example for each of them.
External Style Sheet
In a situation where you need to use your style sheet in various pages, it is always recommended to define a single and common style sheet in a seperate file. A Css file is going to have an extension as .css and it will be included in the Html file by using the <link> tag.
Example
In the example below we defined a Css file which we named style.css which has the following rules:
.menu {
color: blue;
}
.nav {
font-size: 40px;
}
.side-bar {
color: brown;
}
color: blue;
}
.nav {
font-size: 40px;
}
.side-bar {
color: brown;
}
So now this Css rules that we have defined is going to be applicable to three distinct classes defined for the Html tags. I suggest you don't crack your brains about how these rules are being defined because you will learn them while studying Css. Now let us make use of the above external Css file in our following Html documents:
<!DOCTYPE html>
<html>
<head>
<title> HTML External CSS </title>
<link rel="stylesheet" type="text/css" href="/html/style.css" >
</head>
<body>
<p class="menu">This is blue</p>
<p class="nav">This is thick</p>
<p class="side-bar">This is brown</p>
</body>
</html>
<html>
<head>
<title> HTML External CSS </title>
<link rel="stylesheet" type="text/css" href="/html/style.css" >
</head>
<body>
<p class="menu">This is blue</p>
<p class="nav">This is thick</p>
<p class="side-bar">This is brown</p>
</body>
</html>
Internal Style Sheet
If you want to apply Style Sheet rules to a single Html document only, then you can include those rules in the header section of the Html document using the <style> tag.
Take note that rules defined in the internal style sheet overrides the rules defined in the external Css file.
RECOMMENDED: How to create Html Forms
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Internal CSS </title>
<style type="text/css">
.menu {
color: blue;
}
.nav {
font-size: 40px;
}
.side-bar {
color: brown;
}
</style>
</head>
<body>
<p class="menu">This is blue</p>
<p class="nav">This is thick</p>
<p class="side-bar">This is brown</p>
</body>
</html>
<html>
<head>
<title> HTML Internal CSS </title>
<style type="text/css">
.menu {
color: blue;
}
.nav {
font-size: 40px;
}
.side-bar {
color: brown;
}
</style>
</head>
<body>
<p class="menu">This is blue</p>
<p class="nav">This is thick</p>
<p class="side-bar">This is brown</p>
</body>
</html>
Feel free to try the above codes out using your text editor to see the results for yourselves, and feel free to drop your questions in the comment box below.
Inline Style Sheet
The Css rules can be applied directly to any Html tag by making use of the style attribute of the relevant tag. This should be done only if you are interested to make a certain change in any Html element only.
Note: Rules defined inline with the element overrides the rules that are defined in an external Css file as well as the rules defined in the <style> element.
RECOMMENDED: Html Blocks
Example
<!DOCTYPE html>
<html>
<head>
<title> HTML Inline CSS </title>
</head>
<body>
<p style="color: blue;">This is blue</p>
<p style="font-size: 40px;">This is thick</p>
<p style="color:brown;">This is brown</p>
</body>
</html>
<html>
<head>
<title> HTML Inline CSS </title>
</head>
<body>
<p style="color: blue;">This is blue</p>
<p style="font-size: 40px;">This is thick</p>
<p style="color:brown;">This is brown</p>
</body>
</html>
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be discussing about the Html Javascript.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.