You are currently viewing My Coding Journey- CSS Tutorial- Day 2

My Coding Journey- CSS Tutorial- Day 2


  • CSS stands for Cascading Style Sheets which is used to style a web page.
  • CSS is used to decorate the webpage by describing how HTML elements are to be depicted on the screen or other media.
  • CSS has the power to control the layout of multiple pages at once and saves a lot of time.

Topics I Covered Today

  1. how to add CSS
  2. CSS Syntax
  3. CSS selector

How to add CSS

CSS can be added using three methods to add CSS in HTML

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS:-

it is added by the syntax <tag style=”CSS”/>
It is used only when you target to single element of the HTML.

Eg, <html style=” background: blue>


Internal CSS:-

it is added by the syntax <style>css</style>
It is useful when you target a single webpage.

For example, <html>



                                          html {

background: blue;





External CSS:-

it is added by using the syntax <link href=” style.css”/>
It is used for multiple web pages.

<link rel= “stylesheet”  href=“style.css”/>
Html {
Background: green;

CSS Syntax

h1 { color: blue; font-size;12px;}

To explain the above syntax, h1 = selector that points out the html elements to change its style.


Blue = value

We can say, the CSS rule consists of a selector and a declaration.

CSS Selector

CSS selectors are used to choose the HTML components that we want to style.

We can divide CSS selectors into five categories:

SelectorexampleExample Description
#id#firstnameSelect the element with id=”firstname”
.class.introSelect all elements with class=”intro”
element.classp.introSelects only <p> elements with class=”intro”
Selects all elements
elementpSelects all <p> elements
element,element,..div, pSelects all <div> elements and all <p> elements
Different types of CSS selectors.

Leave a Reply