Tutorial 4: Advanced Webpage Styling With CSS
đŹâGrowth mindset: Believing that you are capable of learning something with practice.â
Introduction
Welcome to day four of your web development short course. Take a moment to appreciate the fact that, in just three days, youâve learned so much about the web. Youâve gone from reading about the raw ingredients for building a website like HTML and CSS to actually using some of them on your first website. You also looked into some best practices of both HTML and CSS along the way, and then learned about responsive web design.
The next two days are going to be equally filled with new lessons in web development: some advanced CSS and then getting our feet wet with the last pillar of the web, JavaScript.
Today is all about colors and styles and animation. By the end of today, our website will be popping with color!
What are we going to do today?
- Add images to our âimagesâ folder
- Replace the project placeholder images with our own
- Set custom fonts on our page
- Add more styling to our footer to help it look niceÂ
- Learn to change our pageâs background color
- Change the font colors on our page
As you can see, weâve got lots to do. Letâs dive right in!
1. Prepping the âimagesâ folder
In general, whenever we work with images on a webpage (which is almost always), we try to separate files according to their types. So all images go into one folder, CSS files go into another folder, and so on. Since we had only one CSS file, we didnât put it in its own folder. But for the section ahead, weâll be working with multiple images. So as not to clutter our working directory (which is the name for the folder in which our index.html file is), weâll create a new folder called âimagesâ to hold all of our images.
In this âimagesâ folder, youâll need to add some images that weâll be using in this course. Weâll provide you with the images as itâs easier to not have to deal with image size and aspect ratio issues, but you can always experiment with your own images later on. All our images are from Unsplash, a website for free stock images for use in projects like ours.
So, step one is to create a folder called images in Sublime editor, inside our portfolio folder.
Once youâve done that, download the zip file from this link and unzip it inside the folder you just created. Once thatâs done, this is how it should look in Sublime.
Now weâre ready to start using our images. First, weâll replace the profile picture. In our HTML file, weâll replace this line in the intro section:
With this:
Notice that the src attribute has changed. Essentially, weâre telling the browser to pick the image stored locally (hence no https://) and display it. Letâs reload the browser and see how it looks!
Not bad, but maybe a bit plain as a square image. Letâs make it round and add some shadows. Add a class called `profile-picture` to the same image tag in your HTML file and then select it in CSS, like so:
CSS
Oookay, thatâs a mouthful. There are a couple of new properties in there that we havenât seen before. Letâs explore those briefly now:
- border-radius turns the square image into a circle. By controlling the size of the border-radius, we can get anything from a nice round-cornered rectangle to a circle. Try setting it to a different percentage and see what happens.
- box-shadow adds nice shadows to an HTML element. The value for that property is best described by this page on Mozilla Dev Docs.Â
- transition sets a couple of parameters for the animation (transition). âallâ specifies that we wish to animate all aspects of this elementâs transition (width change, height change, color change etcâfor example), ease-in-out is a timing function that defines the speed of the curve (read more here: https://css-tricks.com/ease-out-in-ease-in-out/) and .2s specifies the time (in seconds) that the animation should run for.
- .profile-picture:hover { .. } sets CSS properties for the element when we hover over it with our mouse pointers (or touch it on smartphones and other touchscreen devices). Here, weâre just increasing the size of the shadow to make it feel like it reacts to our gesture.
Refresh your browser and notice the shadow. Now move your mouse pointer over the image and see how the shadow changes, giving the illusion that the image is being raised from the canvas. Beautiful, isnât it?
Letâs move on to fonts now, and see the difference we can make by adding a custom font (or fonts) to our page.
2. Replacing project placeholder images with our own
Letâs also replace the images in the project section with our own images. In the folder you downloaded earlier today, there are four images named project-1.jpg through project-4.jpg. Weâll replace the placeholder images with each of these.
HTML
So now you should have the more colorful images showing up. In the future, these images could be replaced by some real portfolio projects that you work on!
Optional challenge: Adding effects to your images
If youâre feeling confident with what weâve learned so far, you might like to try adding even more cool effects to your images. Letâs add some rounded corners, hover effects and hover text. We already did something similar for the profile picture a couple of sections above, so not everything is new here.
Essentially, hereâs what weâre doing. Weâll give the images some rounded corners. Then weâll give them some shadow and some deeper shadow on hover. So far, thatâs exactly what we did for the profile picture. But now, weâll add each image into a <div> and add an h4 (thatâs a heading 4). Weâll make it so that the heading only shows when we hover on the image.
As a bonus, weâll add a little brightness filter to the image so that the text is readable, and a transition to make everything a bit smoother. The result?
That looks great, doesnât it? Hereâs a brief explanation of the new CSS properties used:
- visibility: [visible/hidden] shows or hides an element
- position: [relative/absolute] position: absolute positions an element relative to the parent with a position: relative. That is, the parent with position: relative becomes a reference point and the child with position: absolute can be arranged relative to this parent like weâve done by positioning the h4 to be 50% from the top and 50% from left, essentially centering it inside the parent viz. .project-image-wrapper class. Read more here https://developer.mozilla.org/en-US/docs/Web/CSS/position
- transform: translate(X, Y) moves an element X percent along the x-axis and Y percentage along the y-axis. This is helpful when centering a child element inside a parent.
- z-index is about the stacking order. If two elements overlap each other, the element with a higher z-index will appear on top of the one with a lower z-index.
- filter: brightness(0.75) creates a brightness filter and reduces the brightness to 75% when this property is active.
Youâll find the code for the code changes in the commit linked above.
3. Setting custom fonts
A font define the style with which text is displayed. We web developers love to make pretty websites, and sometimes we need to use a font (i.e. style of text) thatâs not given to us by the browser directly (browsers do provide us with some fonts out of the box). Thatâs not a problem, because CSS allows us to download and use any custom font that we want to use.
For this course, weâve selected two beautiful fonts for you. For headings and titles, weâll use Roboto Mono, and for body text weâll use Noto Sans. The good thing about both of these fonts is that theyâre free to use and are available at https://fonts.google.com/ for download. To use them, weâll simply paste this line into the <head> section of our HTML page:
Weâll use the font-family property on the element we wish to style in this particular font, and add the value âRoboto Monoâ or âNoto Sansâ.
For a quick start, weâll make the default body font Noto Sans and default title font Roboto Mono:
CSS
Refresh the page and notice the difference in font styles! Thatâs how we add and use custom fonts.
4. Footer fixes
Now that our intro and portfolio sections have been taken care of, letâs focus on the footer. Letâs break the form in the footer so that each input label and input box appears on its own line. That makes it a bit cleaner.
Notice the different variations of CSS that weâre using: form input to select input fields that are inside of a form, and form input[type=âsubmitâ] to select input fields inside a form that have a type attribute set to âsubmitâ (this is the submit button at the bottom). Like we discussed in Day 3, you can really mix and match CSS selectors as per the use case!
5. Changing the pageâs background color
Now that weâve taken care of some finer details, letâs zoom out a bit and see if we can make any page-wide changes that would further enhance the aesthetics of our webpage. First of all, letâs set a nice soothing background color to our page and add some physical separation between the sections of our webpage.
The HTML <hr/> element, h-r for horizontal rule, is a perfect candidate to visually separate sections of a page. Adding a margin also helps create a visual separation. For the background color, weâre using a shade of blue, close to sky blue. Blue is usually a color of choice for web designers and youâll see it used quite a lot more than other colors (see Facebook, Twitter, Linkedin etc).
CSS
We will also style the <hr/> element by using the background-image: linear-gradient() CSS property. We pass four values to this function: direction, start, middle and end color (and opacity). It starts off with 0% opacity (transparent), goes to 75% in the middle and goes back to 0% towards the end. The other interesting function here is rgba(red, green, blue, alpha), where red, green and blueare the color intensities (that is, darkness. So 0 is no color), and alpha is the transparency/opacity setter.
Refer to the above commit and check where weâve added the <hr/> (horizontal rule dividers). Also note how the CSS code is structured. Once you make the changes, you should have spacing and horizontal dividers like in our images.
6. Changing the font color
While black is the default font color on the web, a slightly different shade doesnât hurt. However, itâs important to keep in mind that as web developers, we need to make sure that the contrast between the text and the background color is maintained in order to ensure readability and accessibility.
CSS
Open the commit and check how we made the change. Weâve set the color of the font to #001f3f which is navy blue. Did you notice that the text is a little easier on the eyes now? Thatâs what a little color tweak does for us!
đPro tip: Check out the color picker from Google here https://www.google.com/search?q=color+picker and play around with it to understand how hex color codes work.
Summary
That was a lot of CSS and wrapping your head around things, but look where we started and where weâre at right now! Thatâs the power of a few lines of CSS. We suggest you go through the course material for the day once again, perhaps a couple of hours later, and see if there was anything you didnât understand the first time but now you did. We believe that you can extract more from the course the more you are exposed to the course material.
đ§Daily Challenge
Weâve come a long way since we started with that colorless black and white page today. But thereâs a lot more that you can do to this page with the knowledge that you already have! For todayâs challenge, try the following:
- Change the color of the âsubmitâ button to something that suits the overall theme of the page (youâll need to use the background-color CSS property here)
Using trial and error, find another color combination for body background and default font color that looks nice (You can refer to this website for some inspiration).
đReferences
Â
â FAQ
Q. Do professional developers actually remember all these CSS properties and their values?
A. Not necessarily. There are way too many things to remember, and even if you could, thereâs little reason to. What developers do remember, however, is that something along those lines exist to solve a problem. And then they just search the web and read the documentation.
Q. Weâre running the code on Google Chrome, but I also want it to run on Mozilla Firefox / Safari / Opera. How do I make that happen?
A. Our website is interoperable across all browsers. So if you make a good website, it will look the same irrespective of the browser. There are some caveats to this, but for now, you can assume that whatever weâve built, and will build, works on all major browsers.
Alana
Senior Program
Advisor

You can become a job-ready web developer from scratch in as little as 6 months. Arrange a call with your program advisor today to discover how you can change your career from the comfort of your own home with the CareerFoundry Full-Stack Web Development Program.