Adobe Creative Cloud

Design

October 25, 2016 /

Learn to Code Series: Use CSS to Style a Web Page

In this activity, use the fundamentals of CSS that you learned in the Learn to Code Facebook Live Session to style the “About Me” page for your blog. Use the requirements below to create your page or follow the steps below for more help. If you haven’t already followed along in our Intro to CSS Facebook Live series, I would encourage you to do that first before this activity or download the completed files from that activity here. Watch the video below:

Your web page should include:

  • A new stylesheet called “about.css” that styles the about.html page
  • Styled fonts for the text on the page
  • A maximum width on the image and the paragraph
  • A pseudo element to create a hover effect on your links
  • A CSS comment

Tutorial

If you haven’t already watched the Facebook Live Session, follow along to create the base for your blog site or download the starter files.

Step 0: Download Dreamweaver Beta and Open

  • If you haven’t already downloaded the Dreamweaver, you should do that before you begin this tutorial.
  • Open Dreamweaver and make sure your workspace is Standard with “Split” and “Live” views selected

csscodelesson11

Download the HTML starter files for this lesson.

Step 1: Create a new CSS file

  • In the files panel, right click on the root directory (site folder) and select “New File”
  • Call the file “about.css”

csscodelesson06

Step 2: Linking the Stylesheet

  • In your about.html file, add a <link> tag to the head section
  • Make sure to include an “href” data-attribute for the path (css/style.css) of the file and a “rel” data-attribute to specify that it is a “stylesheet.”

csscodelesson07

Step 3: Remove Default Margin/Padding

  • There is default padding and margin in the browser styling. In order to remove this styling, target the “body” element and add “margin: 0” and “padding: 0” property-value pairs.

csscodelesson21

Step 4: Change the font of the page and include fallbacks

  • Change the font of the entire page to Helvetica with Arial and sans-serif fallback options.
  • In the body selector, add the font-family property with the value “‘Helvetica’, Arial, sans-serif”

csscodelesson19

Step 5: Style your summary

  • Uh oh! We can’t style text if there’s no element to target!
  • Go into your html and wrap your name in an <h1> tag, your title in an <h2> tag and your description in a <p> tag.
  • In order to style text elements, they should be wrapped in text tags

csscodelesson09

Step 6: Style Text Elements

  • Make all of your text the color #232323 with the “color” propertycsscodelesson03
  • Target the h1 element and add a font-style property to make it “italic” and a font-weight property to make it “bold”csscodelesson12
  • Make your h2 element a font-weight of “normal” and a font-style of “italic”csscodelesson05
  • Finally, give your p and li elements a line-height of 1.6 and a font-size of 1rem.
    csscodelesson14
  • Remember, you can use the “,” to give more than one element the same styling

CHECK-IN: If you’re viewing your website in the Dreamweaver live view, it should look something like this.

csscodelesson

Step 6: Add a max-width to the paragraph and the image

  • Targeting all of the paragraph elements, add a max-width of 40rem.
  • In the about.html file, add a class to your image called “profile-image”.csscodelesson08
  • In your CSS, target this class by using “.profile-image”. Add a max-width of 15rem to this image.csscodelesson02
  • To further style this image, add a border-radius of 5px.csscodelesson13

Step 8: Style the list titles

  • Again, we must wrap these titles in a tag so we can target them.
  • In your about.html file, wrap each of the list titles in an <h3> tag.
    csscodelesson15
  • In your about.css, target the h3 element and change the font-size to be 1.25rem.

Step 9: Center the Image

  • Center your image by adding a property of “margin-left” and a value of “auto” and the property of “margin-right” and a value of “auto”.
  • You will also have to add the property “display” and the value “block.”

CHECK-IN: If you’re viewing your website in the Dreamweaver live view, it should look something like this.

csscodelesson20

Step 10: Add padding to the main section and margin to the image

  • The text is running up alongside the edge of the browser, so we need to add some spacing there. Instead of adding padding to each individual h1,h2,p, and ul tag, we’re going to wrap this entire section in a div with a class of “content” in the about.html file.
  • Note: you will have to adjust the indentation since the div is the parent of all of the other tagscsscodelesson16
  • In the about.css file, add the “.content” class selector and add the padding property with a value of 2rem, which will add padding around all four sides of the div.csscodelesson18
  • Add 2rem of margin to the .profile-image tag as well.csscodelesson10

Step 11: Add a hover effect to the links

  • Target the <a> elements and add the hover effect “text-decoration” with a value of “none”.csscodelesson01
  • When you hover over the link with your mouse, the underline should disappear.csscodelesson17

Great Job! Your website should look something like this:

csscodelesson04

To see the final product, you can download the completed example files here.

For more resources, check out our Learn to Code blog posts.


Complete Learn to Code Series:

Join the Public Dreamweaver Beta!

We’re working on a completely modernized version of Dreamweaver CC. Help us shape the future!

JOIN