Cascading Style Sheets

By Jennifer Kyrnin

Cascading Style Sheets or CSS is a great way to change the look and feel of your site. And styles, such as XSLT, are how XML is presented.

Articles by Date | Articles by Topic

5 Reasons to Learn CSS
CSS or Cascading Style Sheets is an important part of Web design. By learning CSS you gain control over how your pages look and can create much fancier pages than with just plain HTML. If you use pre-built templates, knowing CSS will allow you to tweak the page designs to fit your business more effectively. There are lots of great reasons to learn CSS.

Absolute vs. Relative - Explaining CSS Positioning
Positioning elements with CSS can be very challenging, as there is more to it than just tacking elements to the page. One of the most confusing parts is the concept of absolute and relative positioning and why you need this propery to achieve CSS positioning.

Adding Space to Web Page Text
Adding white space to HTML used to be fairly difficult, but now with CSS it's a lot easier to add spaces around objects, next to elements, and inside your pages. These CSS properties help you with indenting, outdenting, letter spacing, word spacing, line height, and white space.

Advanced CSS
Get the most out of your cascading style sheets. Learn how to use font and text properties and change the look of your HTML and XML.

Aural Style Sheets
Aural style sheets specify how your Web page will sound to customers who use audio browsers - especially for customers who are disabled and use assistive browsers for accessibility.

Avoid Inline Styles for CSS
Once you've learned the basics of CSS it can be tempting to do things that ultimately make your CSS harder to maintain and use. But if you follow best practices for CSS, you'll have Web pages that are accessible and easier to maintain. One of the basic best practices for CSS is to not use inline styles.

Beginning Cascading Style Sheets
CSS can help you control the look and feel of your site, with ease.

Block Web Page Printing
Use CSS to prevent your Web pages from being printed. This technique relies on advanced CSS attributes that some browsers don't support. But in general, you can use this method to make it difficult for people to print your Web pages.

Book Review: CSS Pocket Reference by Eric A. Meyer
If you're looking for a CSS book you can carry with you all the time, this is the perfect book, but don't rely on it as your only CSS reference unless you're Eric A. Meyers yourself.

Box Elements
Box elements or block-level elements can be difficult to understand as they have different properties than standard in-line elements. Some commonly used box elements are p, div, and h1.

Box Model Hack
The CSS box model has very specific rules for how wide a box should be when a width is applied and padding, borders, and margins are applied. However Internet Explorer doesn't follow these rules. So we need a hack to make boxes in CSS the same width or height (whichever is defined) in Internet Explorer as in other browsers.

Build a Master Stylesheet
If one of your goals in creating a Web page is to make it look as close as possible across browsers, then the first thing you should do is create a master stylesheet to remove default browser styling. That way, when you build your designs with your design stylesheets, you'll be starting from a clean palette.

Change is Good - It's Time to Give Up Your Table-Based Designs
It's time to break your old habits and admit that using tables for layout is outmoded and lazy. It's time to move on to CSS layouts, as your excuses just won't hold water for much longer, and why keep bailing when you could join the rest of us at the helm!

Changing Font Attributes
Changing the fonts on your page is simple. There are many ways to do it, and CSS is the most up-to-date method.

Common Problems Using CSS Descendant Selectors
Descendant CSS selectors are getting much more popular in CSS style sheets because they give you a lot more control over precisely which elements you want to style. Add to that that child selectors and sibling selectors weren't widely supported until recently, and that adds to their popularity. But descendant selectors often select more than what you intend - with strange results.

Create a Pull Quote with HTML and CSS
Pull quotes can make your Web page content look more literary. A pull quote is something you see in magazines - where a short part of the content is pulled out and enlarged to attract attention to the content. You can make basic pull quotes with the blockquote element, but with CSS you can make it even more interesting.

CSS 2 Selectors
CSS 2 selectors extend the reach of CSS selectors to allow you more power and control over what you can style in your documents. Once you understand CSS 2 selectors you'll have more wildcards and depth of styles for your cascading style sheets.

CSS 3 Opacity
Opacity is a method of making elements transparent in CSS 3. It is not supported in all browsers, but there are ways to get around it in the browsers that don't support it.

CSS 3 Selectors That Work Right Now
CSS 3 is not yet complete, but there are some selectors already available that you can use to help improve your documents destined for a Mozilla/Firefox audience. CSS 3 selectors give you a lot more flexibility and power with your Web documents.

