8/4/13

CSS Id and Class

Search w3schools.com: Select Language

HOME

HTML

C SS

JAVASC RIPT

JQUERY

XML

ASP.NET

PHP

SQL

MORE...

R EFER ENC ES

EXAMPLES

FO R UM

ABO UT

Get Certified
Study Web Technologies and get a diploma at w3schools.com

SHARE THIS PAGE

Like

76k

CSS Basic
CSS HOME CSS Introduction CSS Syntax CSS Id & Class CSS How To

CSS Id and Class

Previous Next Chapter

WEB HOSTING
Best Web Hosting eUK Web Hosting UK Reseller Hosting Domain, Hosting & Email

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

CSS Styling
Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables

WEB BUILDING

The id Selector
The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":

XML Editor - Free Trial! FREE Website BUILDER FREE Website C reator Best Website Templates

CSS Box Model

CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding

Example
# p a r a 1 { t e x t a l i g n : c e n t e r ; c o l o r : r e d ; }
Try it yourself

STATISTICS
Browser Statistics OS Statistics Display Statistics

CSS Advanced
CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Pseudo-class CSS Pseudo-element CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS Attribute Selectors CSS Summary

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned:

Example
. c e n t e r{ t e x t a l i g n : c e n t e r ; }
Try it yourself You can also specify that only specific HTML elements should be affected by a class. In the example below, all p elements with class="center" will be center-aligned:

CSS Examples
CSS Examples CSS Quiz CSS Certificate

CSS References
CSS Reference CSS Selectors CSS Reference Aural CSS Web Safe Fonts CSS Units CSS Colors CSS Color Values CSS Color Names CSS Color HEX

Example
p . c e n t e r{ t e x t a l i g n : c e n t e r ; }
Try it yourself

Do NOT start a class name with a number! This is only supported in Internet Explorer.

Previous

Next Chapter

w3schools.com/css/css_id_class.asp

1/2

8/4/13
Top 10 Tutorials
HTML Tutorial HTML5 Tutorial C SS Tutorial C SS3 Tutorial JavaScript Tutorial jQuery Tutorial SQL Tutorial PHP Tutorial ASP.NET Tutorial XML Tutorial

CSS Id and Class

Top 10 References
HTML/HTML5 Reference C SS 1,2,3 Reference C SS 3 Browser Support JavaScript HTML DOM XML DOM PHP Reference jQuery Reference ASP.NET Reference HTML C olors

Examples
HTML Examples C SS Examples XML Examples JavaScript Examples HTML DOM Examples XML DOM Examples AJAX Examples ASP.NET Examples Razor Examples ASP Examples SVG Examples

Quizzes
HTML Quiz HTML5 Quiz XHTML Quiz C SS Quiz JavaScript Quiz jQuery Quiz XML Quiz ASP Quiz PHP Quiz SQL Quiz

Color Picker

Statistics
Browser Statistics Browser OS Browser Display

RE P O RT E RRO R

HO ME

TO P

P RI N T

FO RU M

A BO U T

A D V E RT I SE WI T H U S

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use and privacy policy. C opyright 1999-2013 by Refsnes Data. All Rights Reserved.

w3schools.com/css/css_id_class.asp

2/2