Skip to content
Techusers

Techusers

Learn To be a Dev

  • Home
  • Guide
  • Security & Privacy
  • Tech News
  • Computer
  • Top List
  • What is
  • Engineering
  • How To
  • Tech Terms
  • Toggle search form

What is css? Types of css? and its basics

Posted on 28/09/202101/10/2021 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

Related

Tech Terms

Post navigation

Previous Post: MS Office Excel 2016 and 2019 Full Shortcuts
Next Post: What is Anti Aliasing In Games?

Recent Posts

  • Today’s Wordle Hints, Answer for #1402 on April 21
  • Today’s Wordle Hints, Answer for #1401 on April 20
  • NYT Connections Today: Hints and Answer for April 19
  • Today’s Wordle Hints, Answer for #1400 on April 19
  • Today’s NYT Strands Hints, Answers & Spangram for April 11, 2025

Copyright © 2025 Techusers.

Powered by PressBook WordPress theme