Keep your editor open. You do not want to close it as you are making updates and adding more code and content to your webpage. You can open it in your browser to see what you have created so far.

Note that the links in your navigation bar do not work yet, because those pages have not yet been created.

In this part of the tutorial, we begin to create our style sheet by first adding color. We will begin with first using a style sheet that is embedded in the HTML file.

Your style sheet is going in to be inside your <head> tag and after the <title> tag, as shown here:

Take note of where it indicates color. This is the color of your text. I chose blue, but you can change it to whatever color you like for your text.

I also want to encourage you to play around with your background color. I chose a random color, but using a color wheel tool such as the one below you can select your own background color:

http://www.sessions.edu/color-calculator

Again, save your HTML/CSS file and give it a file name using the .html extension. Find the file within your file manager and open it into your browser. If it does not open into your default browser, click and drag it to your browser.

The browser view should look like the following (may be different if you chose different color schemes within your style sheet):




Join the Discussion
Write something…
Recent messages
HelenpDoyle Premium
Have bookmarked both of these tutorials Steph. I have been teaching myself css but look forward to reading your information.
Reply
stephhill Premium Plus
Hi Helen!

I am not sure how useful this tutorial will be if you already have taught yourself CSS because it is a basic beginning to what CSS is and how it works with HTML.

Steph
Reply
HelenpDoyle Premium
Basic is good!
Reply
Quincy17677 Premium
Will be doing this tutorial. Several years ago, I did learn css but through disuse, have no memory of it at all. I look forward to it.

My time to upgrade to Windows 10 came last night. I was so glad that you had written about how much time it took that I just went to bed and only had a short wait this morning for it to finally finish. So far (one hour) I like it. I gave Microsoft Edge a bit of a try but I then chose Google as my default browser as it seems much easier to work with because it is more intuitive.
Reply
stephhill Premium Plus
Hi Quincy!

I agree with completely about MicroSoft Edge. I ran into some issues with it as and you can definitely use whatever browser you want. I am glad I was able to warn you ahead of time regarding the upgrade to Windows 10. When I upgrade my current computer I am using, I plan on doing the same thing - do it overnight while I am sleep. :)

Steph
Reply
AnteroM Premium
I like your tutorials, I copy them in my computer.
Thanks!!!
Reply
stephhill Premium Plus
Thank you Antero! I consider that to be a high compliment coming from a retired Graphic Designer. How is your tennis website coming along? I like it alot.
Reply
AnteroM Premium
Working hard on that, I am not a good writer.
Reply
stephhill Premium Plus
I think you are a better writer than you think you are. :)
Reply
AnteroM Premium
Thanks, you are very kind!!!
Reply
stephhill Premium Plus
You're welcome Antero.
Reply
solidbase Premium
Thank you Stephanie,
I have added this tutorial to your previous one on HTML, in my golden nugget file.
Great stuff.
-Theuns
Reply
stephhill Premium Plus
Hi Theuns!

As always, a pleasure hearing from you. I am glad you found it valuable enough to put in your gold nugget file.

Steph
Reply
SamiWilliams Premium Plus
Thanks, Maybe someday I will be able to try this!
Sami
Reply
stephhill Premium Plus
Hi Sami!

When you do try it out, let me know if you have any questions.

Steph
Reply
SamiWilliams Premium Plus
Thanks Stephanie, I surely will.
Sami
Reply
Top