CSS(CASCADING STYLE SHEET)

CSS stands for Cascading Style Sheet. CSS helps in making a web page more attractive . We can create animation with CSS and change the layout with CSS properties.  In CSS we have various types of CSS properties. 

There are Three types of CSS.

1) Inline CSS

2) Internal CSS

3) External CSS

=> How to use CSS in our Web Page.

1) Inline CSS :-

 In this type of CSS the CSS code writes inside the HTML elements with style attribute.

syntax of using inline CSS
<HTML element style="property: value;">Type your matter here.</HTML element>

example:-

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
</head>
<body>
    <p style="color:red"> This is a paragraph which has red color.</p>
   
</body>
</html>

The output of above example.

This is a paragraph which has red color.

=> Internal CSS

In this type of CSS we write our CSS code in HTML file and use the <style> tag in head tag.
<style>tag used inside the <head>tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  <style>
    p{
        color:red;
        background-color: black;
        font-size: 24px;
    }
  </style>
</head>
<body>
    <p> This is a paragraph which has red color.</p>
   
</body>
</html>


The output is :-

This is a paragraph which has red color.

=> External CSS:-

In this type of CSS we create a separate CSS file , save with .css extension and  link with HTML file with <link/> tag.
It is beneficial when we create large web site . 
Example :-
css


The output is :👇
external css


The CSS Selector:-

 The CSS selector used to target  and apply the properties on the  specific HTML element in a web page.
There are 4 type of selector .

1) type selector:- 

In this selector  we type our HTML \element in CSS ,When we use this CSS selector then the properties applied on all HTML element.

syntax:-
h1{ color: red;}
Here 
h1          -    it is a selector
color     -    it is a property name
red        -    it is a color name

2) id selector :-

 In this type of selector we make unique to HTML element. It target to HTML element and applied  property. 
<HTML element id="idname"> type your content here.</HTML element>
Let's suppose you have two paragraph and you want to apply different property then you can use id selector.

selector


The output is :-👇

hello this is my first paragraph.

Here we have 2 paragraph but first paragraph has unique id("first"),  Id name call with # symbol in CSS file.

syntax:-

#idname{ property: value;}

3) Class selector :-

class selector also makes an element unique and target a specific element, we can call classname with dot[ . ] operator.

syntax:-

<html element class="classname">type your content here</html element>

calling the class selector.

syntax:-

.classname{property: value;}

example :-

css selector

The output is 👇


4) Descendant selector:-

A descendant selector is a combination of all selectors , we can select a specific html element and apply the property.

lets suppose you have a paragraph and you want to change the a text color , if we use type , class , id selector separately it does not work on that text so you can use descendant selector.

Example:- How to use descendant selector


 The output is 👇

descendant selector use

=> CSS Properties :-

CSS has various types of properties which make attractive to corresponding html element. It allow to developers to set the layout and designing  of web page.