Basic CSS Tutorials
Yes that's right. You're not finished yet. Learning HTML may be enough to get your web page up and running but if you really want to get things happening and start producing web pages the professional way, you should definitely learn CSS. Yes, I know (*groan*)... More web coding to learn?? But trust me, friend, it will be well worth your while.
The series of tutorials in this section of Iron Spider will walk you through how to get up and running using CSS starting with exactly what it is, exactly why you should use it and the various ways you can implement it in your web pages. This ranges from inserting just a few lines of code in your existing .html files to writing up a full blown external style sheets (.css files) that can be reused to affect multiple web pages at once.
Below is a list of these CSS tutorials. Just click on the headings to be taken to be taken to the full tutorial...
What is CSS?
CSS stands for Cascading Style Sheets. It is a web language —like HTML— which you can use to style your web pages. You can think of CSS as the instructions that tell a web browser how to display your web page whereas HTML is intended to provide instructions on what to display on your web page.
It is not necessary to use CSS as you can style your web page using entirely HTML coding but it is immensely more convenient to use CSS. This is not to mention the fact that CSS can do a lot more with regards to what kinds of bells and whistles you can add to dress up your pages.
Here's an example:
The above words "THIS IS CSS..." with the 3D shadow and light effects is not an image. That's right. It is plain text styled using CSS. You can verify this by clicking and dragging your mouse over the words. As you can see, the cursor turns to a plain text cursor and the words are selectable. If those words were an image, you would not be able to do that.
This is the power of CSS...
Why You Should Use CSS
Back in early days of the world wide web, it was enough to construct a web page using only HTML coding. But today with influx of all new kinds of devices surfing the net, it has become increasingly important to have web page coding separated into two distinct components: content and styles. In this manner, you can take the same basic content and style it according to the device that is accessing the web page. For example, making a web page printer-friendly can be easily accomplished using CSS. The same goes for mobile devices.
So that's what's in it for your viewers.
And what's in it for you as a webmaster?
Lots.
Using CSS will greatly reduce your workload by allowing you to apply styles to multiple pages on your website all at once...
How to Use CSS - An Overview
Alright so you're convinced enough to dive into this CSS thing. How exactly do I do it, you may ask? Where do I start?
This page will walk you through the various methods of using CSS including:
- Inline styles (short lines of CSS inserted into your HTML tags using the
styleattribute) - Embedded style sheets (blocks of CSS code you insert into the
<head>tags of your web page)
and... - External style sheets (separate web files with the .css extension which can be imported in multiple pages)...
Inline Styles
Here we get into detail about the easiest form of CSS coding, inline styles. This is the quick and dirty method of implementing CSS on your web pages and is often used by professional web designers to test and tweak a style to get it to display as intended before committing it to an embedded or external style sheet.
Inline styles are also used for instances where the style is not likely to be repeated and hence it is not worth placing it in the page header or in a separate .css file...
Embedded Style Sheets
Embedded style sheets are blocks of CSS code that you place in the <head> tags of your web page. This CSS code affects that page only and is convenient for styles that are repeated frequently on a single web page but not on others...
External Style Sheets
This is the most powerful form of CSS. External style sheets allow you to insert a simple line of HTML code in the head section of multiple web pages.
This code, which looks something like this:
<link rel="stylesheet" type="text/css" href="styles.css">
...allows you to 'import' your web page styles from a separate .css file. (For example, in the above code, the separate .css file is called styles.css.)
This .css file can then be used to style all the pages on your website if you so desire. All the paragraph styling, all the link color styling, all the whatever for your entire web site can be controlled from a single .css file...
Class Selectors
This page will introduce you to the ability to apply styles to specific HTML elements. Typically you would use the P selector in an embedded or external style sheet to apply styles to all paragraphs on your web page.
For example:
P {font-size: 12px;}
But what if you didn't want to do that? What if instead you only wanted to style some paragraphs, some links, some whatever, while leaving other page elements alone? Well you can do this by using the class attribute in select HTML tags. You then target that class using a class selector in your CSS coding. This page will show you how to do that...
ID Selectors
More specific than a class selector is an id selector. Each ID selector you implement can only be used once on each web page. Why would you want to do this? This page explains...
Combining Selectors
Here's where we'll get a little more advanced and learn how to combine certain CSS selectors to simplify your CSS coding. For example, if you wanted to apply the same style to all P, DIV and BLOCKQUOTE tags in your HTML coding, you can do so grouping those selectors together and then just writing the styles you wish to apply once...
for webmasters
Free Text Editors
Free Graphics Editors
Website Analysis Tools
Free Website Templates
See also:
Best Free Web Hosting
How to Make a Web Page
If you need a .COM web address, you can get one quick and easy at...
| CSS HOME | TOP | NEXT ~> |