Today: continue with HTML and begin with CSS
HTML tells a browser what is on the web page (paragraphs, images, links, etc.) while CSS tells the browser where the content should go and how it should look (font, colors, layout, etc.)
1. CSS you’ll learn today:
– How to change the font and color of text
– How to change the background image and background color of a page
– How to style links
– How to create a simple page layout
– How to add comments in your code
– How to add borders
– How to create text shadows
To begin:
b. Copy the code (Control a and then Control c)
c. Open Notepad++ and paste the code in a new file (File, New)
d. Save this as csspractice.html
e. Let’s look at the page and the code before we start changing things
Helpful info for things we’re going to change:
Border styles are solid, dotted, dashed, double, groove, ridge, inset or outset
We will change colors, text, background images and colors, borders, etc.
2. Fun with CSS colors
You might have noticed in some of our tutorials the usage of color values. You can either use color names or hex values, like these.
Hex value examples:
#ffffff (white) (full color)
#000000 (black) (no color)
#ff0000 (red)
#00ff00 (green)
#0000ff (blue)
Test your new color knowledge with this fun game!
3. Favicons
Finally, let’s add a favicon to our page. Favicons are the tiny icons that appear on the top left next to a website’s name and URL.
First, you must design your favicon in some kind of image editor such as Photoshop. You might also be able to find free favicon generators online. Try this website: http://favicon-generator.org/. It will take a picture or graphic you have and turn it into a favicon. The picture must be a perfect square (same length and width). To do this open up your image with either pixlr.com or whatever image editor you have on your computer and crop and resize your image to make sure it’s the same length and width. If you want, click here to download the Mustang logo to use (it is a perfect square).
If you don’t use an image that is a perfect square you will end up with a distorted favicon because the favicon it generates will be 16 pixels by 16 pixels.
Again, pay attention to file name and file type. Save your favicon as favicon.ico and save it in the same place as your index file (your folder on your desktop).
Now that you have created your favicon, step two is adding code to your webpage.
Add this to your head section:
<link rel=”icon” type=”image/x-icon” href=”favicon.ico”>
Once you have done that, save your index file and refresh the browser. Hopefully you will see your new favicon!