65% off at FatCow!
iPage Hosting
1&1 Hosting $6.99/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
To start off our understanding of cascading style sheets, we're going to use a special line of CSS code that does something HTML alone could never do right… we're going to indent every paragraph automatically.
Here's the CSS code:
p { text-indent: 3em; }
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!
As you can imagine, in its current form, the code does not but display p { text-indent: 3em; } on the screen instead of changing the way the paragraph tag behaves. We have several choices to implement this as an actual style, all of which are covered in this chapter:
- 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
Writing inline style inside each tag is one of the worst ways to design a CSS page, although there are a few rare circumstances where it may be appropriate. But to know CSS, you need to know how to do it, and it will also help you understand how the CSS system works.
In our example, p is the selector, that is, what is selected to follow your chosen style. What the web browser understands is that when it sees the tag p, before writing any content, it needs to indent the text 3em. (1 em is a size for laying out glyphs in print... the important thing to understand about 3em is that 3em is about 5 spaces, the typical indentation choice). text-indent is a property, and 3em is the value of that property.
All definitions in CSS follow this format:
selector { property: value; }
You can also include multiple properties and values for a single selector, merely separate them with a ;. If we wanted the paragraph text to be green, we could add color: green; after the text-indent: 3em;.To write inline, we can start with <p> </p>, the normal surroundings of a paragraph. Then, in the opening <p> tag, we'll add special code to say we want a style, merely <p style="">. Then, inside the quotes, we'll add all the properties and values we want this specific paragraph tag to have. So we'll make ours
<p style="text-indent: 3em;"> </p>
This works just fine, as you can see below, however, we certainly do not want to write that for every paragraph we want to indent!
This paragraph is indented at
the very beginning by using an inline style.
| < Intro | > continue to Ch. 2 part 2 |
The Original $3.15/mo. FatCow Plan - Unlimited Disk Space, Unlimited Transfer, Unlimited E-mails & Site building tools.
iPage Hosting
1&1 Hosting $6.99/mo
Free Domain Name If you Order Today!