In the journey of web development the next step after Html is CSS
So let's begin with CSS 😃
As earlier we studied that HTML is the skeleton of the web page , similarly the CSS is clothing of the web page
It is only the CSS that decide how much attractive will be your page , so it is very important part of our web journey
What is CSS ❓
CSS stands for cascading style sheet .
Cascading Style Sheets is used to describe the formatting of
a document written in HTML.Extension of a css file is .css that can be linked inside Html file by using link tag . example :
<link rel="stylesheet" href="style.css">
Ways to add CSS
Inline CSS
To use inline CSS , add style attribute to the needed tag. Style attribute can contain any CSS property which an external CSS can have.
Example :
<body>
<h1 style="color:blue">Hello World!!!!!!!</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
Internal CSS
Internal CSS is written inside the
<style>tag in the head section of an html file.It has less priority then inline css but have higher priority then external css
-Example :
<head>
<style>
body {
color: yellow;
background-color: green;
}
</style>
</head>
External CSS
when using external CSS , we use
<link>tag and give the path of css file which needed to be attached .Syntax :
<link href="style.css" rel="stylesheet" />
- Example :
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> heading 1 </h1>
<p> paragraph </p>
</body>
</html>
Note : While using Internal and external CSS , the selectors are required to target any specific tag
What are CSS selectors ❓🤔
Selectors helps to target the elements on which CSS properties are being applied. Selector is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
Selector's List :
- Universal Selector
- Individual selector
- Class selector
- ID Selector
- Attribute Selector
Combinator's List
- Chained selector
- Combined selector
- Inside an element
- Direct child
- Sibling + ~ selector
1. Universal Selector
Universal selector selects the whole document i.e the css properties are applied to all the html elements. It is written as { css properties } Here I have applied a background colour to the whole document.
2. Individual selector
This individual selector allows you to choose HTML elements based on their element tags, such as p, li, h1, div, h2, etc.
syntax:(any tag/element){ css properties }
3. Class selector
A dot ( . )is used to denote a class selector which is followed by class name or you can say a string of characters which is defined by yourself. It is similar to ID selector but the only difference is you can use it for multiple elements in a page which share the same CSS styles.
Class selectors are considered as the most useful and versatile selectors out there. They are well supported in all browsers. You can add multiple classes on a HTML element just separating it by a space.
4. ID Selector
A hash ( # ) is used to denote an ID selector.
The id should be unique for the entire webpage.
ID selectors are considered as the most powerful type of selector in terms of CSS specificity.
It means id selectors beats all other types of selectors and the styles defined within wins, which sounds cool but considered not so cool because it's a good idea to have a lower specificity selectors that are easier to override when needed.
5. Attribute Selector
- The
[attribute]selector is used to select elements with a specified attribute.
For example, [autoplay] will match all elements that have the autoplay attribute set (to any value).
6. Chain selector(and selector)
You can also chain selectors together. Chaining selectors are very useful when you want to select a specific element in your webpage.
You can use it while working with multiple nested elements and want to select the right element.
7. Combined selector
Combined selectors are used to target/select different elements in html page at single time.
8. Inside an element
Inside Element selectors are used to target/select inside element in the html elements(in below example we can target the p which is inside the div)
9. Direct Child
It is similar as the inside an element selector , because it also select the child , and we can say child are also inside their parent tags
Direct Child selectors are used to target/select direct child of any html elements(it will target div which are having p in below exam
10. Sibling + ~ selector
Siblings selectors are used to target/select direct siblings of any html elements
~ is used to target/select all siblings html elements except himself. + is used to target/select immediate html elements
Example 1- ~ is used to target/select all siblings html elements except himself.
+ is used to target/select immediate next html elements
Example :
heyy😀😀, we have completed all the selectors
BOOYAH!!!✨✨🎉🎇
Thanks for reading........................