Basic CSS
- What is CSS?
- Why You Should Use CSS
- How to Use CSS - An Overview
- Inline Styles
- Embedded Style Sheets
- External Style Sheets
- Class Selectors
- ID Selectors
- Combining Selectors
What is CSS?
THIS IS CSS...
THIS IS CSS...
THIS IS CSS...
THIS IS CSS...
The above words "THIS IS CSS..." is not an image. That's right... You read correctly. Those words are not an image but rather just plain text written in the HTML source code of this web page. To verify this, you can use your mouse pointer to click and drag across those words to select them and then copy and paste them into a text editor. If those words were an image, you wouldn't be able to do this.
So how is this done?...
Why You Should Use CSS
I'm sure a large majority of webmasters got introduced to CSS by doing a search in Google for "remove underlining on hyperlinks". However CSS is much more than just a way of making cool looking web pages. If you're a serious web designer then here's some very practical reasons why you should use CSS...
How to Use CSS - An Overview
Here's how to use CSS in your web pages.
First of all, you are reading this page because you already have some experience with HTML or, at the very least, you know what HTML elements are. If not then you should read my tutorials on Basic HTML.
Alright then, assuming that you've got a web page or two up and running, the deal now is you want to jazz up your act with some fancy CSS tricks, right? Well here's how to do it...
Inline Styles
Using inline styles is the best way to start learning CSS as it applies the styling directly to individual HTML elements using the
style attribute. This is a no-nonsense, self-contained method of applying CSS that is easy to visualize and leaves little room for error and therefore lends itself to experimenting with new CSS properties and values that you are not familiar with. Inline styles are also good for style declarations that you don't use very often and would just ultimately clutter up your embedded or external style sheets for no good reason... Embedded Style Sheets
Using embedded style sheets will allow you to begin unleashing the full power of CSS by enabling you to apply styles to all HTML elements of a particular type on an entire web page. Whereas an inline style will only allow you to address one HTML element at a time, an embedded style sheet will allow you to address multiple HTML elements at once. This is accomplished by using the
style element and a list of CSS rule sets...External Style Sheets
Using external style sheets is the ultimate webmaster's tool in that it allows you to apply formatting to many different web pages at once with a single
.css file. In fact, once you become adept at using style sheets, this will be —and should be— your go-to method of applying CSS...Class Selectors
Now CSS wouldn't be much good if you could only apply styles to ALL the heading tags or ALL the paragraph tags on a web page, now would it? What you really want to do is select which web page components to target while leaving others alone, right?
Well let's welcome into the fold a special CSS selector known as a class...
ID Selectors
ID selectors launch rule sets in embedded or external style sheets that target individual HTML elements. An ID works similar to a class selector except that its style declarations can only be applied to a single HTML element on each web page...
Combining Selectors
Now that you're familiar with how to use selectors in CSS rule sets including type selectors (HTML element names), class selectors and id selectors, we can move on to learning about other kinds of selectors to open up more complex and useful targetting possibilities.
| HOME | TOP | NEXT ~> |
