Complete newbie or old-schooler? The tutorials start here.

xHTML and CSS Glossary – Child Element

An element inside another element. The outer element is called the parent.

A More Coherent Design, Part 2

In the last post, we changed a few colors and added some padding on our practice page, to make it look a little nicer. Now, we’re going to add padding to the main content area.

If you look at the CSS for #header, you’ll see that no width was defined for it. For this reason, it was easy to add padding to it without changing its width, because its width will naturally fill the #header’s available space (which is contained by #container), whether you add padding to #header or not.

However Read the rest of this entry »

A More Coherent Design

Aside from some nifty links in the sidebar, our practice page is still looking pretty drab at this point. Well, let’s finally start making it look a bit nicer, shall we? 🙂

You should know the drill by now, but in case you don’t, open practice1.htm in a browser, and style.css in Crimson Editor. As always, we will be doing our styling in the CSS, so there is no need to open practice1.htm in Crimson. Read the rest of this entry »

More on floats

Open practice1.htm in your browser (either one, doesn’t matter right now), and open style.css in Crimson Editor.

Right now, #content is floated to the left and #links (the sidebar) is floated to the right. What I want you to do now is switch those two around so that the sidebar is on the left and the content is on the right.

Hint: Do NOT change a single thing in practice1.htm. The point of using CSS is to separate content from style, and since layout is part of the style, you need to change this in the CSS. Read the rest of this entry »

CSS Link Hover Effects (aka Rollovers)

You thought this next tutorial was going to deal with lists, didn’t you? Well, what we really did at the end of that last tutorial on styling lists was style the links within that list, which really has nothing to do with the list itself. In this tutorial, I’ll explain how that worked, and then show you how to do image rollovers without javascript. But first, here’s what that list looked like once we put the CSS in…

And here is the CSS we used for that: Read the rest of this entry »

More on Styling Lists

In the previous page of these tutorials, you learned how to account for browser differences when styling lists. Soon, you’ll be able to get more creative when styling lists. Read the rest of this entry »

Creating Lists in xHTML and styling them with CSS

In part 2 of CSS for layout, I had you add a list of links to your practice page. This tutorial will cover how to make a list in xHTML, as well as how to style it with CSS. Read the rest of this entry »

CSS for Layout: Clearing floats

In part 1 of CSS for layout, you learned how to surround each section of your page with a <div>, giving each division its own ID, and then you learned how to style each section by targeting its ID. In part 2, you learned how to “float” one division, allowing the next division to sit beside it to create a sidebar, but the float created a problem. Now you will learn how to solve that problem. Read the rest of this entry »

CSS for Layout – Part 2

Continuing from part 1 of CSS for Layout

Check for browser differences

Open practice1.htm in IE, if it’s not already. While that’s open, also open it in Firefox (right-click on file and choose “open with”). Now look at all those page headings. You may notice that they are all larger in one browser than they are in the other.

To fix that, all that’s needed is a little CSS. Read the rest of this entry »

CSS for Layout – Part 1

Now that you know about divs and ids, let’s get into the real magic of CSS: layout. Read the rest of this entry »

CSS color property (this applies to text)

color is a property all on its own, and it defines the color of text.

Because I have seen the same mistake being made so many times while helping others on message boards, I should note that you can not use font-color or text-color. To define the color of text, you must use color all by itself.

That said, the possible values for color are Read the rest of this entry »

Styling ids with CSS

Previously, you learned how to style xHTML tags with CSS. To define <body>, you used: Read the rest of this entry »

xHTML id attribute

While the same class can be used repetitively within the same page (see my previous article on the <div> tag where I have more than one class="box"), you can only have one occurrence of each id per page. Read the rest of this entry »

xHTML div tag

“div” is short for division or divider, and is mainly used to divide your page into sections. You may have a header section, a main content section, a sidebar section, a footer section, a section for announcements, etc. Read the rest of this entry »

CSS border property

The different “border” properties you can define are:

  • border-width
  • border-style
  • border-color

Read the rest of this entry »

CSS margin and padding properties

