Source: http://tech4talk.com/forums/viewtopic.php?f=54&t=147
Creating and Styling Text
css tutorial
written by Chris Luongo
So your just starting out with CSS and want to learn some basics. You cant get much more basic then learning how to style your text in your stylesheet. The beauty of css is that you dont have to DEFINE each paragraph of text to be red, size 12 font, and have an underline. You can tell your stylesheet, for every paragraph of text, make the text red, size 12 font, and have an underline. All it takes is ONE line of code!
Objective: Learn how to style our text on a website, learn the different text properties and formatting.
Tutorial Time: 25 Minutes
Requirements: Basic Beginner CSS knowledge
--
Creating Our Workspace
Lets start off by creating a new blank CSS document, as well as an HTML document. Save the CSS document right away ass css.css. Attach it to your HTML document which you can call index.html. If you don't know how to do this, please read our tutorial on linking style sheets to HTML documents.
Lets type in some text on our HTML document, in between the <body></body> tags. Copy and paste this in between those body tags:
In your document if you preview it, notice how bland it is. The text isn't formatted at all, its in one large paragraph, size 12, boring black font. What an eye sore! We need our headers to stand out and our paragraphs to be distinct. Lets start off by styling our Headers. Before you head on, make sure you but page break tags after each section (<br></br>).
Styling Headers
The plan is to have one main header (the site style) and 2 secondary headers (paragraph titles). Lets refer to them like this,
Main Header (Site title): h1
Secondary Headers (Paragraph Titles): h2
First we are going to style our Main Header. Since it is the website title, we want it to be the largest and boldest! Head into your CSS document and create a new class called h1. We are going to give h1 some make up! How about a nice bold font, 48px in size, and a light blue color.
We will be needing in our h1 class, a rule for font style, font size, and color. Copy and paste the code into your CSS:
The code explains itself.
font-size: 48px;
We are declaring the size of the font at 48 pixels.
font-weight: bold;
We are declaring the weight of the font, as bold.
color: #03F
We are declaring the color of the font as #03F, which is a light blue.
Next, go set the <h1></h1> tags around the header (site title) in the html.
Go check out the page now, your font is just like we wanted it to be! Lets stylize the other headers now.
These next headers are more like article titles. The font should be smaller then the h1 title font. But they should be bigger then the paragraph text. We also need the font to be a lighter hue of blue to compliment the main title. Lets make a new class for h2. We need this time:
font-size, color, text indention, and lets add a border to underline the header.
Copy and paste this code:
Next, place your <h2></h2> tags around both of your secondary headers in the HTML.
Lets examine the code for our h2:
font-size: 36px;
Once again determines the font size at 36 pixels
color: #39F;
Once again, determines the font color.
border-bottom: 2px black dotted;
This property adds a 2 pixel dotted border underneath the text that is black. It spans the whole length of the document or whatever DIV it is contained within (grouped with the header 2 text).
text-indent: 15px;
This indents our h2 text 15 pixels from the left of our web page. This makes it a bit easier to read.
So view your page now and you should have it coming along well so far. Lets move on to styling our paragraph text.
Styling the Paragraph text
Now we are almost done. Lets stylize the text underneath our h2. This can be define as a simple p. So create a new CSS class called p. We want our paragraph text to indent even further then the h2 text. Lets keep the text black, but change the font family, and size as well. Copy and paste this CSS:
font-family: Verdana, Geneva, sans-serif;
This changes our font family selection to Verdana, if not supported by a browser, then Geneva, and so on.
text-indent: 20px;
We indented our text again, but this time 20 pixels instead of 15.
Set your <p></p> tags around the paragraph text. Save your documents (HTML AND CSS) and preview your web page. There it is! Styled and ready to go!
The possibilities are endless and don't forget they're are so many more properties and values you can assign to your text. Try different color combination's and font size, don't be scared to get down and dirty!
Attached are the files that go along with this tutorial:
index.html
css.css
readme.html
Download them if you are confused or like to work along with them!
Download: http://rapidshare.com/files/302557327/C ... l.rar.html
Creating and Styling Text
css tutorial
written by Chris Luongo
So your just starting out with CSS and want to learn some basics. You cant get much more basic then learning how to style your text in your stylesheet. The beauty of css is that you dont have to DEFINE each paragraph of text to be red, size 12 font, and have an underline. You can tell your stylesheet, for every paragraph of text, make the text red, size 12 font, and have an underline. All it takes is ONE line of code!
Objective: Learn how to style our text on a website, learn the different text properties and formatting.
Tutorial Time: 25 Minutes
Requirements: Basic Beginner CSS knowledge
--
Creating Our Workspace
Lets start off by creating a new blank CSS document, as well as an HTML document. Save the CSS document right away ass css.css. Attach it to your HTML document which you can call index.html. If you don't know how to do this, please read our tutorial on linking style sheets to HTML documents.
Lets type in some text on our HTML document, in between the <body></body> tags. Copy and paste this in between those body tags:
Code:
My CSS Website
CSS is fun to learn!
CSS is so much fun to learn. I can't believe how simple yet complicated it is. Right now I am learning how to stylize this text, so that my web pages will be gorgeous to the human eye. I am already having a great time, and I can't wait to show everybody my final creation.
Does this text look nice?
I hope I am doing this right! If this text looks perfect and stunning, then you did! CSS isn't so bad after all is it? You can learn so much more on our website or in our forums. You can check it all out at this link here: CSS TUTORIALS.In your document if you preview it, notice how bland it is. The text isn't formatted at all, its in one large paragraph, size 12, boring black font. What an eye sore! We need our headers to stand out and our paragraphs to be distinct. Lets start off by styling our Headers. Before you head on, make sure you but page break tags after each section (<br></br>).
Styling Headers
The plan is to have one main header (the site style) and 2 secondary headers (paragraph titles). Lets refer to them like this,
Main Header (Site title): h1
Secondary Headers (Paragraph Titles): h2
First we are going to style our Main Header. Since it is the website title, we want it to be the largest and boldest! Head into your CSS document and create a new class called h1. We are going to give h1 some make up! How about a nice bold font, 48px in size, and a light blue color.
We will be needing in our h1 class, a rule for font style, font size, and color. Copy and paste the code into your CSS:
Code:
h1 {
font-size: 48px;
font-weight: bold;
color: #03F
}The code explains itself.
font-size: 48px;
We are declaring the size of the font at 48 pixels.
font-weight: bold;
We are declaring the weight of the font, as bold.
color: #03F
We are declaring the color of the font as #03F, which is a light blue.
Next, go set the <h1></h1> tags around the header (site title) in the html.
Code:
<h1>My CSS Website</h1>Go check out the page now, your font is just like we wanted it to be! Lets stylize the other headers now.
These next headers are more like article titles. The font should be smaller then the h1 title font. But they should be bigger then the paragraph text. We also need the font to be a lighter hue of blue to compliment the main title. Lets make a new class for h2. We need this time:
font-size, color, text indention, and lets add a border to underline the header.
Copy and paste this code:
Code:
h2 {
font-size: 36px;
color: #39F;
border-bottom: 2px black dotted;
text-indent: 15px;
}Next, place your <h2></h2> tags around both of your secondary headers in the HTML.
Lets examine the code for our h2:
font-size: 36px;
Once again determines the font size at 36 pixels
color: #39F;
Once again, determines the font color.
border-bottom: 2px black dotted;
This property adds a 2 pixel dotted border underneath the text that is black. It spans the whole length of the document or whatever DIV it is contained within (grouped with the header 2 text).
text-indent: 15px;
This indents our h2 text 15 pixels from the left of our web page. This makes it a bit easier to read.
So view your page now and you should have it coming along well so far. Lets move on to styling our paragraph text.
Styling the Paragraph text
Now we are almost done. Lets stylize the text underneath our h2. This can be define as a simple p. So create a new CSS class called p. We want our paragraph text to indent even further then the h2 text. Lets keep the text black, but change the font family, and size as well. Copy and paste this CSS:
Code:
p{
font-family: Verdana, Geneva, sans-serif;
font-size: 11px;
text-indent: 20px;
color: #000;
}font-family: Verdana, Geneva, sans-serif;
This changes our font family selection to Verdana, if not supported by a browser, then Geneva, and so on.
text-indent: 20px;
We indented our text again, but this time 20 pixels instead of 15.
Set your <p></p> tags around the paragraph text. Save your documents (HTML AND CSS) and preview your web page. There it is! Styled and ready to go!
The possibilities are endless and don't forget they're are so many more properties and values you can assign to your text. Try different color combination's and font size, don't be scared to get down and dirty!
Attached are the files that go along with this tutorial:
index.html
css.css
readme.html
Download them if you are confused or like to work along with them!
Download: http://rapidshare.com/files/302557327/C ... l.rar.html
