CSS stands for cascading style sheet It file extension is .CSS. It is main objective is to enhance an attractive look of created webpage in HTML.

Blog Header
Blog Header Basic Engineer

CSS describes how HTML element are to be displayed on screen, paper, or in other media. CSS work just like a human body.

  • It stands for cascading style sheet.
  • It is main objective is to enhance an attractive look of created webpage in HTML.
  • It is only designing tool.
  • It is a collection of style which are used with HTML tags.
  • It file extension is .CSS .
  • It is not case sensitive.

How To Add CSS

Three ways to Insert CSS

  • External CSS
  • Internal CSS
  • Inline CSS

Components of CSS

  • selector
  • property / style
  • Value


Selector is an element in which we can define/set style according to requirement.

Types of CSS Selectors

There are five types of selector.

  1. Tag selector /element selector.
    • It represent the name of HTML Tag
  2. Class selector.
    • It is identifies with the help of any particular name a/c to identifier rule.
    • It must be start with dot(.) symbol.
    • It is applies with multiple tags a/c to requirement.
    • It can be use multiple times.
  3. Id selector.
    • It is similar to class selector but it is written with the help of of # symbol.
    • One major difference b/w Id and class is that Id can be use only once time but class can be use multiple times according to requirement.
  4. Group selector.
    • In this case we define styles with multiple tag
  5. Universal selector.
    • It is applies for all elements.
    • It is represent with the help of (*)star .

Method for using style in CSS

  • Inline style
    • It is mainly use with particular tag.
  • Internal style
    • It is use for only single webpage.
    • It is written within <style> tag.
    • <style> tag must be define in <head> tag.
  • External style / Embedded style
    • It is use for multiple webpages.
    • It consist of separate CSS file in which only style or property are define.
    • <link> tag is used to embed CSS file in html webpage.
    • <link> tag is define within <head> tag.

Background style

  • Background-color
  • Background-attachment
  • Background-position
  • Background-size
  • Background-repeat
  • Background-image

Border style

  • Border-color = change border color
  • Border-width = set border width
  • Border-style
  • Border-left = use modify particular border
  • Border-top:
  • Border-right
  • Border-bottom
  • Border-left/right/bottom/top-style = dotted;
  • Border-radius.

Margin style

  • Margin-top
  • Margin-left
  • Margin-right
  • Margin-bottom

Paddding style

  • Padding -top
  • Padding -left
  • Padding -right
  • Padding –bottom

Position Property

It is mainly used to set the position of element on web page according to requirement.

It has four values

  • Static
    • It is default position . in this case we cannot set position of element from its normal position.
  • relative
    • In this case we can set the position of element in any direction a/c to requirement
  • fixed
    • In this case we can set the position of element in any direction but it is fixed
  • absolute
    • It work a/c to nearest ancestor . in this case we can set position of element in any direction.

Display property

It is use to display element in block level and inline level on web page. In other words, it is specify how to display element on web page.

Display property

Value of display property

  • Inline = It is use to create inline level tag element. In this case heigh and width cannot be define.
  • Block = It is use to display element in block level. In this case height and width can be define.
  • Inline-block – It is similar to inline but we can set height and width.
  • None = In this case element cannot be display.

Layers in css/ z-index property

  • z-index property is use to create layer like stack in program.
  • It used with positional element.
  • The value of z-index must be integer value.

Outline style

It is similar to the border but it must be defined in all direction of any particular on web page. While border can be define with any direction.
Outline is not part of element while border is part of element.
Outline style

  • Outline-style
  • Outline-width
  • Outline-color

Transform property

This property is used to the change the shape/size and position of any element on the web-page.

There are some transform method :-

  • Translate()
    This method is use to move any element from one place to another place.
  • Rotate()
    This method is use to rotate any element clock wise or anti-clock wise according to the specified degree.
  • Scale()
    This method is use to increase or decrease the size of element.
  • Skewx() and skewy()
    This method is use to increase or decreased the particular axis odd element.

If you have any queries regarding this article or if I have missed something on this topic, please feel free to add in the comment down below or write us on info@basicengineer.com for more details. See you guys in another article. 

Stay Connected Stay Safe. Thank you.

Basic Engineer

Hey Readers! We have more than fifteen years of experience in Software Development, IoT, Telecom, Banking, Finance and Embedded domain. Currently we are actively working on Data Science, ML and AI with multiple market leaders worldwide. Happy Reading. Cheers!


Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *