Mainly three types are used to apply CSS style to HTML Content.

1. Simple Name:-

Id Name Class Name HTML tag Name

You can able to apply the CSS style by targeting direct the id of the HTML tag, but make sure you need to add **'#' **before the id name. **Ex. #first -> 'first' **is id name and '#' is compulsory add before id name.

Also, apply the style of CSS by the target to the class, but you need to put** '.' (dot) **before the class name.

And you can also direct target **HTML tags **like p, div, h1 etc. In this case, no need to put any symbols.

Within** {}** (brackets), you can able to add any of the CSS style properties. Like; color, back-ground-color, etc.

#first{ color: orange; } .common{ color: green; } p{ color: blue; }

2. Combine Name:-

Combine the Name of Class, id, and HTML tags using the below signs:-

1. " " 2. > 3. + 4. ~

Space is used to separate two classes, class and HTML tags, class and ID etc.

/* All HTML tags p within common3 class will be affected by color property */ .common3 p { color:cyan; }

/* common class within common3 class will be affected by color property */ .common3 common{ color:red; }

/* ID Name => name within common3 class will be affected by color property */ .common3 name{ color : blue; }

where, common3 & common => class Name p => HTML tag name => ID

'>' is used to apply all CSS properties for the child (HTML Tag, class).

/* All the div (HTML Tag) which are present immediately within the common class will be affected by color property */

.common>p { color: blue; }

Hello CSS

/* only this will be affected. (apply Immediately) */

Hello everyone

/* Not affected. (not Immediate available) */

'+' is used to apply all CSS Properties for immediate sibling (HTML Tag, class).

.common+div { background-color: blue-violet; }

Drashti Jethva

/This div is only affected by CSS Property. (Immediate)/

Sonal Jethva

/This div is not affected by CSS Property. (Not Immediate)/

Sudhir Jethva

**'~' **is used to apply all CSS Properties for all siblings (HTML tags, class).

.common~div { background-color: blue; }

Drashti Jethva

/* Below all div will be affected by CSS Properties. */

Sonal Jethva

Sudhir Jethva

3. Attribute Name:-

All the Properties of HTML Tags are called Attributes. EX., class, for, id, color, etc.

label[for="name"] { color: blue; font-style: italic; }

Name /*only this will be affected */

Email /*this will not be affected */

ol li[id="react"] { color: crimson; }

1. HTML

2. CSS

3. Javascript

4. ReactJS

5. /Only this will be affected/

For more blog like above to revise web development topics subscribe my newsletter.