iPage Hosting
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $4.95/mo
Globat $4.44/mo
Free Domain Name
If you Order Today!
Our CSS Style topics:
CSS Code Tutorial Chapters:
- Introduction
- Basics of CSS
- All About Selectors
- Background and Color
- Fonts and Text
- Links
- Lists
- Margin
- Padding
- Border
- Good CSS Design
- Resources
visit our other tutorials:
web design tutorial
html code tutorial
Basics of using CSS Styles
@import can be used in conjunction with the other methods. Imagine you want 2 pages out of your initial 10 pages to have, in addition to the normal indent, each and every paragraph in blue text. You could write a second style sheet, we'll call it coolblue.css, and inside that sheet you have:
p { color: blue; }
Then, in those 2 special pages, you place the normal CSS link, but you'll add special code, @import, to add the extra color.
<link rel="stylesheet" type="text/css" href="main.css" title="Default">
<style type="text/css">
<!--
@import url(coolblue.css);
--></style>
With the import code, you can mix additional styles with a regular style sheet, without affecting the other sheets. So 2 pages now have blue paragraph text, while the remaining 8 pages do not.
Dave has a
New Course for your iPad!Download HTML and CSS Web Design Basics Right Now! Or Search for "Web Design Basics" in AppStore!
Those are the basics. Let's review the ways you can include a style sheet:
- Write it inline inside each and every tag
- Place a <style> </style> at the beginning of the web page
- Dedicate and link a CSS file and write it inside that file
- use @import to include it as portion of a page's CSS
In this interactive tutorial, you can use either inline or <style> </style> to test out style sheets. (Imagine 100 people working on a main.css on our server at the same time? Who would win?)
I highly recommend that you use the link (and if needed, import) method to develop style sheets for your own web site after you finish our guide.
Ready to test your skills? Use <style> to make all paragraphs have 10 spaces indentation (hint: 6em) and make the text red. Hint: Combine both into one line of code using the ; separator. Remember to create a paragraph in the <body> to see the style in action!
Click here for an answer if you get stuck or you want to see how I did it.
| < Ch. 2 part 2 | > continue to Chapter 3 |
iPage Hosting
Yahoo! Hosting $7.46/mo
1&1 Hosting $6.99/mo
GreenGeeks $6.95/mo
Globat $4.44/mo
Free Domain Name If you Order Today!