You are done with the HTML skeleton of your webpage and you definitely don't want it sitting there like a Greek mundane without all the beautiful colors and styling. This could be the right time to start adding styles to your webpage.
In this short article, I would be showing you 3 ways to insert CSS style sheets to your webpage.
You'd agree with me that you probably don't want your page looking like this:
but something with some colors and styling like this:
CSS style sheets can be inserted into any webpage using:
Inline styling,
Internal Styling, and
External Styling.
Inline Styling
This is the type of styling added directly unto the HTML element on the webpage. It is included within the opening tags of the element.
syntax:
<div style = " style properties "> This is a div </ div>
Examples: The red color styling is added to the p element.
<p style = " color : red " > This paragraph will have a red font </p>
That is all there really is to this method of adding styling to elements on a web page.
This is a very inefficient method of styling as each element has to be styled singly. This could mess the easy readability of our code as our codebase begin to grow and more and more elements are added.
Internal Styling:
This method of styling adds CSS to the webpage by including all styling within a style tag <style> --- </style> and this must be included in the head section (tag) of the HTML file.
consider the following HTML skeleton to demonstrate how internal styling is added to the webpage.
<html>
<head>
<title> --- </title>
<style> Add styling here... </style>
</head>
<body> ---- </body>
</html>
This method is a more efficient method of adding CSS to the webpage because multiple elements can be styled all at once and with not so many lines of code!
Example: All the h2 and p elements could be styled using a single declaration.
<style>
h2, p {
color : red
}
</style>
Example 2: Using a single line like the one below, the entire body of the webpage can be styled all at once.
<style>
body {
color : blue;
background-color : black;
padding : 5px;
}
</style>
You could style the whole web page like this too, by using a universal selector ( * ) like this :
<style>
* {
color : blue;
background-color : black;
padding : 5px;
}
</style>
Make sure to end each line with a semi-colon (;) or it won't read the CSS below it.
External Styling :
The internal method of inserting CSS into our webpages is great but having HTML and CSS codes in one file isn't so great and will eventually mess up the code and hinder proper readability. Usually we would want all our style sheets to be in a different external folder/file far away form the HTML file/folder.
We can achieve this by writing all of our CSS codes in a separate .css folder and then reference it in the
HTML folder so the styles would be implemented.
Assuming we have a webpage with file name sample.html and we've created all our styling at another folder called sample.css, we can easily add all that CSS code by just referencing it in the HTML folder using the link tag.
(<link rel : " " href ; " " >)
usually added in the head section or head tag.
<head>
<link rel = "stylesheet" href = "sample.css" >
</head>
The rel attribute is used to define the relationship between the linked file and the HTML document while the href attribute defines the source or location of the CSS folder ( which in this case is at
sample.css).
Multiple CSS files can be added to the webpage using the external styling method - Lets assume you have three different style sheets that you wish to add to your webpage saved up somewhere in a separate folder.
The three CSS files are :
styling for home page in
home.cssstyling for about page in
about.cssstyling for blog page in
blog.css
All the CSS files above can be added in the head section of the HTML.
<head>
<link rel = "stylesheet" href = "home.css" >
<link rel = "stylesheet" href = "about.css" >
<link rel = "stylesheet" href = "blog.css" >
</head>
External CSS styling is the most efficient method of inserting CSS to webpages because:
All styling are done in a separate folder different from the HTML. neater and more readable code.
Multiple HTML elements can be selected and styled in few lines of code.
You only have to include a single link tag into the HTML folder and viola! styles are added to the elements.
CSS Specificity :
Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied.
This implies that the order of preference of styling depends on the method used. If a single element were to be styled using all three methods of styling, which do you think would be implemented?
The inline styling would override every other styling and get implemented first because of its specificity.
The order of execution based on specificity is therefore:
Inline styling
External styling
Internal styling
Thank you for reading, now go ahead and style those pages to look as beautiful and colorful as you want it.