What is css? Types of css? and its basics

Posted on By Techuser

What is css?

  • Css stands for cascanding style sheets.
  • Css controls how html is  displayed on webpage.
  • Its only works with HTML.
  • CSS Document saved with Extension is .css

Types of css

  1. Inline css
  2. Internal css
  3. External css

Inline css

We can include css directly to Html tag.

EX

<h1 style="color: blue"> Hello world! </h1>

Internal css

In this case we can include css into head tag of HTML

Ex

<head>  
    <style>  
        h1 {  
            color: blue;  
        }  
    </style>  
</head>

External Css

Most commonly used css where css is coded seperatly and then link with HTML document using Link tag in head tag of HTML Document.

IN HTML Document

<head>  
    <link rel="stylesheet" href="style.css">  
</head>

IN CSS Document

h1 {  
   color: blue;  
}

Basics of CSS

CSS Selectors

1. Elements

The first way to select HTML elements by simply using its Name

Ex

h1 {  
    font-size: 20px;  
}  
p {  
    color: green;  
}  
div {  
    margin: 10px;  
}

In above case, We are selecting different elements like h1, p, 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.

2. 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.

Let’s see it in action:

IN HTML

<div class='container'>  
    <h1> This is heading </h1>  
</div>

IN CSS


.container {  
    margin: 10px;  
}

From code above, 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 10px margin.

3. 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. 

<div>  
    <p id='para1'> This is a paragraph </p>  
</div>


#para1 {  
    color: green;  
    font-size: 16px;  
}

This are the some basics of Css. In upcoming turorial we can see full basics of css. For more Interesting article Follow the Blog.

THANK YOU

Tech Terms