I am putting these two together because they share some similarities, and also to demonstrate their differences. Read the rest of this entry »

CSS background property

The different “background” properties you can define are:

  • background-color
  • background-image
  • background-position
  • background-attachment
  • background-repeat

Read the rest of this entry »

CSS font property

The different “font” properties you can define are:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • font-family

Read the rest of this entry »

Styling Class Names with CSS

Previously, you learned how to style xHTML tags with CSS, based on their tag name. In my last article, you learned how to add class names to xHTML tags. Now, you will learn how to target and style those class names with CSS. Read the rest of this entry »

Adding Class Names in xHTML

In the previous tutorial, I showed you how to style xHTML tags with CSS. Now, I will show you how to add “classes” to xHTML tags, so you will be able to fine-tune the styling of your pages. Read the rest of this entry »

CSS Basics

In my previous article, I gave you some CSS to try out without explaining how it works. Now, I’ll explain how it works. Read the rest of this entry »

CSS Primer

Now that you are more comfortable with basic xHTML commands, let’s style that practice page a bit. If you found this page through a search engine or a direct link from another website, or if you’re just not following these tutorials in order as you should be, you can download the practice files here, then close the link I left open as a test. Read the rest of this entry »

Download the Practice Files

Now it’s time for your first test and a little bit of practice. I zipped together a butt-ugly web page, two blank CSS files and an image, then uploaded them so you can download, unzip, and work with them on your computer’s hard drive. Read the rest of this entry »

Absolute, Relative, and Root-relative URLs

To demonstrate the difference between absolute, relative, and root-relative URLs, I’ll use the Crimson Editor image below. Read the rest of this entry »

Basic xHTML Tags

Headings

Headings denote the hierarchy of a page and come in different sizes by default. Imagine an outline for a book, where there would be one big heading for each chapter (web page), a slightly smaller sub-heading for sub-chapters, and even smaller headings for parts within each sub-chapter. Read the rest of this entry »

xHTML Basics

Why xHTML? Why not regular HTML?

Web standards change all the time. HTML is old-school. Obsolete. Gone the way of the dinosaur. xHTML (eXtensible HyperText Markup Language) is up to date and more accurate in the way it displays pages. Read the rest of this entry »

Text Editor

Step 1: Get a decent text editor

Windows comes with Notepad installed, but I recommend the open source (free) program, Crimson Editor, instead. Unlike Notepad, Crimson Editor makes it easier to catch mistakes by color-coding your code, including HTML, XHTML, CSS, PHP, ASP and other coding languages. It also lets you keep multiple files open, search and replace throughout all open files at the same time, save all open files at the same time, remotely edit files that are online, and more.

April 7, 2009 edit: Mac users: Crimson Editor is only available for Windows. My apologies for not realizing this before writing the beginner tutorial series. Please see Read the rest of this entry »

Search Engines and Accessibility

Whether you are new to writing code for web pages or have been writing HTML for years, listen up. The old way of coding pages will hurt your search engine rankings and accessibility. If you are using any <font>, <center>, or any kind of styling tags whatsoever in your HTML or putting your whole page in a <table> with links down the left side, you are really screwing yourself. Read the rest of this entry »

What You See Is not What You Get

Q: Why do I need to code my own web pages? Why can’t I use one of those drag and drop thingies?

A: Well, you can use one of those drag and drop thingies — also known as wysiwyg (what you see is what you get) editors — if you want to, but don’t come crying to me when people run away from your website, screaming. Read the rest of this entry »

xHTML and CSS Glossary – Attribute

“Attribute” applies to xHTML. Attributes come in two parts, the name and the value.

In xHTML, an attribute name/value pair would look something like this:

href="http://google.com"

href is the attribute name, while the link to Google is the attribute value. When used inside an anchor link (<a>), it would look something like this:

<a href="http://google.com">Google</a>

xHTML attribute names are followed by an equal sign (=), and the attribute value must be surrounded by a pair of either single or double quotes.

href='http://google.com' (with the single quotes) would work as well.


← Older posts   Newer posts →