CSS Introduction


CSS (Cascading Style Sheets) is designed as a manageable, simple language which is purposeful in making the web pages look presentable.

  • CSS allows your web pages to look attractive by adding various styles to it.
  • CSS enables you to do this independent of the HTML that makes up each web page.
  • It is very efficient, user friendly and easy to be understood by the user.
  • It is used for describing the presentation of a document written in a markup language such as HTML.


Why CSS?


  • CSS is easier to maintain and renovate.
  • It has variety of styles and formatting options.
  • It can be accessed easily and has lightweight code.
  • A complete website can get a new look just by making changes to a single file
  • A CSS file can be 500 lines long!

Example:


body {
  background-color: white;
  text-align:center;
}
h1 {
  color:blue;
}
h2 {
  font-family:"Arial";
}
img {
  width:50%;
}

Live Demo!


Styling with CSS is fun!


While designing with CSS you don’t have to specify a design every time you create a component. You can just set up a particular component style and it’s done!
Let's say we want to change the color of paragraph text, and also need to increase the font size, the CSS code for this will be :



p {
  font-size:16px;
  color:red;
}

Live Demo!

Now, whenever the browser manifests a paragraph, the paragraph text will display the paragraph text in font size of '16px' & color 'red' EFFORTLESS!