Adding some style

1

Let's get back to the lesson “HTML document” and see how our last example look in a web browser:

Pure HTML

As you can see, it looks absolutely boring. Like if we've got back to 1990s. To make it look better we need to customize it. Customize everything: the font family, its weight and style, a text and background colors, margins, sizes, etc.

Previously you have learned HTML attributes, like href of a element or src of img. There are a lot of other attributes which allow you to customize HTML elements appearance. However you should consider them as a legacy. This is an old-fashion way of styling. We won't use HTML attributes to do styling, we will use CSS instead.

There are two ways of adding CSS styles into your web page: inline and external. We'll start with inline.

<!DOCTYPE html>
<html>
    <head>
        <!-- Here goes the stylesheet -->
        <style type="text/css">
            body
            {
                background-color: #00203fff;
                color: #adefd1ff;
                font-family: "Ubuntu";
                font-size: 20px;
                margin: 1em;
            }

            h1
            {
                font-weight: normal;
            }

            a
            {
                color: #ffffff;
            }

            img
            {
                border-radius: 1em;
            }
        </style>

        <title>My First Web Page</title>
    </head>
    <body>
        <h1>My first big web page</h1>
        <p>
            Hello there. My name is Sam and I'm a junior web developer
        </p>
        <p>
            One day I will get rich and buy
            <a href="https://www.bugatti.com/one-off/centodieci/">this</a> car:
        </p>
        <p>
            <img src="https://img1.stcrm.it/images/19846680/HOR_STD/400x/bugatti-centodieci-5.jpg" />
        </p>
    </body>
</html>

HTML and CSS

Ah, much cooler! I believe that you've already understood how style properties are configured there just by looking at their names and values. CSS itself is very easy, you can learn all of the properties and their possible values very quickly. However you need a deeper understanding of HTML layouting principles to learn how to apply CSS styles to get a desireable result. We will start digging into that direction in the next lesson.

Share this page:

Learning plan

What you're going to deal with
HTML elements and the basic document structure
There are a couple of SEO tips you should learn about right away
4. Adding some style
Pure HTML is boring, so let's add some styles

Cross related lessons

Embedding PHP script into HTML — Lesson 2