HTML has its limitations when it comes to layout. Sure, you have 6 different levels of headings. You also have tables to display tabular data, and tags for defining lists, etc. These are good enough to get a reasonable looking document that shows the true structure of information.
However, it's not the purpose of HTML to specify the styles of an HTML document. HTML is specifically concerned with document structure and the meaning of the elements on the page. This is particularly true with the introduction of HTML5.
It is the job of CSS to define the styles of the HTML document. So with CSS you have much better control over the layout of your web pages. You can specify exactly how big a font will be, exactly where an element will be on a page, what the page will look like when printed, and much more.
CSS can also save you a lot of time, particularly when maintaining a large site. In particular, by using external style sheets you can update the styles across a whole website by updating a single document.
Advantages of CSS
- CSS saves time
- With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
- Pages load faster
- Less code means faster download times.
- Easy maintenance
- To change the style of an element looks across the whole site, you only have to make an edit in one place.
- Superior styles to HTML
- CSS was built for styles. HTML was not. While browsers usually display HTML elements in a certain way, you can override this with CSS.
Disadvantages of CSS
- Browser compatibility
- Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features
are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary properties.
Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.