search

EmmanuvelSebastian / intro-html

A robot powered training repository :robot:
https://lab.github.com/githubtraining/introduction-to-html
MIT License
0 stars 0 forks source link

Add some style to your page #7

Closed github-learning-lab[bot] closed 2 years ago

github-learning-lab[bot] commented 2 years ago

Step 12: Make it beautiful

You may be wondering why your page hasn't looked exactly the same as the sample I showed in the beginning. That's because HTML gives your webpage structure, but the simple tags you have learned so far don't tell the web browser how you want each page element to appear.

The appearance of each page element is defined through styles and is the subject of another course. For now, I have added a stylesheet for you.

For your webpage to use your new stylesheet, you just need to link it within the <head> of your index.html file. If you include the following link in your index.html file, your webpage will begin using the css file to make your website look awesome!

  <link rel="stylesheet" href="style.css">

As an example, your index.html file might look like this:

    <head>
        <title>I am a title!</title>
        <link rel="stylesheet" href="style.css">
    </head>

:keyboard: Activity: Create a style to your site

  1. Edit the index.html file in the add-style branch by using this direct link or going to the Code tab, selecting the add-style branch, clicking on the index.html file, and clicking the pencil :pencil: to edit.
  2. Between the <head> tags, add the following <link rel="stylesheet" href="style.css">.
  3. In the Commit changes section, enter a commit message that describes what you've done.
  4. Click on Commit changes.

I'll respond when I detect you've committed in this pull request.

github-learning-lab[bot] commented 2 years ago

Step 13: Merge your final pull request

Your styles look great, @EmmanuvelSebastian.

Go ahead and merge this pull request so we can all see the final result. Don't forget to delete your branch!

:keyboard: Activity: Merge the stylesheet

  1. Click on Merge pull request below.
  2. Click on Confirm merge.
  3. Click on Delete branch.

I'll respond when you've merged this pull request.

github-learning-lab[bot] commented 2 years ago

Show the world your finished page

Well done @EmmanuvelSebastian, here is the finished result: https://emmanuvelsebastian.github.io/intro-html/

You've learned the basics of HTML, and used it to build a simple webpage.

Though this works, there's still more you can do to make sure you're up to date with standard conventions, like using an HTML validator.

See validation

If you'd like, you can make your fancy new page the default start page for your web browser. Just follow the links below for more information: