Free Articles and Tutorials: CSS

This page contains a listing of free articles and tutorials.


CSS

CSS: Tips and Tricks

Here we provide a list of free articles and tutorials of tips and tricks that will make you more effective with CSS.

Read Article

Absolute Positioning with CSS

When elements are positioned absolutely, they are removed from the normal flow. As a result, they do not affect the positioning of subsequent sibling elements. Learn how to use absolute positioning in the following steps.

Read Article

Fixed Positioning with CSS

Elements with fixed positioning stay in the same position in the browser window even when the page is scrolled. It can be used to keep an element (e.g., a navigation menu) on the page at all times. Learn how to use fixed positioning in the following steps.

Read Article

How to Add Inline Styles to CSS

Inline styles are created by adding the style attribute to a tag. As with the class and id attributes, almost all elements can take the style attribute. (Exceptions include html, head, title, meta, script, and style.) The value of the style attribute is a list of one or more property-value pairs separated by semicolons. Learn how to add inline styles to CSS in these six steps.

Read Article

How to Adjust Margins with CSS

The margin property is used to specify the margin around an element. It can be applied to both block and inline elements. Margins can be specified in number of units (e.g., 20px) or in percentage of the width of the containing element. Learn how to adjust margins with CSS below.

Read Article

How to Align Text with CSS

Aligning text in CSS can be achieved using the text-align property or the vertical-align property.

Read Article

How to Apply Padding with CSS

The padding property is used to specify the padding between an element's edges and its content. It can be applied to both block and inline elements. Padding can be specified in number of units (e.g., 20px) or in percentage of the width of the containing element. Learn how to apply padding with CSS below.

Read Article

How to Change Text Style in CSS

Changing text style in CSS is achieved using the text-decoration and text-transform properties. The text-decoration property is used to add effects to text, such as underlines and line-throughs. The text-transform property is used to change the capitalization of text.

Read Article

How to Create a Border with CSS

Three properties work together to make borders: border-style, border-color, and border-width. In addition, each side of an element can also have a different border style. These are indicated by the following properties:

  • border-top
  • border-right
  • border-bottom
  • border-left

Learn how to use these CSS properties to add a border to an element by following the steps below.

Read Article

How to Create a CSS Embedded Style Sheet

Embedded style sheets appear in the style element in the head of an HTML page. Follow these 10 steps to create a CSS embedded style sheet.

Read Article

How to Create a CSS External Style Sheet

External style sheets are created in separate documents with a .css extension. An external style sheet is simply a listing of CSS rules. It cannot contain HTML tags. The <link> tag, which goes in the head of an HTML page, is used to link to an external style sheet. There is no limit to the number of external style sheets a single HTML page can use. Also, external style sheets can be combined with embedded style sheets. Follow these steps to create an external style sheet.

Read Article

How to Create a Drop-Down Menu with CSS

In this how-to, you'll learn how to create a drop-down menu with CSS.

Read Article

How to Create a Fixed-Width Layout with CSS

A "fixed-width" layout is one in which the layout of the page is contained within a wrapper that doesn't adjust its size when the width of the browser changes. In this how to, you'll learn how to create a 2-column fixed-width layout.

Read Article

How to Create a Fluid-Width Layout with CSS

Pages that are designed to use the full width of the browser are often described as having a "fluid" or "liquid" layout. That's because one or more of the columns must be automatically resized according to the size of the browser window. In this how to, you'll learn how to create a fluid-width layout.

Read Article

How to Create a Fly-Out Menu with CSS

In this how to, you'll learn how to create a fly-out menu with CSS.

Read Article

How to Create a Form without Tables Using CSS

By using CSS to apply styles to the form, fieldset, and legend elements, you can layout a form without using tables. Here's how to do it.

Read Article

How to Create a Horizontal Navigation Menu with CSS

In this how to, you'll learn how to create a horizontal navigation menu.

Read Article

How to Create a Vertical Navigation Menu with CSS

In this how-to, you'll learn how to create a vertical navigation menu.

Read Article

How to Create Boxes with Rounded Corners in CSS

Prior to browser support for CSS3, creating boxes with rounded corners required the creative use of background images, borders, and positioning. Thankfully, these days are gone. Today, browsers support CSS3 and its border-radius properties. The border-radius properties makes rounding the corners on a box easy.

Read Article

How to Create CSS Button Links

You can use CSS pseudo-classes to create CSS buttons. Before CSS, you needed images to create links that looked like buttons.

Read Article

How to Create CSS Sprites

A CSS sprite is an image file that contains several graphics used on a web page. By showing different parts of the sprite in different locations, it appears that there are several different images, but they are all contained in a single file, which translates to a single download. In this How-To, you'll learn how to create a grid of images by using a sprite.

