Cascading Style Sheets (CSS) are like the decorator for your website. If you think of a website as a house, HTML is the structure (the walls, windows, and doors), and CSS is the paint, furniture, and decorations. CSS controls how everything on the website looks, such as the colors, fonts, spacing between elements, and even the layout.
If you take away the CSS from a website, the site will still function and all the content will be there, but it'll look very basic and boring, like just plain black text on a white background. CSS is what makes a website look nice and distinct. Essentially, CSS manages how everything on a webpage looks to visitors.
The image on the left shows how the HTML code will be displayed. The image on the right shows the same content, with CSS applied:
This is what the code for the light blue version (HTML + CSS) looks like:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue; /* Set the background color of the page */
font-family: Arial, sans-serif; /* Set the font style */
}
h1 {
color: darkblue; /* Heading will be dark blue */
text-align: center; /* Center the heading */
}
p {
color: gray; /* Paragraph text will be dark gray */
font-size: 18px; /* Paragraph text will be slightly larger */
text-align: center; /* Center the heading */
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is an example of how CSS can style a web page.</p>
</body>
</html>Did you notice the portion nested between <style> and </style>? that is where CSS is located in an HTML code. That, however, is not the only option! Continue below to understand various types of CSS applied to HTML.
As we mentioned before, CSS stands for Cascading Style Sheets. The "cascading" part means that when you set styles for a website, those styles can spread down to all parts of the site. For instance, if you decide that all the text on the website should use a certain font, then every piece of text will use that font unless you specifically change it for certain parts.
To bring back our house: if you decide to paint all the walls white, this is your general style rule. However, you might want to paint one room a bold accent color, like red. This specific rule for the red room overrides the general rule for all the other rooms. This is how CSS "cascades," with specific styles taking precedence over general ones.
Cascading is a CSS concept that determines how styles are applied to HTML elements when multiple styles are defined for the same element. There are three types of CSS can be applied to HTML:
.css file and linked to the HTML document using the <link> tag in the <head> of your HTML.Example:
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
…
</html>
<head> section, using the <style> tag.Example:
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
…
</html>
style attribute.Example:
<p style="color: green; font-size: 18px;">
This is a paragraph with inline styling.
</p>
Different methods of applying styles to a website serve various purposes, and the choice of method often depends on the size and structure of your project. The term "Cascading" signifies how the prioritization of these styles functions together.
Utilizing internal or inline CSS can present challenges; for instance, if you wish to alter the appearance of your entire website, simply modifying one file may not be sufficient. With inline CSS, it would be necessary to edit every individual instance where styles have been applied, which can be quite time-consuming.
On the other hand, there may be situations where the use of inline CSS is the only option available, such as when working within a specific learning management system (LMS) like Canvas. Therefore, it is essential to understand the different styling methods and recognize when each is most appropriately applied.