Skip to main content
Version: WIP

✏️ 1.1.2.6 Practice: Styling Text

Goal: In the Styling text and debugging lessons, we learned:

  • How to set up a styles.css file and link to it in our HTML page
  • CSS rules, selectors and properties
  • Hexadecimal codes
  • Basic debugging techniques

Begin taking your HTML to the next level by implementing CSS. Practice targeting elements for CSS rules, and trying out different CSS properties.

Warm Up​

  • How do we select a specific element of our webpage to style with CSS?
  • Name four CSS properties.
  • Where should a CSS stylesheet reside?
  • How do we apply the styles created in our .css stylesheet to our .html web page?

AI Support: Stuck on CSS syntax or linking stylesheets? After trying the steps below, you can ask AI to explain a property or path in plain language. Do not ask AI to write CSS rules or complete this exercise for you.

Example prompts:

  • Weak: "Make my CSS work."
  • Strong: "I linked my stylesheet but styles aren't applying. Can you explain what I should check about the file path and <link> tag—without writing the fix for me?"

Before asking AI, check: Do I have the license for this? See Using AI Responsibly at Fidgetech and How to Ask for Help.

Try asking AI: "What's the difference between a CSS selector, property, and value? Can you explain each part of a rule like h1 { color: red; }—without writing CSS for my page?"

After reading AI's response, explain the concept back in your own words before moving on.

Code​

Styling Practice​

Now it's your turn! To access the JavaScript Console from a Chrome browser just type Ctrl + Shift + J on a Windows keyboard, or Cmd + Option + J on a Mac keyboard. Don't forget to make commits and push those changes to the respective remote repositories on GitHub.

Styling my-first-webpage​

  • If you haven't already done so, follow along with the Styling Text lesson to add styles to your my-first-webpage project. Make sure that the CSS stylesheet is in a sub-folder called css and that you correctly link the HTML document to the stylesheet (make sure the path to the file is correct!).
  • Add a single CSS rule that makes the main heading (<h1>) red. Refresh the page in the browser to verify that the stylesheet is linked correctly. If it doesn't change the page, make sure that you've put the CSS file in the correct folder, and specified the right path to the CSS file. Open the JavaScript console to debug if necessary.
  • Now, use the following properties in your CSS:
    • color,
    • text-align,
    • font-style,
    • font-weight,
    • font-family,
    • font-size, and
    • line-height.

Adding favorite-places​

  • Next, make a new webpage called favorite-places.html in the same project folder of my-first-webpage and make it about your favorite places to visit. Add images, links and inline styling.
  • Switch to your favorite-places.html page. Make another stylesheet (make sure to name it differently than the my-first-webpage.html stylesheet!) and apply CSS rules.
  • Make a new stylesheet for both your my-first-webpage.html and favorite-places.html. Remove the other stylesheets and link to the single stylesheet from both pages. You should have a consistent style between the two documents.

Optional Practice: Add Styles to Pet Website​

Update your cat's homepage or dog's blog to have some styles. If you haven't created a pet website yet, go ahead and do that.

Be sure to make commits and push those commits to GitHub as you are working on your pages.

Checkpoint​

Before moving on, you should be able to:

  • Link a CSS stylesheet from an HTML file in a css/ subfolder
  • Write CSS rules using selectors, properties, and values
  • Use at least 5 different CSS properties on your pages
  • Share one stylesheet between multiple HTML pages

If you're unsure, re-read the section above or ask AI: "I linked my stylesheet but styles aren't applying. Can you explain what I should check about the file path and <link> tag—without writing the fix for me?"