Read Article

How to Create Drop Shadows with the box-shadow Property in CSS3

With the box-shadow property, we can attach a drop shadow to an element. In this brief article, we show how.

Read Article

How to Import Style Sheets with @import in CSS

The @import rule in CSS is used to import one style sheet into another.

Read Article

How to Modify Fonts in CSS

In the past, we used the HTML tag to change font family, size, and other attributes. CSS makes it much easier. Learn how to modify font family and font size using CSS in the following steps.

Read Article

How to Remove Spacing Between Table Borders with CSS

When you use CSS to put a border on your <th> and <td> tags, you will notice that you get space between them. In the old days, you would remove that space using the now-deprecated cellspacing attribute. These days, you do it with the CSS border-collapse property.

Read Article

How to Set a Background Image with CSS

You can set background images in CSS using the background-image and several other properties to control the behavior of the image.

Read Article

How to Set Text and Background Color with CSS

The color and background-color properties determine how color is set in CSS.

Read Article

How to Set Text Spacing and Placement in CSS

Text spacing and placement in CSS is controlled using the letter-spacing, word-spacing, line-height, and text-indent properties. Learn how to set text spacing and placement in the following steps.

Read Article

How to Style a Table with CSS

Back before CSS, people used HTML tables to lay out web pages. The rule is the same now as it was then: tables should not be used to lay out pages. They should be used for tabular data, such as financial reports or a meeting agenda. To style tables with CSS, you should first be familiar with HTML table syntax.

Read Article

How to Use CSS Media Queries in Responsive Design

Setting up a slide show to repeat automatically is useful in situations where the audience may view it at different times. You can set up a slide show to repeat automatically in PowerPoint in just five easy steps.

Read Article

How to Use CSS Transitions

The CSS3 transition property defines how an element changes from one state to another. With transition—or the specific properties listed below, for which transition serves as a shorthand—we can stretch out the change on an element's width, background color, or other property over a specified duration. You have to include appropriate vendor prefixes for transitions: -moz- for older version of Firefox, webkit for older versions of Chrome/Safari, and -o- for older versions of Opera. Internet Explorer supports CSS transitions, unprefixed, from version 10+.

Read Article

How to Use CSS with Different Media Types

Styles can be defined for different media. For example, you may want to style a page one way for viewing with a browser and a different way for viewing in print. The media type is defined in the <link> tag for external style sheets and in the <style> tag for embedded style sheets.

Read Article

How to Use Multiple Background Images with CSS

CSS3 offers the ability to include multiple background images for a given element - use a comma-delimited list to specify as many as you like:

background-image:url(img1.gif), url(img2.png), url(img3.gif)
The order of the listed background images determines the position of the layer relative to the viewer, akin to the CSS z-index property: the first background image is on "top", the next below that, etc.

Read Article

How to Use the CSS Background Shorthand Property

The background property is used to set the individual properties for background-color, background-image, background-repeat, background-attachment, and background-position. Note that order matters (although some browsers may show some leniency). Learn how to use the CSS background shorthand property in the following steps.

Read Article

How to Use the CSS Border Shorthand Property

Shorthand properties can take multiple values, allow you to write less code, and provide smaller files for the user to download. Find out how to use the CSS border shorthand property in these steps.

Read Article

How to Use the CSS list-style Shorthand Property

Shorthand properties are CSS properties that can take multiple values, with each value relating to a different regular CSS property. Values in shorthand properties are separated by spaces, as shown below.

Read Article

How to Use the CSS Opacity Property

CSS3's opacity property makes it easy to change the opacity of images, text, <div>s, and other elements. Where before we might have resorted to images with a semitransparent alpha setting, we can now change the opacity via CSS. Even better, we can change opacity more easily with :hover to create rollover effects. Let's look at an example:

Read Article

How to Use the CSS Padding Shorthand Property

Shorthand properties can take multiple values, allow you to write less code, and provide smaller files for the user to download. Find out how to use the CSS padding property as well as the margin property in these steps.

Read Article

How to Use the CSS White-Space Property

The white-space property determines how sequences of whitespace are displayed. You can learn how to use the CSS white-space property in just a few steps.

Read Article

How to Use the CSS Z-index Property

The z-index property specifies the stack level of an element on the page compared to other elements in its same flow. Learn how to use the z-index property in the following steps.

Read Article

Learn the Very Basics of CSS in One MinuteTutorial

You have already learned HTML, and you have heard that Cascading Style Sheets (or CSS) is used for styling pages, but haven’t yet learned CSS. Take a minute to learn the basics (the very basics) of CSS.

Read Article