CSS Id and Class

8/12/2019 CSS Id and Class

1/2


w3schools.com/css/css_id_class.asp 1/2

HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOU

Get Certified

Study Web Technologiesand get a diplomaat w3schools.com

SHARE THIS PAGE

Like 76k

CSSBasic

CSS HOME

CSS Introduction

CSS Syntax

CSS Id & Class

CSS How To

CSSStyling

Styling Backgrounds

Styling Text

Styling Fonts

Styling Links

Styling Lists

Styling Tables

CSSBox Model

CSS Box Model

CSS Border

CSS Outline

CSS Margin

CSS Padding

CSSAdvanced

CSS Grouping/Nesting

CSS Dimension

CSSDisplay

CSS Pos itioning

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

CSSExamples

CSS Examples

CSS Quiz

CSS Certificate

CSSReferences

CSS Reference

CSS Selectors

CSS Reference Aural

CSS Web Safe Fonts

CSS Units

CSS Colors

CSS Color Values

CSS Color Names

CSS Color HEX

Previous Next Chapter

Previous Next Chapter

CSS Idand Class

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".

The id Selector

The id selector is used to specify a s tyle 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 e lement w ith id="para1":

Example

#para1

{

text-align:center;

color:red;

}

Try it yourself

Do NOTstart a n ID name with a number! It will not work in Mozilla/Firefox.

The class Selector

The class se lector is used to spe cify a style for a group o f 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 w ith a "."

In the example be low, all HTML elements w ith class="center" w ill be center-aligned:

Example

.center {text-align:center;}

Try it yourself

You can also specify that only specific HTML elements should be affected by a class.

In the example be low, all p elements with class="center" will be center-aligned:

Example

p.center {text-align:center;}

Try it yourself

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

WEB HOSTING

Best Web Hosting

eUK Web Hosting

UK Reseller Hosting

Domain, Hosting & Emai

WEB BUILDING

XML Editor - Free Trial!

FREE Website BUILDER

FREE Website C reator

Best Website Templates

STATISTICS

Browser Statistics

OS Statistics

Display Statistics

Search w3schools.com:

Select Language
http://w3schools.com/cssref/css_colorsfull.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/default.asphttp://adclick.g.doubleclick.net/aclk?sa=L&ai=BtqC8ClX9UZLiFMPKigfszICoAY_fz4gDAAAAEAEg5-j6ATgAWI_--Y1IYOXC5IOkDrIBDXczc2Nob29scy5jb226AQlnZnBfaW1hZ2XIAQnaASlodHRwOi8vdzNzY2hvb2xzLmNvbS9jc3MvY3NzX2lkX2NsYXNzLmFzcKkC6BjGZZyahj7AAgLgAgDqAhovMTY4MzMxNzUvVG9wTGVmdFJlY3RhbmdsZfgCgdIekAOaCJgDyAaoAwHQBJBO4AQBoAYW&num=0&sig=AOD64_2t7PAvLgFkCVW72gPO38gYk6dWWg&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://void%280%29/http://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://www.dreamtemplate.com/?ref=w3txtfreehttp://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink2_400http://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink1_400Html&embed_tags=camp&utm_camp=hOUdCO-AmAMQm__j8AMhttp://www.altova.com/ref/?s=w3s_text2&q=xmlspyhttp://www.webhosting.uk.com/cpanel-hosting.phphttp://www.heartinternet.co.uk/http://www.eukhost.com/http://www.lunarpages.com/id/w3schools/goto/w3schoolshttp://w3schools.com/css/tryit.asp?filename=trycss_syntax_element_classhttp://w3schools.com/css/tryit.asp?filename=trycss_syntax_classhttp://w3schools.com/css/tryit.asp?filename=trycss_syntax_idhttp://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/cssref/css_colorsfull.asphttp://w3schools.com/cssref/css_colornames.asphttp://w3schools.com/cssref/css_colors_legal.asphttp://w3schools.com/cssref/css_colors.asphttp://w3schools.com/cssref/css_units.asphttp://w3schools.com/cssref/css_websafe_fonts.asphttp://w3schools.com/cssref/css_ref_aural.asphttp://w3schools.com/cssref/css_selectors.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/css/css_exam.asphttp://w3schools.com/css/css_quiz.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/css/css_summary.asphttp://w3schools.com/css/css_attribute_selectors.asphttp://w3schools.com/css/css_mediatypes.asphttp://w3schools.com/css/css_image_sprites.asphttp://w3schools.com/css/css_image_transparency.asphttp://w3schools.com/css/css_image_gallery.asphttp://w3schools.com/css/css_navbar.asphttp://w3schools.com/css/css_pseudo_elements.asphttp://w3schools.com/css/css_pseudo_classes.asphttp://w3schools.com/css/css_align.asphttp://w3schools.com/css/css_float.asphttp://w3schools.com/css/css_positioning.asphttp://w3schools.com/css/css_display_visibility.asphttp://w3schools.com/css/css_dimension.asphttp://w3schools.com/css/css_grouping_nesting.asphttp://w3schools.com/css/css_padding.asphttp://w3schools.com/css/css_margin.asphttp://w3schools.com/css/css_outline.asphttp://w3schools.com/css/css_border.asphttp://w3schools.com/css/css_boxmodel.asphttp://w3schools.com/css/css_table.asphttp://w3schools.com/css/css_list.asphttp://w3schools.com/css/css_link.asphttp://w3schools.com/css/css_font.asphttp://w3schools.com/css/css_text.asphttp://w3schools.com/css/css_background.asphttp://w3schools.com/css/css_howto.asphttp://w3schools.com/css/css_id_class.asphttp://w3schools.com/css/css_syntax.asphttp://w3schools.com/css/css_intro.asphttp://w3schools.com/css/default.asphttp://www.stumbleupon.com/submit?url=http://www.w3schools.com/css/css_id_class.asp%26title%3DCSS%20Id%20and%20Classhttp://digg.com/submit?url=http://www.w3schools.com/css/css_id_class.asp&title=CSS%20Id%20and%20Classhttp://www.reddit.com/submit?url=http://www.w3schools.com/css/css_id_class.asphttp://delicious.com/save?v=5&noui&jump=close&url=http://www.w3schools.com/css/css_id_class.asp&title=CSS%20Id%20and%20Classmailto:?&subject=CSS%20Id%20and%20Class&body=Take%20a%20look%20at%20this%20page%20at%20W3Schools.com:%20http://www.w3schools.com/css/css_id_class.asphttp://twitter.com/home?status=Currently%20reading%20http://www.w3schools.com/css/css_id_class.asphttp://www.facebook.com/sharer.php?u=http://www.w3schools.com/css/css_id_class.asphttp://adclick.g.doubleclick.net/aclk?sa=L&ai=BtqC8ClX9UZLiFMPKigfszICoAY_fz4gDAAAAEAEg5-j6ATgAWI_--Y1IYOXC5IOkDrIBDXczc2Nob29scy5jb226AQlnZnBfaW1hZ2XIAQnaASlodHRwOi8vdzNzY2hvb2xzLmNvbS9jc3MvY3NzX2lkX2NsYXNzLmFzcKkC6BjGZZyahj7AAgLgAgDqAhovMTY4MzMxNzUvVG9wTGVmdFJlY3RhbmdsZfgCgdIekAOaCJgDyAaoAwHQBJBO4AQBoAYW&num=0&sig=AOD64_2t7PAvLgFkCVW72gPO38gYk6dWWg&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/sitemap/default.asp#exampleshttp://w3schools.com/sitemap/default.asp#referenceshttp://w3schools.com/sitemap/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/default.asphttp://w3schools.com/default.asphttp://www.w3schools.com/


