Build a Personal Website with HTML and CSS (Part 2)
In part 2 of this guide, we’ll use CSS to style our website.
Note: This tutorial was made for a workshop for Santa Monica College Computer Programming Club. Some information may be missing from the text.
Style
Let’s create a new css file called style.css. Our folder now looks like this:
website
├── img
│ └── profile.jpg
├── index.html
└── style.cssNow, in our index.html, we need to link our css file to our html, so the browser knows to use style.css to style our page. For this, we use a <link> tag in the <head> of the file:
Open up the style.css folder. The first thing we’ll do is turn our square image into a circle.
CSS consists of rules (statements that change the style of an element), and selectors (identifiers that dictate what element to apply those rules to). In the above code, the .profile-picture selector is used to target our image. We apply the border-radius rule to create a rounded image.
We are going to use a lot of different rules and selectors here. I won’t go over all of them. A great reference to look up CSS rules is W3Schools
Next, we’re going to add a bunch of style rules for positioning the page. I’ll also add in some background-color rules just to illustrate the boundaries of each div.
Fonts and Links
The default browser fonts aren’t terrible, but let’s change them to make our site look more unique. We can use another <link> tag to get some fonts from Google Fonts. Add the following link tag to index.html:
Now we can use the Roboto and Open Sans fonts in our CSS.
Almost there! Now let’s add some styling to our social media links. Add the following to style.css:
To put the finishing touch on our site, let’s add a nice gradient background color.
You can experiment with different colors for your gradient. Check out Coolers.co or Paletton for nice color combinations.
We’re finished! If everything worked out, your site should look something like this:
Check out Part 3 to see how to host this site for free on Github!
What’s Next?
Codecademy and Free Code Camp also have excellent guides on CSS. W3Schools is good for researching new CSS rules and selectors.
Try using different CSS to reposition the elements of your page without changing the HTML. You can change the text styles, add borders to the images and links, or adjust the spacing between things.
For an extra challenge, research responsive design and media breakpoints and try changing the layout of the site to be more mobile-friendly.
