Lesson 6 - Introduction to CSS (Cascading Style Sheets)

HTML and CSS First website Introduction to CSS (Cascading Style Sheets)

In the previous lesson, Lists in HTML and a table example, we learned how to use tables and lists. We've avoided any sort of styling in the course so far, so we'll make it up to you. Today, we're going to introduce CSS to you and show you what it looks like. In order to understand the main ideas behind the CSS language, we'll take peek into the history of the Internet and the HTML language.

History of the HTML language

Long story short, the first internet was called the Arpanet and was made in the 60s as a U.S. Army project during the Cold War. Some time passed and it was released publicly. Which is when universities and research institutes started joining it. It didn't look anything like it does now. Mainly because the only type of file that they could share through it back then were text files.

In the 90's at CERN, a European lab institute, the HTML language was born together along with the WWW standard. In other words, the web as we know it. HTML was initially developed so that documents would be able to be shared in the institute. The language, specifically, was designed to distinguish different parts of a document from ordinary text (titles, lists, tables, etc.) and to **link* documents together using hypertext. The first web browsers appeared around that era.

As the web started to spread among people, HTML added more and more new tags. Unfortunately, both meaning assignment tags and styling elements were added, which made things confusing. Browsers fought over the number of supported tags and produced more, and more markup. The problem was that at that point, HTML about 60% of garbage. Whose use was mainly to change text colors, title alignments, and fonts. This sort of a problem wasn't resolved until the 4th version of HTML, where styling directly in HTML was deprecated.

The deterrent example

Have a look, at what an outdated HTML 3 document would look like (all I'm displaying is the body part of the document). The author was styled it using deprecated HTML attributes.

<body bgcolor="#0395c3" text="white">
        <h1 align="center"><font color="#0a294b">Website in HTML 3</font></h1>
        <p>If I want every heading dark blue and centered, I'd have to set it again and again to every one of the headings. My code is full of deprecated align attributes and deprecated font tags.</p>

        <h2 align="center"><font color="#0a294b">Another heading</font></h2>
        <p>I have to specify that I want the heading centered and dark blue again. I'm already lost in the code at this point.</p>

        <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" bordercolor="#0a294b">
                <tr><td valign="top" align="center"><font color="#0a294b">This table</font></td><td valign="top" align="center"><font color="#0a294b">has</font></td></tr>
                <tr><td valign="top" align="center"><font color="#0a294b">too many</font></td><td valign="top" align="center"><font color="#0a294b">unnecessary attributes.</font></td></tr>
        </table>

        <br />

        <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" text="white" bordercolor="#0a294b">
                <tr><td valign="top" align="center"><font color="#0a294b">This table is styled</font></td><td valign="top" align="center"><font color="#0a294b">exactly the same</font></td></tr>
                <tr><td valign="top" align="center"><font color="#0a294b">as the one above, but still</font></td><td valign="top" align="center"><font color="#0a294b">I have to write the styles all over again.</font></td></tr>
        </table>
        <h2 align="center"><font color="#0a294b">The sad part is</font></h2>

        <p>that many online tutorials will still teach you to code websites this way.</p>
        <p align="center"><img src="images/sad.png" alt="Sad" /></p>

        <p align="center"><font size="4" color="#0a294b" face="arial">That's why I use ICT.social where they teach how to make modern websites.</font></p>

        <p align="center"><font size="4" color="#0a294b" face="arial">This paragraph is dark blue and centered just like the one above, but I still have to write it again.</font></p>
</body>

The website would then look like this:

Deterrent example of a web without CSS

Notice the amount of code that is actual content versus the amount of garbage being used to style it. Styles, here, are also very redundant. There are dozens of disadvantages. Including low readability, the amount of code is several times more than needed, it takes longer to load, the meaning of elements is suppressed (which is the main purpose of the HTML language).

Another major disadvantage to styling this way is that the amount of tags here confuse search engines (Google, Bing, and so on) and which leads to them categorizing your websites incorrectly. Imagine making a website with 50 subpages and styling it like they did back then. After going through and making all of the subpages, you realize that you don't want the tables to be blue with blue text and that you want them green with dark green text. What now? Oh yeah, you would have to **rewrite hundreds of tags* just to change their color. I hope you now get why things had to be changed. Thus, the CSS language was created.

CSS

CSS (Cascading Style Sheets) is a language designed and made specifically for styling HTML. We say it cascades because it applies the principle of inheritance between styles. So that if we set a red font to a table cell, the color would also be set to every other paragraph inside the cell. This way, we could change the color of the paragraphs afterward as well by changing a single line of code. Probably, the best thing is about CSS is that the same style can be applied to hundreds of pages and the results would be identical in every single one. All of the stylings for HTML documents is now in CSS, which makes the code look cleaner, more readable and less redundant.

We took our time to make sure you understand why using CSS is necessary and that styling doesn't belong in HTML. I write these lessons in a way that will show you why the modern approach is clearer and more efficient. Not to show you how websites were made decades ago.

Here's what the same document would look like using CSS:

<body>
        <h1>Website using CSS</h1>
        <p>If I want every headline dark blue and centered, all I would have to do it define it as such in CSS. My HTML code is clear and the style is specified only once and applies for every heading.</p>

        <h2>Another heading</h2>
        <p>The heading above is styled because the style was declared on every heading in CSS. </p>

        <table>
                <tr>
                        <td>This table</td>
                        <td>only contains</td>
                </tr>
                <tr>
                        <td>a table definition</td>
                        <td>and text.</td>
                </tr>
        </table>

        <br />

        <table>
                <tr>
                        <td>This table is</td>
                        <td>styled exactly</td>
                </tr>
                <tr>
                        <td>as the one above</td>
                        <td>because they share the same style.</td>
                </tr>
        </table>

        <h2>It's a good thing that</h2>

        <p>you're reading this, so you know how to do the right way.</p>
        <p class="center"><img src="images/happy.png" alt="Happy" /></p>

        <p class="big">On ICT.social, you will learn how to make modern, elegant websites.</p>

        <p class="big">This paragraph uses style with a bigger text which is only had to be defined once in CSS.</p>
</body>

The result:

Web with CSS

Quite a difference, right? Take another look at both of the code examples. Notice how the class attributes in the second example assign elements a style based on how it is defined in an external CSS file.

Now you may be asking yourself, what does this magical CSS file that styles our HTML, look like? Click on the link to the next lesson, Basic CSS selectors and properties, and find out! :)


 

 

Article has been written for you by David Capka
Avatar
Do you like this article?
3 votes
The author is a programmer, who likes web technologies and being the lead/chief article writer at ICT.social. He shares his knowledge with the community and is always looking to improve. He believes that anyone can do what they set their mind to.
Unicorn College The author learned IT at the Unicorn College - a prestigious college providing education on IT and economics.
Activities (8)

 

 

Comments

To maintain the quality of discussion, we only allow registered members to comment. Sign in. If you're new, Sign up, it's free.

No one has commented yet - be the first!