FORMS OF CSS AND HOW TO WRITE IT FOR ANY WEBSITE
In our formal lesson, we saw the introduction to CSS. Where we discussed the detailed introduction to CSS, which includes history, advantages, and some of the reasons why you might need a separate CSS file in your web page.
In this article, we will see how you can construct your CSS.
CSS is used to enhance the look of the web page.
There are two major forms of CSS that you can use to format a webpage
Inline, embedded and external CSS.
INLINE CSS
Inline CSS is the type of CSS that we write inside the HTML tags. This type of styling only have effects on the tag it is associated with and probably extend to the child elements of the tag.
Advantages of inline CSS
1. It is easy to write if the document is relatively small.
2. You don’t need to add class or id attribute to be able to get the style to your webpage
Disadvantages of inline CSS
The following are few of the limitations of Inline CSS
1. Inline CSS is difficult to get across the whole document.
2. It reduces the website loading time.
3. The website which uses it cannot be uniform across different devices as the document gets bigger.
4. It is not advisable to use Inline CSS.
Below is an example of an HTML page with inline CSS
Example of inline styling
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
</head>
<body>
<h3 style="color:blue"> Heading 1 </h3>
<h3 style="color:blue"> Heading 3 </h3>
<h3 style="color:blue"> Heading 3 </h3>
</body>
</html>
In the above code, we have three ‘headings’ with font-color as ‘blue’. Suppose, we want to change the color to black, that means we must go to individual ‘h3’ tag and then change the color. This is easy in this case, but if we have 100 headings in 5 different ‘html’ files, then this process is not very handy. In such cases, CSS can be quite useful as shown in next section.
EMBEDDED CSS
Embedded CSS is the form of styling to a webpage whereby the CSS file is written on the head section of the document. It is written inside a style tag of the HTML.
<style>
/* css files will be here*/
</style>
This form of styling the webpage is easier than that of the inline CSS but it still has some hindrances in terms of SEO of a website and as well the loading time of a website because the class is loaded on every request to the website.
Example
The code below is typically that of a document that has embedded CSS.
Before the example let us discuss some of the things that you will encounter when writing CSS.
· In CSS, the comments are written between /* and */
· Selectors: This can either be a class name, tag name, id, etc. That is referenced on the HTML document.
· Properties: These are the options available in CSS that determine what you are doing. Example of a property in CSS is color, width, etc.
· Value: This as the name entails, is the value of the chosen property. Example of a value in CSS is red, 10px, etc.
Example of a webpage with embedded CSS
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<style type="text/css">
h3 .h3_blue{ /*change color to blue*/
color: blue;
}
h3 .h3_red{ /*change color to red*/
color:red;
}
</style>
</head>
<body>
<h3 class='h3_blue'> Heading 1 </h3>
<h3 class='h3_blue'> Heading 3 </h3>
<h3 class='h3_blue'> Heading 3 </h3>
<h3 class='h3_red'> Heading 1 </h3>
<h3 class='h3_red'> Heading 3 </h3>
<h3 class='h3_red'> Heading 3 </h3>
</body>
</html>
In the code above it will be very easy for us to now change the colors easily even if the webpage is of many lines above how it is now.
The above-embedded CSS uses the class and tag name selector to select HTML elements and then perform some action by adding the necessary styling to it.
External CSS
In external CSS we will have to create a CSS file in another file but possibly in the same folder as our web files. This file will then be loaded into the website using the method described below.
<!-- this is the way to load a style sheet in the head section -->
<link rel="stylesheet" type="text/css" href="style.css">
At this point, we will first create an external CSS file.
The ‘CSS’ code is saved in the file ‘style.css’ which is saved inside the folder ‘css’.
/* css/style.css */
h3.h3_blue{
color: blue;
}
h3.h3_red{
color:red;
}
Next, we need to import the CSS file into the ‘html’ file as shown below
<!DOCTYPE html>
<html>
<head>
<title>CSS Tutorial</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h3 class='h3_blue'> Heading 1 </h3>
<h3 class='h3_blue'> Heading 3 </h3>
<h3 class='h3_blue'> Heading 3 </h3>
<h3 class='h3_red'> Heading 1 </h3>
<h3 class='h3_red'> Heading 3 </h3>
<h3 class='h3_red'> Heading 3 </h3>
</body>
</html>
When any of the examples given above is run on a browser it will be seen that it has a style just like all of the others.
The image shown below is the result of the web page when it is loaded in the browser
With that, we have come to the end of the lesson and I’m pretty much sure that you enjoyed the lesson.
Thank you so much for reading please do support us by sharing the article with your friends who might be interested in learning CSS.
If you have any question ask us in the comment section.
To receive weekly newsletter from us signup below, we dont spam, and your information is secure with us
