CSS

CSS is an acronym for Cascading Style Sheet. It is a standard style sheet language that helps you to define the formatting and layout of web pages.

Before the development of CSS, the developers had to enclose all the presentational properties of HTML documents in HTML markup tags. For example: Alignment, background styles and colors, fonts, borders, and much more. 

All the styling information had to be included on every website page. This made the development process long and costly.

The World Wide Web Consortium (W3C) launched CSS in 1996 to overcome all the troubles. CSS was developed to distinguish between content and presentation. It allows the designers to include all the formatting information in a separate stylesheet that boosts maintainability and organized HTML markup.

CSS3 is the latest version of CSS and contains advanced styling capabilities that help you amplify your website appearance.

How is CSS helpful?

• Helps you apply the same formatting rules on different elements
• Display the same page in different ways on different screens
• Manage the presentation of numerous web pages through a single style sheet
• Modify the position of the web page element without making changes in the markup
• Change the presentation of current HTML elements
• Design print-friendly versions of web pages
• Create animations and transition
• Perform transformations such as rotating, skewing, and scaling (2D/3D)
• Format dynamic states of elements such as focus and hover  the

Benefits of Using CSS

Once you write CSS code, you can apply the same code to HTML elements. This gives you ultimate flexibility and saves time.

CSS offers you rich presentation capabilities to manage the layout of web pages.  

You can easily maintain the CSS files consistently as you can manage the styling rules from a single destination. Also this reduces the replication of structural contents, which reduces the file size and ensures quick loading of web pages.

CSS helps you optimize web pages for all types of devices such as mobile phones, desktops, and laptops.

Example

body {
background-color: yellow;
}
h1 {
color: red;
text-align: right;
}
h2 {
font-family: verdana;
font-size: 14px;
}