CSS Border Styles
Use CSS to change the style of borders around your elements.

CSS and Bulleted Lists
Learn how to get your unordered and Bulleted lists to look as you want them to.

CSS Cheat Sheet
When you're starting a Web page from scratch, there are some simple styles that you should define right away for your designs. With this sample style sheet and CSS cheat sheet, you can make sure you get the basic styles defined every time so that you're spending your time creating the custom styles that make your design unique.

CSS Cheat Sheets
These cheat sheets will help you learn to use CSS both for basic styles and to create great layouts for your Web pages. Free CSS cheat sheets for you to download and print out.

CSS Drop Shadows
Learn how to write CSS drop shadows without using any images. It's even possible to create drop shadows on text, but currently not in a standards-compliant or accessible way.

CSS Editing Software: Which One is Right for You?
If you're looking to find the right CSS editing software to meet your needs you should take this questionairre. After just a few short questions, you'll have a list of some of the best CSS editing software tools available to meet your needs and your budget.

CSS FAQ - Frequently Asked Questions About Cascading Style Sheets
There are many things that you need to know to learn to write Cascading Style Sheets. This FAQ will help answer some of the more common questions about CSS.

CSS Inheritance
CSS inheritance is what defines how styles will be applied to child elements in a document. Inheritance in CSS allows the Web designer to define one set of styles for a top-level, parent element and have child elements beneath it carry the same styles, without explicitly calling them out.

CSS Initial Caps
Learn how to use CSS to create fancy initial caps for your paragraphs. There is even a simple image replacement technique to use a graphical image for your initial cap.

CSS Media Types Create Print-Friendly Pages
Learn how easy it is to use Cascading Style Sheets (CSS) media types to define a printer-friendly page without actually building one.

CSS Outline Styles
The CSS 2 outline property is different from the border property in several ways. Primarily in that they do not take up space and they may be non-rectangular.

CSS Positioning
Use Cascading Style Sheets to position your HTML elements precisely where you want them.

CSS Selectors
CSS selectors are the basics of cascading style sheets. Once you understand CSS 1 selectors you'll be able to select many of the more common elements and situations to create a well-styled document.

CSS Specificity
CSS specificity is the way that Web browsers determine how two or more competing rules will apply in a given situation. If two CSS rules could apply to the same property, one will be more specific and so it will win over the other.

CSS Step By Step
Learn how to use inline styles, stylesheets in the header, and external stylesheets.

CSS Styles and Languages
When working with Web pages, you need to be aware of both the language your Web site is written in and the language encoding used by your customers. CSS can help affect the style of your text and determine the direction and how it works within Unicode.

CSS Workflow - How to Start Work on a CSS Web Page
CSS workflows take into account both the needs of the designer and the needs of the language being used. CSS can be tricky even with the best tools, but if your workflow for creating a new Web page (or modifying an existing one) is consistent you'll create better pages and be faster at it.

CSS2 Generated Content
Sometimes you don't want content to be included in the document tree for some reason. Now, CSS2 comes with a way to include that content.

CSS2 vs CSS1 - What's The Difference?
What is the difference between CSS2 and CSS1? Cascading Style Sheets, level 2 offers many new properties and methods to control the look and feel of your documents in various different settings - not just Web pages.

Designing for IE - Design for Firefox First
It is often very difficult to design a Web site when you need it to look the same in both Internet Explorer and Firefox or Safari. The trick is to start with a different browser than you're probably used to starting with - design for Firefox first.

The Difference Between CSS and XSLT
Not all style sheets are created equal. CSS and XSLT have two very different roles.

Displaying Stylesheets Dynamically
Learn how to use Dynamic HTML to use stylesheets that take advantage of the browser.

Divitis - The Habit of Using Divs for Everything in CSS Layouts
One of the most common mistakes a beginning CSS layout Web designer will make is to put everything in divs. Sometimes even down to the paragraph level. While this might make things easier to think about, it's not semantic markup, and it ends up being harder to maintain, as it's impossible to look at the code and know immediately what it's supposed to be.

External Style Sheets
External style sheets (CSS) allow you to use one style sheet on multiple Web pages - so when you change the look for your site, you chage the CSS in one location.

Font Style - Italics and Emphasis in Web Typography
The style of a font is whether it is upright or slanted. Most people think of the font style as italics.

Font Weight - Boldness and Lightness in Web Typography
The weight of a font is how dark or light it appears. This also refers to the boldness of a font face.

