CSS Intro, Part 1
CSS can be ‘called’ in several ways, from within whatever markup language you happen to be using (that’s what we feel compelled to say…even though it will be HTML 99.99% of the time).
In-line CSS is written right along with the HTML code using the “style” attribute:
<p style=”color:blue”>Everything in this paragraph is blue!</p>
However, that often defeats most of the advantages of CSS. A more useful method would be to embed the style under the HTML “head” tag, so that it covers the entire page:
<head>
<style type=”text/css”>
p {color:blue}
</style>
This will ensure that every paragraph on the page shows up in blue. Nice shortcut, but there’s an even better method: externally, using a CSS file.
If you save your CSS statements to a file with the extension “.css”, you may call it using the HTML link tag:
<link rel=”stylesheet” type=”text/css” href=”example.css” />
In this case, our CSS information is self-contained in the “example.css” file, which may be used for any number of pages or projects…and updated independently, resulting in automatic changes to all the pages that link to it!
As you can see, CSS is quite easy to understand and recognize. A typical CSS statement, such as those above, consist of the “selector” (frequently the HTML element that is being defined or changed) and the “declarations” (the changes themselves). Each selector consists of a property and a value.
So, a basic CSS statement that looks like this:
p {color:red}
is not radically different from the same statement in HTML:
<p color=”red” >
However (and this is a big however), with CSS (embedded or external) you could replace the HTML statement with simply “<p>” and the CSS would be applied without any further work. Every time.
Instead of a page bristling with markup and content, you now have a streamlined page with minimal markup that can be changed at a moment’s notice simply by updating the CSS.
And that’s just the beginning…
Streamline your move with Oasis Moving and Storage.