CSS - Introduction and How it works

CSS stands for Cascading Style Sheet which is used to style HTML elements.
While loading any webpage browser simply create DOM of requested web page and renders the HTML. CSS is basically a better way of managing HTML attributes

style

of any element.

To add style we simply use

Style

attribute to add color, effect, transition or any other things. Like following

See the Pen jLmEx by ianoop (\@ianoop) on CodePen

Now using CSS

See the Pen ICDxa by ianoop (\@ianoop) on CodePen

A CSS  which is used to style a element is called as CSS Class or simply Class associated with element.

Now,  why to use CSS:

• CSS are stored in separate file which contains all the classes to be applied on element
• Easy to manage and avoid duplication. In a website if you want to make all the links to get into red color on hover you can simply just add a particular class and you are done.
• You can use same HTML code to different place with different style by just editing small fragment of CSS class

Different ways of using CSS:

(click on result tab and hover mouse on link)

- #### Using class attribute in element.

See the Pen Ikupj by ianoop (\@ianoop) on CodePen

- #### Element ID specific css

See the Pen HtmGa by ianoop (\@ianoop) on CodePen

- #### Directly using HTML tag as css class

See the Pen AdCnL by ianoop (\@ianoop) on CodePen