<font> vs. CSS
The font tag has been deprecated in favor of Cascading Style Sheets. Find out how to do all the same things as the font tag, and more with CSS.

"Framed" Pages without Frames
CSS positioning is a great way to create framed pages without using frames. CSS allows you to position your HTML elements including making it look like a frame.

How can I create a variable-width container without a table?
The display: table; CSS property is not supported in IE. This means that the only way to get the look of a table with CSS is to use a table.

How Do you Stretch a Background Image in a Web Page?
Stretching a background image seems like something that would be fairly easy to do, but until CSS 3 properties are more widely supported, we have to use a workaround.

How Should My XML Look?
XML is not a language of display, so if you write XML documents, you have to use a style sheet language to get them to display properly on the Web.

How to Avoid Deprecated HTML
It's one thing to be told to use CSS in place of deprecated HTML, but if you don't know what to use it can be difficult. This article will show you how to use CSS in place of those deprecated tags.

How to Build a 3-Column Layout in CSS - Step-by-Step
CSS layout requires that you think of your Web site layout as a whole, and then take the pieces and put them together. Use this tutorial to go from a simple wire-frame of a basic 3-column layout all the way to a Web page ready for content to be included.

How to Build an Internal Style Sheet
Learn how to create and use external style sheets on your site.

How to Style a Tag Cloud
The styles for a tag cloud aren't that difficult to master, but once you understand them, you can use them to create a tag cloud of anything on your site that is measurable.

Hiding Your Cascading Style Sheets
When you use CSS to style your Web pages you may notice that there are certain properties that don't work as you expect in all browsers. The most common way to deal with that is to write browser-specific cascading style sheets and then use JavaScript to browswer-sniff. But you can also use bugs in these same browsers to hide your style sheets from various browsers.

Illustrated Box Model
What are the parts of the CSS box model. Learn about how the different parts of the CSS box model work and how they interact with one another.

Make Fancy Headings with CSS
Plain HTML headings are ugly. There's no getting around it. H1 is big, bold, and ugly, and h2 isn't much better. H3 isn't so bad, but since it's so close to bold it's kinda pointless, and h4, well, that really is bold. H5 and H6 are typically too small to read. So why use headings? Well, search engines like them. And with CSS you can make them look as pretty as you please with text styles, borders, and even images.

Make Zoom Buttons for Your Web Pages
Learn how to use CSS and a stylesheet switcher to create CSS zoom buttons for your Web pages so that people can choose a font size that meets their needs. CSS zoom buttons are found on more and more Web pages to let customers choose the font size they want.

Making Web Columns Appear to Be the Same Height
When building CSS designs you may find that the columns end up all different heights, which can look bad. But there is a way to fake it so that the columns appear to all end at the same place.

Organizing Your CSS Files
Writing a CSS stylesheet is often just a matter of slapping all your styles into a document so that your pages look okay. But if you organize your stylesheet, your pages will be more easily maintained in the long run.

Playing with BLOCKQUOTE and CSS
When you use the blockquote tag it can result in pretty boring looking quotations. But if you use Cascading Style Sheets, you can dress up your quotations to get blockquotes that pop on your Web page.

Playing with the Cursor
Using the CSS cursor property you can change the cursor that displays on your Web pages. This can result in some interesting effects if you do it well. Learn how to change your cursors using CSS.

Playing with Lists
There are many attributes of lists that you might be unaware of that allow you to create more flexible lists.

Rounded Corners Using CSS and No Images
Rounded corners on boxes is a popular way to make CSS designs look less boxy, but the most common method requires a large amound of images which can drastically increase the download time for your pages. This method uses stripes and inline elements to get the effect of rounded corners.

Safe CSS - Cascading Style Sheets For Most Browsers
Safe CSS properties are cascading style sheets properties that will display in most browsers.

Scrollbar Colors
Using CSS to change the scrollbar colors in Internet Explorer or Konqueror is not legal XHTML, but it can be interesting. Learn how to prevent other designers from changing your browser settings. And also learn how to change the settings of your readers.

Simple Table Styles
Tables can be styled using CSS, but there are a few tricks you need to use to make sure they appear as you want them to. This article takes you through the basics of table styles to adding dynamic table row highlighting.

Small Caps - A Font Variant
Fonts vary in either small caps or regular. You use the font-variant style property to set the font variant.

The SPAN and DIV Tags
The span and div tags are often used with style sheets to create areas of the site that are defined by the styles.

