Part 2.2Using CSS
CSS can be given to a HTML file as one of three types, inlined, internal and external.
Both inlined and internal CSS are loaded with the HTML page because they are included within it whereas external CSS needs to be loaded from a different URL, causing another HTTP request for the browser.
Each of these definitions of CSS are defined differently within the HTML file however.
Internal CSS is defined within the HTML file
tag opens up an internal CSS block. This
then allows any CSS to be included within that file that affects only that page.
<!DOCTYPE html> <html dir="ltr"> <head> <style type="text/css"> </style> </head> <body> </body> </html>
element is given the CSS.
Internal CSS is not a particularly useful way of avoiding repetition across a website as it cannot be cachedCacheCached files are retained on the system temporarily, resulting in a faster loading time.
Inlined CSS is used to define something about a singular element.
For instance, back in the day HTML used to define how a piece of
text would look to the extent that it would surround the text with a
tag. With CSS this is done with inline CSS. The
big drawback with inlined CSS is that it also cannot be cached.
The following is an example of inlined CSS:
<p style="">Styled paragraph</p>
attribute is given the CSS.
External CSS refers to CSS that is not in anyway defined within the file and that all the style pointers are defined within a seperate file. This brings the benefit of faster loading due to the fact that the CSS file can be cached.
External CSS needs to be combined as much as possible - it is simply not good enough to have three or four stylesheets that are then requested by the client (browsers can only request up to around 90 files in a single cycle).
External CSS is designed for site-wide themes. This site for instance uses a single CSS file that contains all the information about styling the site. At the time of writing this article, the CSS used with this site is around 3,700 lines long, this would be terribly slow if it were not for being able to cache this file.
External CSS is defined as part of the
but using a
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="link_to_stylesheet"> </head> <body> </body> </html>
Try building a simple HTML page and adding all three types of CSS to it.