How To Build the About Me Section of Your Website With CSS (Section 2)

Introduction

In this tutorial, you will recreate the second section of the demonstration website using CSS. Feel free to switch out Sammy’s information with your own if you wish to personalize the size. The methods you learn here can be applied to other CSS/HTML website projects.

The second section of the site contains two content boxes, one that contains text and one that contains a large profile photo:

Prerequisites

To follow this tutorial, make sure that you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

You will need a profile image to place in the content box on the right. If you don’t have a profile image, you can use this image for demonstration purposes.

Before proceeding, make sure your selected image is saved in your images folder as large-profile.jpeg.

Creating Style Rules For Text and Image Content Boxes

To create these two content boxes, you will first define a column class in the styles.css file that styles the boxes for this purpose. Then you will add the text and image content to the HTML document.

Return to the styles.css file and copy and paste the following rulesets at the bottom of the file:

. . .
/* Include padding and border in total box size*/
* {
  box-sizing: border-box;
}

/* Create two equal columns that float next to each other */
.column-2 {
  float: left;
  width: 45%;
  padding: 40px;
  padding-left:70px;
  padding-right: 70px;
  height: 475px;
  margin:30px;
  margin-right:30px;
  margin-bottom: 70px;
  background-color: #FEDE00;
  line-height:2;
}

Before moving on, let’s pause to understand each of the rulesets we’ve just added.

The first ruleset uses the “*” selector to indicate that the ruleset should be applied to all HTML elements and classes. This ruleset declares the box-sizing property’s value as border-box, which adjusts the total calculated width and height of a CSS element to include its padding and border size. By default, width and height sizes of an element refer only to the content of an element. Setting the box-sizing property to border-box makes it easier to adjust the total width and height of an element and can be helpful when laying out content on a page. To read more about the CSS box model, please visit our tutorial How To Adjust the Content, Padding, Border, and Margins of an HTML Element With CSS.

The second ruleset defines a class named “column-2” with sizing specifications that allow for two columns to be displayed side by side on the page. This class is named column-2 to differentiate it from columns with other sizes that you will create classes for later on in the tutorial.

Some of the values and properties in this ruleset have not yet been covered in this tutorial series:

• The float:left; declaration instructs the element to float to the left side of the container it’s inside (in this case the viewport itself) while allowing surrounding content to flow around its right side. You can also set the float property value to right or none, though this tutorial uses the left value to recreate the demonstration website.
• The width: 45%; declaration sets the element’s width to 45% of the width of its container, which in this case is the viewport itself. Setting sizes (such as width) in percentages instead of pixels can be useful when you want the element to resize according to the size of the container in which it’s situated. Note, however, that dynamic sizing can be a tricky process—there are multiple methods for creating responsive elements which can be implemented after establishing a foundation in CSS.
• The background-color: #FEDE00; sets the element’s background color to the HTML color code “#FEDE00".
• The line-height:2; increases the spacing between lines.
• If you want to learn more about the other declarations, please review the previous sections in this tutorial series on setting the sizes of content, padding, and margins.

Adding the “About me” Content Box

Next, you will add the “About me” content box to the webpage using the column-2 class that you just created. Save your styles.css file and return to the index.html file. Add the following code after the closing </div> tag in your header section, before the closing </body> tag :

. . .
<!--Section 2: About me-->

        <div class="column-2">
            <h1>About me</h1>
            <p>Hi! I'm Sammy the Shark, Senior Selachimorpha at DigitalOcean by day, dabbler in all things dev by night. This site is a demonstration website for the tutorial series "<a href="https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-css">How To Build a Website With CSS</a>," which walks you through building and customizing this website from start to finish.</p>
            <p>If you're following this tutorial series, you can replace this text with your own "About Me" content.</p>    
        </div>

. . .

Save the file and load it in the browser. For instructions on loading an HTML file, please visit our tutorial step How To View An Offline HTML File In Your Browser.

You should now have a yellow box on the left side of the webpage that contains text:

Note that your webpage should still contain the header content you added in the previous tutorial of this series How To Build the Header Section of Your Website With CSS.

Let’s briefly review how this HTML code is functioning:

• The first line in this code snippet (<!--Section 2: About me-->) is a comment that helps organize the HTML content. It will not display in the browser and is included here for reference later.
• The next line of code (<div class="column-2" style="background-color:#FEDE00;">) creates a <div> container, assigns it the style of the column-2 class you defined in the styles.css file, and uses the HTML inline style attribute to assign it the background color #FEDE00.
• The <h1> and <p> tags that follow contain the text you are inserting into the “About me” text box. Notice that you have closed the <div> container at the end of this text. You can switch out Sammy’s text with your own text if you plan on personalizing your website.

Adding the Profile Image Content Box

Next, you will add the second content box that contains the large profile image. There are a number of ways you can add an image box, but in this tutorial you’ll add the large profile image by making it the background image of another <div> container that is assigned the column-2 class.

Return to the styles.css file and add the following code snippet to the bottom of the document:

. . .
/* Large profile image */
.large-profile {
  background: url('../images/large-profile.jpeg');
  background-size: cover;
  background-position: center;
}

In this code snippet you have added a comment to organize the CSS rules and created and defined the new class large-profile that you’ll use to style the box that holds the large profile image. In this ruleset, the background: url('images/large-profile.jpeg'); declaration tells the browser to use the image found at the specified file path as the background image of the element. The background-size: cover declaration fits the image to cover the space of the container in which it is situated, the background-position:center declaration centers the image inside the container.

Next you will add a <div> container that is assigned both the column-2 class and the large-profile class to recreate the box with the large profile image.

Save your styles.css file and return to the index.html file. Add the following code snippet below the closing </div> tag of your first column and above the closing </body> tag:

. . .
  <div class="column-2 large-profile">
  </div>

This code snippet creates a <div> container styled according to the rules declared in the column-2 class and the profile-picture class.

Save both files and reload index.html in your browser. Your webpage should now have the text box and image box as styled in the demonstration website (and pictured in the first image of this tutorial). Note that your webpage should also still include the header content you created in the previous tutorial. You can continue experimenting with the declared values in the column-2 and profile-large classes to explore different design possibilities.

Conclusion

You have now created and styled content boxes for text and images using CSS. In the next tutorial, you will recreate the third section of the website. In the process, you will arrange content into two rows of four boxes and apply a pseudo-class that will cause the boxes to change color when the user hovers over them with their cursor.