Table of contents
CSS gives you so much power to control the way you want your website to look like. Designing gives a different feel to your website. Html tags are useful as the starting point of building a webpage but designs make it easy for a developer to design his/her webpage into whatever design of their choice. CSS changes the color, font, size, spacing, etc, and many other aspects of HTML elements.
CSS (Cascading style sheet) is a programming language/style sheet used to design HTML tags and mostly works alongside Javascript to create the user interface for both web and mobile applications. CSS gives a new look to your HTML documents. One can completely change the look of their website using CSS. One has to have a basic knowledge of HTML to understand and be able to apply CSS.
In the previous articles, I wrote about different code editors used while coding but for any code editor that is being used, the CSS file "style.css" is opened alongside the "index.html" file. Which makes it easy for us to style our Html elements and run the code on the browser. CSS helps to design your webpage according to how you want it to look.
There are hundreds of CSS properties but first, it is advisable to start with the basics of how to add CSS to an HTML document. There are three(3) ways to add or insert CSS in an HTML document and they are:
INLINE CSS
This involves adding or applying CSS on a single line of HTML elements. An inline CSS makes use of the "style" attribute which is added to each HTML tag.
- Example styling your P element with the color red:
<p style= "color: red;">Hello World</p>
Advantages of inline CSS
One doesn't need to create an extension ".css" file just like external CSS.
Inserting CSS rules on your HTML page can be done easily using inline CSS.
Disadvantages of inline CSS
- Adding inline CSS to every Html tag can disrupt the structure of your HTML document to look messy and hard to read.
- Adding inline CSS to every HTML tag can really be time-consuming so it isn't advisable to make use of inline CSS when styling a large page or document.
INTERNAL OR EMBEDDED CSS
This CSS style is used for styling a single page or document and this can affect all the elements of the page. The "style" attribute is nested within the "head" element on your HTML document.
- For example:
<style>
p {
color: red;
</style>
- Example of how it looks in an HTML document:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
</style>
</head>
<body>
<p> The internal CSS color is applied on this paragraph </p>
</body>
</html>
Advantages of internal CSS
- CSS has what is called "selectors", using internal CSS to style your document one can make use of the "class" and "id" selector.
- The CSS code is added within the HTML document so there is no need for multiple files.
Disadvantages of internal CSS
- Using internal CSS can be time-consuming when creating a big website.
- Internal CSS is only for the specific page and no other.
EXTERNAL CSS
This is used to apply CSS on multiple pages. Here you will link your webpage to an external CSS file which is ".css" and this file can be created using any text editor. i.e style.css. This CSS style is efficient for styling a large website. This style sheet makes use of the "link" tag which is nested in the "head" element.
Note: This "style.css" extension contains only CSS and no HTML document.
For example:
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Advantages of external CSS
- This can be used for multiple pages. Make all pages look uniform and style making a cohesive website.
- Your HTML page will be smaller and the structure will be a lot cleaner.
- One doesn't need to worry about the styling of other files as that is done to the external files already.
Disadvantages of external CSS
- Unlike inline CSS, external CSS cannot style specific elements because every version of the same element will look exactly the same.
- External CSS must be loaded if not your pages will not be rendered completely, because the CSS file must be referenced by every page of the site if not none of the formatting its set will be applied.
Conclusion
This article is all about the starting point of CSS and the three ways in which it can be applied. As much as these three ways have their advantages and disadvantages, they have their individual importance and functionality that they add while styling your webpage. One just has to choose which way of styling is much better for them and it all depends on what kind of project or website one is trying to build. Whichever way you choose to make use of, it is all dependent on you because it all boils down to one end result "styling" and "designing" your webpage.