CSS Fonts
Just like in HTML, CSS calls fonts from the computer. Always use default system fonts such as:
Arial, Times New Romans, Verdana, Sans-Serif, Serif, Courier New, Lucida Sans, and a few others.
Font Selectors
font-size: 20px;font-weight: bold;font-family: arial;
You could do those all separate or you could do them inline to save space, they just have to go in the correct order:
font: 20px bold arial;
CSS Text
Here are some examples you can use to format your text:
line-height: 20px;
word-spacing: 10px
text-spacing: 5px;
text-indent: 10px;
If you have a lot of casing to change on your site why not use CSS and let it pre-format it for you!
text-transform: uppercase;
text-transform: capitalize;
text-transform: lowercase;
CSS Link Settings
I think 99% of websites use CSS and you can tell just by the way the links appear.
Remove the Underline
<a style="text-decoration: none;" href="test.html">Test</a>
Change Link Hover Options
Do this in your CSS:
a:link {color: red;}a:hover {color: silver;}a:active {color: gold;}a:visited {color: maroon;}
Remove Borders on Image Links
CSS Code:
a img {border: 0;}
HTML Basics
Your document will have regular text, like what you are reading now, but it will have tags like <this> in it. So let me explain!
<title> is how you would begin the "title" tag, the text that appears at the top of your Browser window comes after this, then it has to be ended:
<title>My Website</title>
We use a / to stop the title from going any further, that's so we can do other things with the website.
Some tags are self closing, meaning they look like this: <br /> -- because they are just one element with nothing before or after it, br would be a break to move the paragraph a line down without double spacing.
There are a lot of HTML tags but you won't use every single one, maybe not even half. Don't worry, after you make a couple of layouts this stuff will be stuck in your head!
Make a Standard Document
Here is what you should do with a standard document, notice the first line is a Document Type Declaration, you don't need to memorize how to write that, but the rest would be good!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <html> <head> <title>HTML Website | Home</title> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body>
HTML Text
I'm going to do the HTML text in CSS because it's good practice and will save you in the long run, so it will be a little different than you're used to, all you have to do is change the values.
1. Open your index.html file
2. Find some text and put <span>Your Text Here</span> around it.
Right now the <span> tag does nothing, but we are going to make it do something below:
<span style="font-size: 15px; font-family: Arial; color: red;">Your Text Here</span>
Above, we used an inline-style to format our text and you can change any value, here is an example of some more details:
<span style="font-size: 15px; font-family: 'Trebuchet MS'; font-weight: bold; border-bottom: 1px solid red; color: gold;">Your Text Here</span>
Pretty easy!