Project #2 - About Me Styling

Previously, after learning some HTML, we made a full ‘About Me’ page based on what we had learnt; now you know some CSS perhaps we should take a look at styling that page based on the CSS properties you now know.

Sounds great!

In this tutorial, we will be adding CSS to the ‘About Me’ page we made in the previous project (Project #1). So we recommended following that tutorial before reading this page by patting this link.

So there is a big decision we need to make before we can start.

I know what it is.

It’s ok, you can say it. I’m excited about this bit too.

Excited? What do you think the decision is?

Just how big we make the massive picture of me?

It’s what the people want.

They don’t read this for your bad jokes.

What I was referring to is the fact we need to decide where our CSS is going to go.

Step 1 - Placing Your CSS

Remember, you could write your CSS as in-line CSS, internal CSS or external CSS. If you can’t remember the difference, here is a quick reminder:

  • With in-line CSS, code is added to each HTML element’s code. But it makes the code difficult to read and no CSS can be reused.

  • With internal CSS, code goes at the beginning of our HTML file. Code can be reused within the file but not across multiple web pages.

  • With external CSS, all CSS is saved in a separate file. Your CSS can be reused across multiple web pages.

As Aria has only made one HTML file for one web page, let’s use internal CSS. So her first step is to add the style tag to her HTML to make some space for her CSS code. Here is what that looks like:

        <head>
        </head>
        <style>
        
        
        </style>
        <body>
        
        
        </body>

All Aria’s HTML from when she made the ‘About Me’ page is within the body tag. All Aria’s HTML from when she made the ‘About Me’ page is within the body tag.

Step 2 - Styling The Title

So how do you want your title to look?

Well it should definitely be bigger.

Good idea.

It is a title so should be large and clear to let your users know what the page is about.

Actually I wanted it bigger because it says my name.

I should have known.

Also it should be in the middle of the page.

Front and center of attention.

Like I should be.

Based on the HTML given below, use the boxes to change the CSS and make Aria’s title bigger and central.

        
      
        #aria-page-title { 
        
        
        }

All About Aria

Notice how I have added an id to your title so the browser knows which HTML element to apply the CSS to. Here is Aria’s CSS code for her page title.

        #aria-page-title {
          text-align: center;
          font-size: 5em;
        }

Step 3 - Styling The Text

Now that the title is sorted, we have look at how Aria’s introductory paragraph should look.

This is vital information about me and my toilet habits.

I think this should be bigger.

I’m glad that present you left me on the living room floor wasn’t bigger.

Just in case Aria wants to add more description about herself, which let’s face it, is likely, I have given this paragraph a class in HTML. With this HTML, use the box below to change the CSS to make Aria’s introductory paragraph bigger.

        
      
        .aria-page-text { 
          
        }

My name is Aria and I am several years old.

Here is the finished code for Aria’s paragraph.

        .aria-page-text {
          font-size: 1.5em;
        }

Step 4 - Styling A Picture

An alternative title could have been: Trying to stop Aria’s selfie taking up the whole page.

Look, I know what you’re going to say, but your photo shouldn’t take up the whole page.

Partly because it’s very tall so will look odd on laptop screens.

That’s a sensible point, housemate.

Let’s not get too silly.

Did you just call me your housemate?

Let's move on.

I'd like my image to be a good size, but also the center of attention.

So Aria would like her photo to be in the center of her page but also to be quite large. To do this, we are going to have to combine several CSS statements.

We will have to use width and height to set the size of the photo and to maintain the aspect ratio but we also need to use margins so the picture sits in the middle of the page.

The picture Aria as chosen is quite tall, so if we used a width of 50% the image would be too big for the page.

I disagree.

In this case, Aria is wrong. With width set to 50%, the image would be too tall for a laptop screen and you wouldn’t see all of it. Instead 20% seems much more reasonable.

In order to maintain the aspect ratio, we should set the height to be automatically chosen by the browser. Here is our code so far.

        width: 20%;
        height: auto;

Now we need to work out the margins so the image sits in the middle of the page.

