Setting up a website and giving it a unique look can seem to be an overwhelming task. With new content being continually added to most sites, that look has to remain the same for every new page created. At first glance, this requires re-entering the code that creates the site’s style for every new page, an impossible task.
Enter Cascading Style Sheets, also known as CSS.
CSS allows web programmers to easily manage a site’s overall style by placing that code in a separate document. Each page in the site refers back to the CSS when loading so the page’s style matches the rest of the site. This saves hours of work for the programmer, speeds up page loading times, and reduces total storage requirements by cutting down on code.
Many style elements such as text size and font are already specified within the base programming of HTML. This base program has been maintained and updated since October 1994 by the World Wide Web Consortium, also known as WWWC or W3C.
Style sheets have been used in one form or another since the 1980s, but the initial version of CSS was proposed shortly after the creation of the W3C and implemented in 1996. However, it was not widely supported until around 2000 with the released of Internet Explorer 5. Since that time, CSS have become a standard part of any site and used almost worldwide.
By default, HTML recognizes the difference between different sections of text or types of media present on a page. When creating a page, the different elements on the page are marked with selectors that determine their style. What you’re reading right now is actually marked by the body selector.
Text can be modified within the actual content using angle brackets. Some tags are simple to use, like using b in brackets to make a section of text bold. Other tags are more complex, like using a tag to specify the color or font of a selected range of text. Using these tags for every page in a site adds a lot of extra code, and therefore a lot of extra work for the devices involved.
Say, for example, you want your site to have larger text than normal. You could mark every single piece of text on the site with < font size=”13″ > with each page’s text here < /font >.
The text would then look like this for each page you remembered to tag.
This may seem small, but imagine having to use that tag for every single page, and to add new tags to every single page every time you wanted to change your site’s look. That adds up, slowing down the servers and eating up storage space, not to mention turning every small change to the site into a large development project.
CSS allows web developers to modify existing selectors or create new ones. The font, text size, text color, or any number of other properties for every page that uses a selector can be modified at once by modifying the selector itself in the CSS. Instead of tagging every page that already exists as well as adding the tag every time you make a new page, just go into the CSS and add this code:
body {
font-size: 13px;
}
Now all the text on the site that uses the body selector will be the same size it would have been if it was tagged, but only a few words had to be entered and as little code as possible has been added to the site.
While this example focused on text, which is simple to understand and modify, CSS can be used to modify almost any form of media including tables, photos, or embedded video. The size of an element, the borders between table cells or around and element, and even the resolution can be modified using a CSS and applicable selectors. HTML tags can also be modified and custom tags can be created with a CSS for style changes that aren’t universally applied to the site. However, the tag names should be chosen very carefully so as not to overlap with any future standard tags that could be created.
Skilled users with special needs or that wish to view pages with their own custom style can also create a custom CSS that is then applied to any page they visit. This is most commonly used to convert sites into alternate format that are easier to use for those with sight or hearing problems.
Any developer setting up their own site needs to understand and utilize this powerful tool to streamline their website and create its style. Hopefully now you understand why.