Styles that Improve Your Text
CSS provides several properties for modifying your text so that your Web pages look more interesting. Text-decoration, text-transform, and text-shadow are useful properties to understand.

Styling Horizontal Rules with CSS
If you want to divide sections of your HTML, one way to do it is with the HR tag. But this tag can be really ugly if you don't style it. Learn how to use CSS to style your HR tags.

Styling Links with CSS
Don't let your links be boring, create links that are styled just like the rest of your Web pages. And before you think that just means changing the hover color - there's way more to it than that. When you're designing your page, don't forget to design your links.

Stylish Backgrounds
Use CSS style elements to change the backgrounds of your Web pages and elements within them. Set up things like watermarks quickly and easily.

Syntax of the Font Property
The CSS font property has a lot of great features that make it easy to use. Plus CSS 2 adds a bunch of additional features that you might not be aware of.

Tableless Layouts
CSS Positioning helps you create Web pages that have a creative layout without the use of tables. This is often called tableless layout.

The Ten Most Important CSS Tips
Cascading Style Sheets or CSS may seem daunting to beginners, but there are ten simple things you should understand about CSS in order to create style sheets that work and styles that do what you need them to do.

Think INSIDE the Box
Use box properties of CSS to create boxes of text, and affect the layout of your page without tables.

Thinking About Positioning - Using CSS to Layout Your Web Pages
Understanding how to do CSS positioning is a lot different from understanding why you should do it. This article attempts to explain some simple tricks to help you learn to position your Web pages with CSS.

Tips and Tricks Using CSS
The biggest problem with CSS is that it is interpreted differently in every browser. But there are some methods to overcome this, without using JavaScript to create browser detection scripts.

Understanding CSS Float
If you understand how to use the CSS float property, you'll have a lot more control over how your Web pages are laid out and you can more easily join the ranks of CSS designers everywhere.

Using Cascading Style Sheets
Learn the syntax of styles and some of the commonly used attributes.

Using CSS Site Wide
The primary strength of CSS is to make your site consistent. This article shows you how.

Using Points, Pixels, Ems, or Percentages for CSS Fonts
Pixels vs points - deciding what unit of measure to use on Web page style sheets is a hotly contended issue. Ems, pixels, and exs are relative units, while points, picas, inches and milimeters are absolute. Is one better than the other?

Using Style Classes and IDs
You can use CSS across multiple tags or multiple styles across one tag.

What is CSS?
Before you can use Cascading Style Sheets, you need to understand what they are and what they are for.

What is a CSS Shorthand Property?
CSS shorthand style properties allow you to write some CSS properties in a more compact form, saving space, download time, and development time.

What is CSS3?
CSS 3 is the modularization of Cascading Style Sheets to allow additions to the specification as well as limit the properties used in a given situation. With a specification that is modular, additions and changes to that specification become much easier.

What is a Font?
Font families can be hard to understand, especially when trying to develop a decent style sheet for a Web site. Once you understand what the fonts are, you can better use them to style your pages.

What is a User Style Sheet?
User style sheets allow you to control how pages that you visit look. They fix usability issues and can help deal with tags and elements that you might find annoying.

What's the difference between display: hidden and visibility: none?
These properties may seem like they do the same thing, but they actually act differently.

What's the Difference Between @import and link for CSS?
There are two ways to load an external style sheet into your Web pages - @import or link. But why would you use one or the other? This FAQ explores the original purpose of both methods of including style sheets and then explains some of the common reasons for choosing one over the other or using a combination of both.

Why Should I Avoid Tables (for Layout)?
Learn why you should use CSS to position your pages rather than HTML tables.

Why Use @import for External Style Sheets
It used to be that the only reason people used the @import property in CSS style sheets was to block those styles from being seen by browsers like Netscape 4. But now that those browsers are practically unheard of, it might seem like there's no good reason to use @import in your style sheets. But @import does help streamline your CSS and make it easier to manage.

XSL: The Style of XML
Get a quick overview of what XSL is and how it is different from CSS.

XSLT - The Basics
XSLT is more than just a stylesheet language. With it you can transform an XML document into almost any type of text-based document format, from HTML to CDF and more.

Your First Style Sheet
Once you've read this article you'll be surprised you were ever worried about learning CSS.

Z-Index in CSS
Positioning elements with CSS can sometimes result in elements overlapping one another. With z-index you can control what element displays on top, in the middle, and on the bottom.