This article provides a comprehensive guide for Web development learners on CSS styling methods.
CSS stands for Cascading Style Sheet and is defined as a programming language used to design website content. HTML (Hyper Text Mark Up Language) is a programming language for creating websites' structure and content, let's say that it was possible to do some basic styling using HTML. Therefore, both languages work hand in hand.
**
Discussing Types of CSS
**
There are 3 types of CSS. Below is a highlight of the same;
Inline Styling: This is done when we apply a style directly to a particular HTML element. In other words, we use the style attribute within an HTML Tag. This style overrides Internal and External styles.
Embedded/ Internal Styling: This is done when we include our style in the HTML document; usually we declare the <style> tag at the head section of the HTML file.
External Styling: When we write our style in a separate file with a .css extension, then apply style properties to the file. A <link> tag is then used to link this file to the HTML file.
Note: We will be using the VS Code editor and will go ahead to create both the HTML and CSS files represented below:
We will also create an HTML code with the title; ‘Types of CSS’ and a paragraph <p> ’I am learning CSS styles, it’s not easy but I am determined to commit at least 2 hours daily just to learn’. We will also create a CSS file and utilize it later.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>I am learning types of CSS, it's not easy but I am determined to commit at
least 2 hours daily to just learn</p>
</body>
</html>
Below is the output that we get on the browser with no styling.
How to Add Internal Styling With Coce Examples
We will go ahead and apply internal styling with the code above. Think about it for a moment, how do you change the color of the paragraph? Well, here is how you do it using the internal styling; see the below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of CSS</title>
</head>
<body>
<p style="color: red;">I am learning types of CSS, it's not easy but I am determined to commit at
least 2 hours daily to just learn</p>
</body>
</html>
The Output is as below on the browser;
See? We have used the style attribute within the paragraph tag <p> to make the paragraph color red.
How to Add Embedded/Internal Styling With Code Examples
We will also go ahead and apply the embedded or internal style to our paragraph above; remember, in this type of CSS, we declare the <style> tag at the head section of our HTML file as per the below, and for that case, let's pick a different color for our paragraph, let's go by color BLUE. It's important to note that all rulesets must have the opening and closing curly braces in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of CSS</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p style="color: red;">I am learning types of CSS, it's not easy but I am determined to commit at
least 2 hours daily to just learn</p>
</body>
</html>
Below is the final Output of the code above;
What do you notice here? Did the color change to Blue? It remained Red, right? This is because Inline styling is much stronger and overrides Internal and External styles. To change the outcome, we will have to eliminate the inline style and when we do, the outcome is as below;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of CSS</title>
<style>
p{
color: blue;
}
</style>
</head>
<body>
<p>I am learning types of CSS, it's not easy but I am determined to commit at
least 2 hours daily to just learn</p>
</body>
</html>
How to Add External Styling With Code Example
Remember we created a file by the name style.css? This is where we will make use of it. So we will go ahead and open the style.css file and declare our style on the paragraph as below; To note, Internal/Embedded styling is much stronger and overrides External style. So we shall eliminate the internal style in our HTML file.
We must link our HTML and CSS files together otherwise the styles will not affect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Types of CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>I am learning types of CSS, it's not easy but I am determined to commit at
least 2 hours daily to just learn</p>
</body>
</html>
p {
color:darkorange;
}
This is our output on the browser.
NOTE: It’s important to note that we have only worked with one Property Type, the Color, otherwise many CSS Properties and decorations can be applied including background, borders, positioning, etc.
There is also another type of CSS called Importing Style which is not commonly used. The style is somehow similar to linking; however, the syntax for importing the style sheet is @import followed by the keyword URL and the actual URL of the style sheet.
**
Importance of CSS in HTML
**
CSS is a critical component for web development as it provides the required tools for styling and designing websites. HTML alone provides the structure of a website, and CSS is majorly responsible for making a website visually appealing.
**
Summery
**
We have discussed the different types of CSS and how they can be used. All these styles are equally important as they style up websites and their contents differently. Developers can make informed decisions on which style to go for and when to use each style.
We have only discussed the basics of CSS, building an eye-catching website requires a deep understanding of both HTML and CSS. Beginner developers are encouraged to practice the different styles.
Top comments (0)