CSS: Tips and Tricks
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.
In this how to, you'll learn how to create a horizontal navigation menu.
When you use CSS to put a border on your
<td>tags, you will notice that you get space between them. In the old days, you would remove that space using the now-deprecated
cellspacingattribute. These days, you do it with the 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.
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-radiusproperties makes rounding the corners on a box easy.
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
:hoverto create rollover effects. Let's look at an example:
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:
The order of the listed background images determines the position of the layer relative to the viewer, akin to the CSS
background-image:url(img1.gif), url(img2.png), url(img3.gif)
z-indexproperty: the first background image is on "top", the next below that, etc.
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.
Inline styles are created by adding the
styleattribute to a tag. As with the
idattributes, almost all elements can take the
styleattribute. (Exceptions include
style.) The value of the
styleattribute 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.
Three properties work together to make borders:
border-width. In addition, each side of an element can also have a different border style. These are indicated by the following properties:
Learn how to use these CSS properties to add a border to an element by following the steps below.
marginproperty 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.
backgroundproperty is used to set the individual properties for background-color,
background-position. Note that order matters (although some browsers may show some leniency). Learn how to use the CSS
backgroundshorthand property in the following steps.
paddingproperty 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.
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+.
Changing text style in CSS is achieved using the
text-decorationproperty is used to add effects to text, such as underlines and line-throughs. The
text-transformproperty is used to change the capitalization of text.
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.
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.
box-shadowproperty, we can attach a drop shadow to an element. In this brief article, we show how.