Mining the SitePoint CSS Reference

Share this article

Most of us who know CSS are self taught. The problem with teaching yourself is that you spend most of your time learning only the stuff you’ll need every day, leaving little holes in your knowledge — dim and dusty corners inhabited by obscure facts you rarely use, but may be useful to know.

While editing the SitePoint CSS Reference I came across many valuable nuggets of CSS knowledge; things I only partially understood or was completely unaware of. Here are a few examples.

Terminology: Rule V Declaration

In CSS, the term rule is often misused. Sometimes you’ll see the following referred to as a rule:

padding: 1em;

It is, however, a declaration. Here is a CSS rule:

body {
  padding: 1em;
  background-color: #fff;
}

A declaration specifies a value for a single property. A rule can contain one or more declarations in a block that is preceded by a selector.

Percentage Values for Top or Bottom padding or margin

If you specify a percentage value for top or bottom padding or margin, the percentage value represents a percentage of the width of the containing block and not its height, as you might expect.

Multiple Values for text-decoration

Did you know that the text-decoration property can take multiple space-separated values? For example you can do this:

a:hover, a:focus {
  text-decoration: underline overline;
}

A Length or Percentage Value for vertical-align

When used on inline boxes (not table cells), the vertical-align property can take a length or percentage value. The effect is to raise or lower the position of the inline element in relation to its line box. A percentage value represents a percentage of the element’s line-height.

Percentage Values for background-position

If you have ever wondered why your background image started acting crazy when using percentage values for background-position then you may not have been aware of how percentage values actually work with the property. A percentage value refers to both a position inside the element as well as a position within the image. A background-position set to 50% from the top of an element will place the point in the background image that is 50% of the height of the image at a position that is 50% of the height of the element.

That’s seems normal because it effectively centers the image within the element. But, when you use unusual percentage values like 66%, the position of the image seems to veer, unexpectedly, all over the place. Alex has written an excellent blog post about the background-position property that explains the behavior.

table-layout and Performance

The table-layout property allows you to specify that the fixed layout algorithm should be used by the browser to calculate column and table widths. In the default table layout algorithm column widths are influenced by the contents of the cells, even if you specify a width. You might say that specifying a width in this situation is more like a guideline than an actual rule.

You are able to specify that the fixed layout algorithm should be used by setting table-layout to the value: fixed. Using this algorithm, the browser will ignore the contents of the cells and use the available width specifications to calculate the widths of the table columns, even if the content doesn’t fit. You can read more about it in the Table Formatting topic in the reference.

The benefit of the fixed table layout is better performance, especially for large tables with many columns. If you have a large table, and can safely specify the column widths, using table-layout: fixed; will enable the browser to display the table faster.

Frequently Asked Questions about Mining the SitePoint CSS Reference

What is the SitePoint CSS Reference?

The SitePoint CSS Reference is a comprehensive guide that provides detailed information about CSS (Cascading Style Sheets). It includes definitions of CSS properties, values, selectors, and at-rules, along with examples and browser compatibility information. This reference is designed to help both beginners and experienced developers understand and use CSS effectively in their web design and development projects.

How can I use the SitePoint CSS Reference for mining CSS?

The SitePoint CSS Reference can be used as a valuable resource for mining CSS. It provides a wealth of information about CSS properties, values, selectors, and at-rules. You can use this reference to learn about different CSS elements, understand how they work, and see examples of how they can be used in real-world scenarios. This can help you to develop a deeper understanding of CSS and improve your web design and development skills.

What are the benefits of using the SitePoint CSS Reference?

The SitePoint CSS Reference offers several benefits. It provides a comprehensive guide to CSS, making it a valuable resource for both beginners and experienced developers. It includes detailed information about CSS properties, values, selectors, and at-rules, along with examples and browser compatibility information. This can help you to understand and use CSS more effectively, improving your web design and development skills.

How does the SitePoint CSS Reference compare to other CSS references?

The SitePoint CSS Reference stands out for its comprehensiveness and detail. It covers a wide range of CSS elements, providing detailed information about each one, along with examples and browser compatibility information. This makes it a valuable resource for both beginners and experienced developers. While other CSS references may also provide useful information, the SitePoint CSS Reference offers a more in-depth and comprehensive guide to CSS.

Can I use the SitePoint CSS Reference to learn about CSS?

Yes, the SitePoint CSS Reference is an excellent resource for learning about CSS. It provides detailed information about CSS properties, values, selectors, and at-rules, along with examples and browser compatibility information. This can help you to understand how CSS works and how to use it effectively in your web design and development projects.

Is the SitePoint CSS Reference up-to-date?

The SitePoint CSS Reference is regularly updated to include the latest CSS elements and features. This ensures that the information provided is current and relevant, making it a reliable resource for learning about CSS.

How can I use the SitePoint CSS Reference to improve my web design and development skills?

The SitePoint CSS Reference can be used as a learning tool to improve your web design and development skills. It provides detailed information about CSS properties, values, selectors, and at-rules, along with examples and browser compatibility information. By studying this reference, you can develop a deeper understanding of CSS and learn how to use it more effectively in your projects.

What is the format of the SitePoint CSS Reference?

The SitePoint CSS Reference is presented in a user-friendly format that makes it easy to navigate and understand. It includes definitions of CSS properties, values, selectors, and at-rules, along with examples and browser compatibility information. Each CSS element is presented in a separate section, making it easy to find the information you need.

Can I use the SitePoint CSS Reference as a reference while working on my projects?

Yes, the SitePoint CSS Reference is designed to be used as a reference while working on your web design and development projects. It provides detailed information about CSS properties, values, selectors, and at-rules, along with examples and browser compatibility information. This can help you to understand how to use CSS effectively in your projects.

Is the SitePoint CSS Reference free to use?

Yes, the SitePoint CSS Reference is free to use. It is available online and can be accessed by anyone interested in learning about CSS. This makes it a valuable resource for both beginners and experienced developers.

Andrew TetlawAndrew Tetlaw
View Author

iOS Developer, sometimes web developer and Technical Editor.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week