Skip to main content

✏️ 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​

  • What are inline styles and how do they differ from using an external stylesheet to set styles?
  • What are the benefits of using an external stylesheet?
  • 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?

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, like those in the Epicodus classroom), 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: Create a Pet Website with Custom Styles​

As an additional practice piece, you can create a website dedicated to your pets. It could have pictures, information about them, or anything that you'd like to include.

Take time to also make styles for buttons, the background, or anything that you think would make your website pop!

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