Basic CSS Tutorial
Getting Ready
Even if you never use it, it doesn't hurt to add the code for small devices. If you do decide to use it later, you'll be glad you don't have to go back and add it to all your pages.
<meta name="viewport" content="width=device-width, initial-scale=1">
A FAVICON is the little image you see in the browser tab and is used for your bookmarks. In new versions of HTML, you can name it anything you want so you can have several. I like them because I can quickly identify something in my bookmarks - if it has a Texas flag, it's most likely something from TXGenWeb or one of my TXGenWeb sites.
<link rel="shortcut icon" href="favicon.ico">
And finally we add the request to use our SEPARATE CSS file. CSS stands for Cascading Style Sheets. That means you start with the first CSS file, then go to any others that are listed, then any STYLE in the HEAD of the page and finally, any style that has been applied INLINE. It cascades (flows) from one to the next in a "downhill" direction. I'll go over these options in just a bit.
<link rel="stylesheet" type="text/css" href="include/css.css">
If you look at the images above, you'll see more examples of boxes - HTML, HEAD, TITLE and BODY are all containers. As a general rule, if you can put text in it AND it has a closing tag, it's a box. META tags are not boxes, no closing tag. Line breaks, no closing tag. You can't format tags that don't have closing tags (with a few exceptions and the only one you're likely to use is IMG - no closing tag and you can't add text to it - BUT you can format and decorate it).
There are TWO kinds of boxes. Most of our boxes will be BLOCK type. By default, they start on a new line and go all the way across your page. A BLOCK box is also sometimes called a CONTAINER because you can put other boxes inside it.
This is a div.
A span is an INLINE box. It starts wherever you put it and only takes up as much room as what is inside of it, you can't
change it's size. An image is an inline box BUT you can manipulate its size. I don't want to confuse you so I won't
get into WHY right now. This is a span. A hyperlink is also an inline box.
How it looks. The only difference is that you can see the favicon (question mark) in the browser tab.
Previous Next