Good looking web page is important right? People browsing the world wide web want to look at something beautiful and have positive experience, not look at some shitty crap. While the loading speed of your page might be important factor for page’s success, only few visitors have timer with them while they browse. If your page is not tragically slow, then the visual side is the most important thing of your work.
The History
The reason for creating Cascading Style Sheets to have a consistent approach to providing style information for web documents. The CSS first appeared on paper in 1995, but the final version CSS as a standalone language was introduced in the end of 1996. In the next year, the ERB (HTML Editorial Review Board) was split into three working groups – HTML Working group, DOM Working group and CSS Working group. After this, CSS started to live it’s own life. The newest version is CSS3 (because of it’s division into modules, don’t expect any CSS4 in the future).
Types of CSS
We have three basic types of CSS – inline, internal and external.
Inline styles are created by using the style attribute in your HTML elements (file with html suffix). Put every style property and value that you want to apply to individual element into quotes (single or double) ending every pair with semicolon. If you want to use more styles, just add them after the inside the quotes.
20px; height: 20px; color: #eee;">......
Internal styles are little bitdifferent than inline in the way theyare positioned. Theyare written inside the section of the page inside the opening and closing
<head>
<style>
body {
background: white;
color: red;
font: 1em normal Helvetica, sans-serif;
}
</style>
<head>
External styles are even more different. As the names suggests, their are placed inside external files called stylesheets. These files have a “css” suffix so, from now, you will recognize them anytime. The code looks exactly the same as in case of internal styles – element name followed by curly brackets and inside those brackets are declared individual property/value pairs. The only different is that they are written in external file instead of section. These files are then included into page using tag – by writing following code inside the section:
css" href="stylesheet.css">
- “rel” attribute tells browser to use this document in what relationship the document is.
-
“type” says what type of document it is (this can be omitted).
-
“href” specifies the URL of the page the link goes to (where the document is located)
It depends on you which one you choose to go with but, without any doubt, the best option is to go with external. It’s better for readability of your code and makes it easier for you to change anything in future. External stylesheets are preferred by most of people in web industry.
So, that’s a shorter introduction to stylesheets. One advice for closing this article: “Pay attention to typos while declaring your CSS property/value pairs”.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
