Introduction to CSS

CSS stands for Cascading Style Sheets. It's basically used to create good-looking websites by describing how the HTML elements are displayed on the screen. It also controls the layout of the website.

why we need css

when we write HTML, only the content and structure are visible on the page but we color it, give font size, align text and do a lot of other things so that when we look a website we love it .

example:-Just like when a house is built, only the wall and the roof are visible but after coloring it looks beautiful.

How We Implement CSS

Three ways to implement CSS

Inline CSS
Internal CSS
external CSS

Inline CSS

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is first experience on hashnode</h1>
<p style="color:red;">This is my article on .</p>

</body>
</html>

internal CSS


<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1> Css Im learned from chaicode Platform </h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS:- In External CSS first we need to link CSS in Html file, after that we Implement CSS

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

when you link CSS after that you implement CSS

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

Some more things to beatify the html Or a webpage with CSS.

Selectors
Box Model
Flexbox
Animation
Combinators
Grid
Responsive
Sass
Templates

What is selector

CSS selectors are used for selecting the HTML elements that you want to style, and they are a fundamental part of working with CSS.

Type of selector

Simple selectors.
Combinators.
Attribute selectors.
Pseudo-class selectors.
Pseudo-elements selectors.

simple selector

Simple selectors are pretty straightforward and used most of the time in development.

Element Selector.
Class Selector.
ID Selector.
Selector list.
Universal selector

Element Selector

The Element Selector only selects all the instances of a tag or element present on the webpage.

Class Selector

The CSS class selector is probably the most useful and used selector, it selects all elements that have given the class value in their class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.

Id selector

ID selectors are the most powerful in terms of CSS specificity, just like the class selector, it targets specific elements in our HTML document that we can then use as a reference in our CSS.

To select an element with a specific id, write a hash (#) character, followed by the id of the element.

ID selector must be always unique and each element must have only one id to identify the element uniquely.

Selector List

The CSS selector list (,) allows us to select multiple elements with different selectors at once and style them. We have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors.

This is done by grouping them in a comma-separated list and CSS selects all the matching elements in the list.

Universal Selector

The universal selector(*) applies the same styles to every element on the page.

Asterisk (*): symbol denotes the universal selector in CSS.

Chai and Css