Well, we know 100% is the width of the whole screen and we have set the selfie to be as wide as 20% of the screen. Subtracting 20% from 100% leaves us with 80% to play with. For the image to be central, the space on each side needs to be the same; so we divide this 80% by 2 to get our margins of 40% either side.

        margin-left: 40%;
        margin-right: 40%;

As no margin is needed top or bottom we can write this CSS like this:

        margin: 0 40% 0 40%;

Or even, simply:

        margin: 0 40%;

Now we have our code, lets assign an id to Aria’s selfie so the computer knows which element to apply our CSS to. An id of ‘aria-selfie-img’ seems appropriate which means our CSS for the photo is:

        #aria-selfie-img {
          width: 20%;
          height: auto;
          margin: 0 40%;
        }

Don’t forget to add the id to your HTML!

Step 5 - Styling The List

Working our way down, now we are at the part of the page where Aria has her list of facts. It would make sense to style the text here in a similar way to her introductory text at the beginning of the page.

So there is two options: Give each list item a class and then copy the CSS or change our previous CSS to cover the list.

While the first option would work just fine, it gives us problems later on if there is more text to style or if we want to add more words to our page with HTML.

The second option is actually the easiest and best for the future so let’s do that.

So did we make a mistake before?

Not really.

With making a website or any form of engineering you often discover as you progress that there is a better way of doing things.

The trick is knowing when to go back and make the required changes and when to carry on.

Previously our code was:

        .aria-page-text {
          font-size: 1.5em;
        }

This CSS only applies to elements with the ‘.aria-page-text’ class, so let’s change this code so it applies to all paragraph elements and everything in the list. Can you remember how to do that?

We want the CSS to style all p tags, while are my favourite, and every list item.

So I think it looks like this:

        p, li {
          font-size: 1.5em;
        }

Perfect!

You do listen!

Now all paragraph elements and every item in Aria’s list will have this font size. And any other paragraph elements will use this too.

Step 6 - Styling The Quote

The final part of the page is Aria’s favourite, and very appropriate, quote about cats.

As this is the last part of the page, I think it would look nice if it was in the center.

Oh! Also, I want the quote to be in italics and bold, so it really stands out.

It’s an important quote.

It speaks to me.

So Aria wants both elements to be centered and one of them to be in italics and bold. As there is some overlap, we can be clever about our classes to minimise our CSS.

Remember, HTML elements can have more than one class and we are going to use that on Aria’s page.

As both elements need to be centered, let’s make and apply a class to center both parts of this quote. It might look something like this:

        .aria-quote {
          text-align: center;
        }

Then we can give both elements this class and both will be centered.

        <p class="aria-quote" >In ancient times cats were worshiped as gods; they have not forgotten this.</p>
        <p class="aria-quote" > - Sir Terry Pratchett</p>

Next we can make a second class which styles the actual quote with the additional CSS Aria wanted. She wanted to quote to be in italics and bold, so we need the font-style and font-weight CSS properties.

This class might look something like this:

        .aria-quote-text {
          font-style: italic;
          font-weight: bold;
        }

This class should only be applied to the element which shows the actual quote and will make the text bold and in italics, just like Aria wanted.

        <p class="aria-quote aria-quote-text" >In ancient times cats were worshiped as gods; they have not forgotten this.</p>
        <p class="aria-quote" > - Sir Terry Pratchett</p>

Step 7 - Seeing the Finished Product

And that’s it!

You have successfully added CSS to your first full web page!

Now it’s time to save your code and have a look. Remember, to open your finished file, find the file on your computer and double click it to open it in a browser.

For comparison here is what our old web page looked like:

And here’s what the new web page looks like:

That’s quite a difference!

If you have followed along and your web page doesn’t look quite the same, go back and check all of your classes and ids have been copied across right.

There is a lot more CSS properties that we can look at style this page even more. There’s also more HTML elements so we can add to the page!

In the meantime, feel free to go back and customise this web page to suit you. Maybe you want bigger text or maybe you want to use a different font.

Or maybe you want a bigger picture of me.

I wouldn’t blame you!