2/2


w3schools.com/css/css_id_class.asp 2/2

REPORT ERROR | HOME | TO P | PRINT | FORUM | ABOUT | ADVERTISE WITH US

Top 10 Tutorials

HTML Tutorial

HTML5 Tutorial

CSS Tutorial

CSS3 Tutorial

JavaScript Tutorial

jQuery Tutorial

SQL Tutorial

PHP Tutorial

ASP.NET Tutorial

XML Tutorial

Top 10 References

HTML/HTML5 Reference

CSS 1,2,3 Reference

CSS 3 Browser Support

JavaScript

HTML DOM

XML DOM

PHP Reference

jQuery Reference

ASP.NET Reference

HTML Colors

Examples

HTML Examples

CSS 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

CSS Quiz

JavaScript Quiz

jQuery Quiz

XML Quiz

ASP Quiz

PHP Quiz

SQL Quiz

Color Picker

Statistics

Browser Statistics

Browser OS

Browser Display

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.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.
http://w3schools.com/about/about_copyright.asphttp://w3schools.com/about/about_privacy.asphttp://w3schools.com/about/about_copyright.asphttp://w3schools.com/browsers/browsers_display.asphttp://w3schools.com/browsers/browsers_os.asphttp://w3schools.com/browsers/browsers_stats.asphttp://w3schools.com/tags/ref_colorpicker.asphttp://w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://w3schools.com/svg/svg_examples.asphttp://w3schools.com/asp/asp_examples.asphttp://w3schools.com/aspnet/webpages_examples.asphttp://w3schools.com/aspnet/aspnet_examples.asphttp://w3schools.com/ajax/ajax_examples.asphttp://w3schools.com/dom/dom_examples.asphttp://w3schools.com/htmldom/dom_examples.asphttp://w3schools.com/js/js_examples.asphttp://w3schools.com/xml/xml_examples.asphttp://w3schools.com/css/css_examples.asphttp://w3schools.com/html/html_examples.asphttp://w3schools.com/tags/ref_colornames.asphttp://w3schools.com/aspnet/webpages_ref_classes.asphttp://w3schools.com/jquery/jquery_ref_selectors.asphttp://w3schools.com/php/php_ref_array.asphttp://w3schools.com/dom/dom_nodetype.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/jsref/default.asphttp://w3schools.com/cssref/css3_browsersupport.asphttp://w3schools.com/cssref/default.asphttp://w3schools.com/tags/default.asphttp://w3schools.com/xml/default.asphttp://w3schools.com/aspnet/default.asphttp://w3schools.com/php/default.asphttp://w3schools.com/sql/default.asphttp://w3schools.com/jquery/default.asphttp://w3schools.com/js/default.asphttp://w3schools.com/css3/default.asphttp://w3schools.com/css/default.asphttp://w3schools.com/html/html5_intro.asphttp://w3schools.com/html/default.asphttp://w3schools.com/about/about_advert.asphttp://w3schools.com/about/default.asphttp://w3schools.com/forum/default.asphttp://w3schools.com/css/css_id_class.asp?output=printhttp://w3schools.com/css/css_id_class.asp#tophttp://w3schools.com/default.asphttp://w3schools.com/css/css_id_class.asphttp://www.w3schools.com/

Documents

CSS Id and Class