Goal: In the Styling text and debugging lessons, we learned:
Begin taking your HTML to the next level by implementing CSS. Practice targeting elements for CSS rules, and trying out different CSS properties.
Now it's your turn! To access the JavaScript Console from a Chrome browser just type Windows + Alt + 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.
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!).<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.color
, text-align
, font-style
, font-weight
, font-family
, font-size
, and line-height
.favorite-places.html
in the same project folder and make it about your favorite places to visit. Add images, links and inline styling.favorite-places.html
page. Make another stylesheet (make sure to name it differently than the my-first-webpage.html
stylesheet!) and apply CSS rules.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.Be sure to make commits and push those commits to GitHub as you are working on your pages.
Lesson 21 of 21
Last updated more than 3 months ago.