This article will guide you through the fundamental to advanced aspects of CSS, covering properties, selectors, functions, media queries, and beyond.CSS plays a vital role in elevating the visual appeal of web pages. Without CSS, web pages might lack visual attractiveness.
What is CSS?
- CSS, which stands for Cascading Style Sheets.
- Utilizing CSS, we can apply styles to HTML elements, shaping their appearance on screens, paper, and other types of media.
- Through the utilization of CSS, we can simultaneously manage the layout of numerous web pages.
Why learn CSS?
Styling is crucial for websites. It boosts their appearance, making them user-friendly. Nobody desires to engage with a boring and unkempt website. Good styling is a vital part of the website because users prefer attractive sites. To understand web development, learning CSS is a must.
Types of CSS
There are three types of CSS which are given below.
- Inline CSS
- Internal CSS
- External CSS
Inline CSS
Using an inline style allows you to apply a distinct style to a singular element.
To utilize inline styles, include the “style” attribute within the corresponding element. This attribute can hold various CSS properties.
Example
Inline styles are defined within the “style” attribute.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>Also read, JavaScript learning roadmap
Internal CSS
An internal style sheet becomes valuable when a single HTML page has a unique style. The internal style is declared within the <style> element, located within the head section.
Example
Internal styles are declared within the <style> element, inside the <head> section of an HTML page.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
h1 {
color: white;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>External CSS
With an external style sheet, you have the power to transform the appearance of an entire website through a single file modification.
Every HTML page needs to incorporate a link to the external style sheet file within the <link> element, situated in the head section.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML page.
In the “index.css” file, we define the styling for HTML elements and establish a connection to it using the link attribute.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>You can write an external style sheet using any text editor, ensuring it’s saved with a .css extension. Remember, the external .css file shouldn’t include any HTML tags.
Here is how the “index.css” file looks:
body {
background-color: black;
}
h1 {
color: white;
margin-left: 20px;
}