Styling Hyperlinks with CSS

Applying CSS style rules such as text colours, borders and transitions to hyperlink states.

Learning Goals

At the end of this Tutorial, you will be able to:

  • Apply CSS style rules to the five hyperlink states: link, visited, focus, hover and active.

You can view the finished versions of the two sample web pages to which you will add hyperlinks in this Tutorial by clicking the link below. The finished samples will each open in a new tab of your web browser.

Uploading your files to GitHub

After finishing your web page and stylesheet, you are now ready to upload them to your account on GitHub.

  1. Open a new tab in your web browser and go to GitHub.com. If you are not already signed in to your GitHub account, sign in now. github-signin
  2. On your GitHub home page, click the ‘repo’ that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub.   username.github.io github-signin
  3. On the next GitHub screen displayed, near the right of the screen, you can see a button named Add file. Click on it. github-upload-portfolio
  4. From the dropdown list displayed, choose the option Upload files. Project Animation Google Fonts
  5. In File Explorer (Windows 10) or Finder (Apple Mac), drag-and-drop your 📁 exercises sub-folder to upload it to your repository on GitHub. Introduction to HTML
  6. Scroll down to the bottom of the GitHub screen, and accept or edit the short message (Add files via upload) in the Commit changes box.
  7. Finally, click the green Commit changes button to upload your files. Project Animation Google Fonts

Your updated sample web page are now published on GitHub at web addresses similar to the following:

https://username.github.io/exercises/page-5.html
https://username.github.io/exercises/page-6.html

It may take a few minutes for your uploaded files to appear on GitHub.