CSS stands for Cascading Style Sheets developed by W3C. this language is used to design or describe the presentation of HTML. CSS describes how elements should be rendered on screen, paper, speech, or other media.
HTML never intends to contain a tag to specify the format of HTML page. HTML was created to structure the layout. to solve this problem W3C introduced CSS.
Ways to Insert CSS
There are three ways of inserting a style sheet:
- External CSS
External styles are defined within the <link> element, inside the <head> section of an HTML page
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
- Internal CSS
The internal style is defined inside the<style> element, inside the head section.
<style>
body
{
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
3.inline CSS
add the style attribute to the relevant element. The style attribute can contain any CSS property.
<h1 style="color:blue;text-align:center;">hey everyone</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
Syntax of CSS
CSS Selectors
CSS is a design language that is used to style HTML elements. And in order to style elements, you first have to select them. there are three different ways you can select HTML elements.
- Element
The first way to select an HTML element is by simply using the name. like We are selecting different elements like h1, p, and div and giving them different style attributes. The font size controls the size of the text, color sets the text color, and margin adds spacing around the element.
- Class
Another way of selecting HTML elements is by using the class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well. HTML
<div class='container'>
<h1> This is heading </h1>
</div>
CSS
.container {
color: red;
}
we have assigned the class of container to the div element. In the stylesheet, we select our class using.className format and giving it a red color.
- ID
Like classes, we can also use IDs to select HTML elements and apply styling to them. The only difference between class and ID is that one ID can be assigned to only one HTML element. in ID we use #classname instead .className.
By using these simple tags you can make your website look more colorful and aesthetic.
you can explore W3school or Mozilla Mdn web docs to understand better.
In CSS the most difficult topic that I found was understanding the concept of flexbox. it took me time to understand the basics of it but when I finally get it. everything seems easy to me
CONCLUSION You might feel a bit overwhelmed by all this information, but don’t worry. just keep learning and practicing ^~^