Hey there! It's great to see your continued interest in HTML.
In the previous article, we learned about adding styles to HTML elements. However, there are other methods available for adding styles. In this article, we'll take a closer look at some alternative methods for adding styles to your HTML elements. .
We have previously worked on displaying the list of days in a week in an ordered format. Now, we will apply styles to these elements.
To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom. We only need the HTML editor, so feel free to minimize the other two if you want.
CSS: Cascading Style Sheets
CSS stands for Cascading Style Sheets, and we will use the terms "styles" and "CSS" interchangeably.
So, when we talk about "cascading" in the context of styles, it basically means that any style applied to a parent element will automatically apply to all of its child elements as well. It's like a little ripple effect - once you style the parent, its children inherit those styles too! It's a pretty handy feature that makes it easier to maintain consistency throughout your web design. No need to manually apply styles to each and every child element when you can let the cascade do the work for you!
How to add CSS
CSS can be added to HTML documents in three ways:
- Inline Style
- Internal Stylesheet
- External Stylesheet
Inline Styles
Below is the syntax for adding Inline styles to HTML elements:
<tagname style="attribute:value;">tagname: This is the start tag. The style is only added within the start tag/element. e.g. <h1>, <li>
style: This is a keyword; it is a constant.
attribute and value: An attribute is a property that you want to add to an element, and the value is the value of that property.
Note: If you recall, in our previous article,, we discussed how to apply styles to HTML elements. At that time, we were using inline styles.
Inline styles work well for a single HTML element, but they are not ideal for multiple elements. You have to repeat the same code for each element. The solution is to use internal stylesheets.
Internal Stylesheet
Internal CSS is written within the head of your HTML document, enclosed within a style element.
Below is the syntax for adding Internal styles to HTML elements:
<html>
<head>
<style>
<!-- your Internal CSS here -->
</style>
</head>
<body>
</body>
</html><style>...</style>: This is an element that contains all the styles of a page.
Let's see how we can achieve the same look by using internal styles instead of inline styles.
- To delete all inline styles in the playground, simply hit the "Reset" button.
- Now, add a style element inside the head section like this: <style></style>.
- Add the same styles under the style element, and you will see that the same styles in UI
<style>
h1 {color:blue;text-align:center}
ol {background-color:lightblue; font-family:courier;}
</style>Internal styles work well for multiple HTML elements on the same page, but they are not ideal for multiple pages across a website. You would have to repeat the same code for each page. The solution is to use external stylesheets.
External Stylesheet
External CSS is written within the head of your HTML document, enclosed within a link tag. The link tag has an href attribute that points to a filename with a ". css" extension.
Below is the syntax for adding External styles to HTML elements:
<head>
<link rel="stylesheet" href="styles.css">
</head>Let's see how we can achieve the same look by using External styles instead of internal styles.
- To delete all inline styles in the playground, simply hit the "Reset" button.
- Now, we can add a link tag inside the head section like this:<link rel="stylesheet" href="styles.css">, then create a file styles.css and add styles to it, but this is already done in the editor or playground. Now it's time to use the CSS editor in the playground.
- If you add the same styles in the CSS editor, you will see the same styles being applied.
h1 {
color: blue;
text-align: center;
}
ol {
background-color: lightblue;
font-family: courier;
}From now on, we will be using the External CSS method in the playground. This means we will utilize the CSS editor within the playground.
Output
Want to practice more? Click here for more hands-on exercise.
References: