Skip to content

Add some style to your page #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 3 commits into from
Oct 22, 2021
Merged

Add some style to your page #7

merged 3 commits into from
Oct 22, 2021

Conversation

@github-learning-lab
Copy link
Contributor

@github-learning-lab github-learning-lab bot commented Oct 22, 2021

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>

⌨️ 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 📝 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 github-learning-lab bot mentioned this pull request Oct 22, 2021
Merged
@creator-10
Update index.html
f0e28b9 
stylelsheet added
@github-learning-lab
Copy link
Contributor Author

github-learning-lab bot commented Oct 22, 2021

Step 13: Merge your final pull request

Your styles look great, @creator-10.

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

⌨️ 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.
@creator-10 creator-10 merged commit 34d1350 into main Oct 22, 2021
@github-learning-lab
Copy link
Contributor Author

github-learning-lab bot commented Oct 22, 2021

Show the world your finished page

Well done @creator-10, here is the finished result: https://creator-10.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:
@creator-10 creator-10 deleted the add-style branch October 22, 2021 11:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

3 participants

@creator-10 @githubteacher