6. Getting started with CSS

September 18, 2018


What is CSS?


CSS is an abbreviation of “Cascading Style Sheets”. CSS is used to add beauty to the content, that is in HTML. So let’s break down the name itself:

Sheets – Means that it is a file, that holds only CSS code. Nothing else. Just a sheet of CSS.

Style – We’ve already dealt with Style previously. It is how HTML content is displayed. The layout, the sizes, colors and etc.

Cascading – A confusing word at first, but it only means that something is moving forward. Imagine a river, flowing forward from one end to the other, the same applies for CSS files. The stuff you write at the very top of the file can be changed further down. We will look at how it works later.

Inline styles are bad


Writing styles in HTML is bad. Very bad.

“So why did you tell me to do it man?”

Because in the start you get practical, you get it working, later you optimize it. This is how most of stuff is learned and I find it fitting for my series aswell. This also helps to show how important is optimized code. Never write styles in HTML.

The “Why”?


Imagine you have 25 web pages in your website. 5 pages in 5 languages, for example. All of them have inline styles.

Now imagine you want to make the first word of every paragraph in bold. You would have to make atleast 25 changes. Instead of that tedious work, you can do it only once. With the power of CSS.

The “How”?


Create a new file, call it “styles.css” (short for for style sheet), the same way you created “index.html”. Notice, how the icon changed, since we’re about to work in a different programming language.

So far we have added code, that immediately becomes visible in your browser. It is time we now  start learning about code, that works “behind the scenes”.

Separation of concerns


Separation of Concerns is a principle, that even though you can mix and match different languages in one file, you avoid it. Because it makes it messy and very troublesome to maintain. In the beginning, what we did, we wrote CSS inside an “.html” file. (Yes, you already are writing in two languages! Awesome! You now have the rights to treat yourself.)

This, as already stated, will be annoying to maintain, even if it’s a simple change.

Delete all of the inline style tags and their properties. Your code should now look like this:

<html>

<div>
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div>
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div>
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

As you see, HTML should only hold content. Not tell it, how it should look. 

“But how can I make it pretty again?”

You will write the same properties, but this time in the .css file you just created.

“But how will the .html file see the .css file? Is it automatic?”

No, you will tell the .html file to look at .css file and read what’s inside, by linking it in what is called the “head” of the document.

Where is your <head> at?


What is the “head”? Where is it and why do you need it? Add this between the opening html tag and the first element:

<head>

</head>

So now it should be like this:

<html>

<head>
    
</head>

<div>
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div>
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div>
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

The <head> element takes care of all the code that is not visible, also called “rendered” on the page itself. It takes care of linking documents together, for example linking your current webpage to a CSS file, or a Cascading Style Sheet, that will determine how your website looks visually.

So how do you link a cascading stylesheet in your HTML?


What you want to create, is a link.

“Wait what? I made a few in a previous blog post.”

Yep, same linking, but with a different element. Add this directly into the <head> of your document:

<link rel="stylesheet" href="styles.css">

Let’s break it down:

rel=”stylesheet”

This is how you define the relationship of the both files, you specify that the file this link links to is to be treated as a stylesheet.

href=”styles.css”

This is the actual path to the file. Since it is in the same folder as the index.html, then just the name and extension will be enough. Let’s be even more professional and create a new folder in this folder, called “css” and throw that .css file in. After that, change the link appropriately, to this:

<link rel="stylesheet" href="css/styles.css">

Writing CSS


“Previously we wrote CSS in an opening HTML tag, how do we write it if there is no tag??”

We will make use of something called CSS classes. We will do all of the style definitions only in .css files from now on.

What are CSS classes?


CSS classes are written in both files. In the .html file you will mark an html element with a class. In the .css file you will explain, how the class looks. The value is that you can add the class to any elements you like and just change the code in the .css file to see the changes get applied to all of the elements at once. This is the power of CSS classes. Let’s check it out!

Within your .html file, change it so it looks like this:

<html>

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<div class="page-wrapper">
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div>
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div>
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

As you’ve noticed i’ve added the following to our most outer div tag, that contains all of the page elements within it and named “page-wrapper”, because it wraps around all of our page content. Cool! It’s that easy! Now let’s go to the .css file and add this:

.page-wrapper {
    margin-left: 25%;
}

This is literally the only text in your .css file. It is really self-explanatory, you just have to get used to the syntax. One thing that deserves your attention, is that class declarations in .css files start with a dot (“.”) and hold the properties withing squiggly brackets (“{ }”).

Let’s add a few more:

<html>

<head>
    <link rel="stylesheet" href="css/styles.css">
</head>

<div class="page-wrapper">
    <div>
        <h1>My Blog</h1>
        <p>My first blog template, learning how HTML layouts work!</p>
    </div>

    <div class="post-wrapper">
        <h2>About HTML Blog layout</h2>
        <p>September 2, 2018 by Me</p>

        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.
            Nunc sollicitudin sit amet enim quis tempus. Nunc vitae sapien aliquet, convallis est in, tempor mi. In in
            risus molestie, consequat sem id, dictum eros. Nullam vestibulum diam vitae libero aliquet, sit amet
            laoreet magna elementum.

            Aliquam a aliquet nunc, a sagittis massa. Vivamus lacinia mattis libero, ut rhoncus lorem lacinia ac.
            Nullam ullamcorper maximus leo, ut volutpat felis rhoncus nec. Vestibulum gravida leo erat, sit amet
            tincidunt ante facilisis a. Sed consectetur tellus id tempus posuere. Aliquam sollicitudin quam non erat
            malesuada mollis. Suspendisse gravida mollis ex eget ornare. Quisque luctus, diam non condimentum
            vestibulum, ipsum nisi placerat sem, gravida rutrum lorem leo eget leo. Integer id nulla sem.
        </p>
    </div>

    <div class="sidebar-wrapper">
        <h3>About</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis accumsan eros, in dignissim tortor
            venenatis at. Duis nec malesuada odio. Mauris nulla lectus, dictum at dictum nec, tincidunt vitae lacus.</p>

        <h3>Archives</h3>
        <ul>
            <li>September 2018</li>
            <li>August 2018</li>
            <li>July 2018</li>
            <li>June 2018</li>
            <li>May 2018</li>
        </ul>
    </div>
</div>

</html>

Add the following to your css file:

.post-wrapper {
    width: 40%; 
    display: inline-block;
}

.sidebar-wrapper {
    width: 20%; 
    display: inline-block;
}

So your .css file now looks like this:

.page-wrapper {
    margin-left: 25%;
}

.post-wrapper {
    width: 40%; 
    display: inline-block;
}

.sidebar-wrapper {
    width: 20%; 
    display: inline-block;
}

Open your page and it should look just like before. But now your .html file is clean and tidy and no matter how many pages the classes will be added to, you will only make CSS changes in the .css file.


BasicsBlogCSSDevelopmentGetting StartedHTMLKnowledgeLayoutLearnProgrammingStructureVisual Studio Code