Cascading Style Sheets (CSS) styles HTML elements with greater control than just using HTML. On the left of the image, Facebook appears as it currently exists; on the right, however, the same Facebook page is shown without all the CSS styling. Without the CSS, all the images and text appear left-justified, borders and shading disappear, and text has minimal formatting.
CSS can style almost any HTML tag that creates a visible element on the page, including all the HTML tags used to create headings, paragraphs, links, images, lists, and tables t. Specifically, CSS allows you to style:
Text size, color, style, typeface, and alignment
Link color and style
Image size and alignment
List bullet styles and indentation
Table size, shading, borders, and alignment
CSS styles and positions the HTML elements that appear on a web page. However, some HTML elements (such as, for example, ) are not visible on the page and are not styled using CSS.
You may wonder why creating a separate language like CSS to handle styling was considered a better approach than expanding the capabilities of HTML. There are three reasons:
History: CSS was created four years after HTML as an experiment to see whether developers and consumers wanted extra styling effects. At the time, it was unclear whether CSS would be useful, and only some major browsers supported it. As a result, CSS was created separately from HTML to allow developers to build sites using just HTML.
Code management: Initially, some CSS functionality overlapped with existing HTML functionality. However, specifying styling effects in HTML results in cluttered and messy code. For example, specifying a particular font typeface in HTML requires that you include the font typeface attribute in every paragraph (
) tag.
Styling a single paragraph this way is easy, but applying the font to a series of paragraphs (or an entire page or website) quickly becomes tedious. By contrast, CSS requires the typeface to be specified only once, and it automatically applies to all paragraphs.
This feature makes it easier for developers to write and maintain code. In addition, separating the styling of the content from the actual content itself has allowed search engines and other automated website agents to more easily process the content on web pages.
Inertia: Currently millions of web pages use HTML and CSS separately, and every day that number grows. CSS started as a separate language, and it remains a separate language because its popularity continues to grow.