HTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g.
. The element ...
Tutorials
References
Exercises
Videos
Menu
Login
GetCertified
WebsiteNEW
ProNEW
HTML
CSS
JAVASCRIPT
SQL
PYTHON
PHP
BOOTSTRAP
HOWTO
W3.CSS
JAVA
JQUERY
C
C++
C#
R
React
Darkmode
Darkcode
×
Tutorials
HTMLandCSS
LearnHTML
LearnCSS
LearnRWD
LearnBootstrap
LearnW3.CSS
LearnColors
LearnIcons
LearnGraphics
LearnSVG
LearnCanvas
LearnHowTo
LearnSass
DataAnalytics
LearnAI
LearnMachineLearning
LearnDataScience
LearnNumPy
LearnPandas
LearnSciPy
LearnMatplotlib
LearnStatistics
LearnExcel
XMLTutorials
LearnXML
LearnXMLAJAX
LearnXMLDOM
LearnXMLDTD
LearnXMLSchema
LearnXSLT
LearnXPath
LearnXQuery
JavaScript
LearnJavaScript
LearnjQuery
LearnReact
LearnAngularJS
LearnJSON
LearnAJAX
LearnAppML
LearnW3.JS
Programming
LearnPython
LearnJava
LearnC
LearnC++
LearnC#
LearnR
LearnKotlin
LearnGo
LearnDjango
LearnTypeScript
ServerSide
LearnSQL
LearnMySQL
LearnPHP
LearnASP
LearnNode.js
LearnRaspberryPi
LearnGit
LearnAWSCloud
WebBuilding
CreateaWebsiteNEW
WhereToStart
WebTemplates
WebStatistics
WebCertificates
WebDevelopment
CodeEditor
TestYourTypingSpeed
PlayaCodeGame
CyberSecurity
Accessibility
DataAnalytics
LearnAI
LearnMachineLearning
LearnDataScience
LearnNumPy
LearnPandas
LearnSciPy
LearnMatplotlib
LearnStatistics
LearnExcel
LearnGoogleSheets
XMLTutorials
LearnXML
LearnXMLAJAX
LearnXMLDOM
LearnXMLDTD
LearnXMLSchema
LearnXSLT
LearnXPath
LearnXQuery
×
References
HTML
HTMLTagReference
HTMLBrowserSupport
HTMLEventReference
HTMLColorReference
HTMLAttributeReference
HTMLCanvasReference
HTMLSVGReference
GoogleMapsReference
CSS
CSSReference
CSSBrowserSupport
CSSSelectorReference
Bootstrap3Reference
Bootstrap4Reference
W3.CSSReference
IconReference
SassReference
JavaScript
JavaScriptReference
HTMLDOMReference
jQueryReference
AngularJSReference
AppMLReference
W3.JSReference
Programming
PythonReference
JavaReference
ServerSide
SQLReference
MySQLReference
PHPReference
ASPReference
XML
XMLDOMReference
XMLHttpReference
XSLTReference
XMLSchemaReference
CharacterSets
HTMLCharacterSets
HTMLASCII
HTMLANSI
HTMLWindows-1252
HTMLISO-8859-1
HTMLSymbols
HTMLUTF-8
×
ExercisesandQuizzes
Exercises
HTMLExercises
CSSExercises
JavaScriptExercises
SQLExercises
MySQLExercises
PHPExercises
PythonExercises
NumPyExercises
PandasExercises
SciPyExercises
jQueryExercises
JavaExercises
C++Exercises
C#Exercises
RExercises
KotlinExercises
GoExercises
BootstrapExercises
Bootstrap4Exercises
Bootstrap5Exercises
GitExercises
Quizzes
HTMLQuiz
CSSQuiz
JavaScriptQuiz
SQLQuiz
MySQLQuiz
PHPQuiz
PythonQuiz
NumPyQuiz
PandasQuiz
SciPyQuiz
jQueryQuiz
JavaQuiz
C++Quiz
C#Quiz
RQuiz
KotlinQuiz
XMLQuiz
BootstrapQuiz
Bootstrap4Quiz
Bootstrap5Quiz
CyberSecurityQuiz
AccessibilityQuiz
Courses
HTMLCourse
CSSCourse
JavaScriptCourse
FrontEndCourse
SQLCourse
PHPCourse
PythonCourse
NumPyCourse
PandasCourse
DataAnalyticsCourse
jQueryCourse
JavaCourse
C++Course
C#Course
RCourse
XMLCourse
CyberSecurityCourse
AccessibilityCourse
Certificates
HTMLCertificate
CSSCertificate
JavaScriptCertificate
FrontEndCertificate
SQLCertificate
PHPCertificate
PythonCertificate
DataScienceCertificate
Bootstrap3Certificate
Bootstrap4Certificate
jQueryCertificate
JavaCertificate
C++Certificate
ReactCertificate
XMLCertificate
×
Tutorials
References
Exercises
PaidCourses
Spaces
Videos
Shop
Pro
HTMLTutorial
HTMLHOME
HTMLIntroduction
HTMLEditors
HTMLBasic
HTMLElements
HTMLAttributes
HTMLHeadings
HTMLParagraphs
HTMLStyles
HTMLFormatting
HTMLQuotations
HTMLComments
HTMLColors
Colors
RGB
HEX
HSL
HTMLCSS
HTMLLinks
Links
LinkColors
LinkBookmarks
HTMLImages
Images
ImageMap
BackgroundImages
ThePictureElement
HTMLFavicon
HTMLTables
HTMLTables
TableBorders
TableSizes
TableHeaders
Padding&Spacing
Colspan&Rowspan
TableStyling
TableColgroup
HTMLLists
Lists
UnorderedLists
OrderedLists
OtherLists
HTMLBlock&Inline
HTMLClasses
HTMLId
HTMLIframes
HTMLJavaScript
HTMLFilePaths
HTMLHead
HTMLLayout
HTMLResponsive
HTMLComputercode
HTMLSemantics
HTMLStyleGuide
HTMLEntities
HTMLSymbols
HTMLEmojis
HTMLCharset
HTMLURLEncode
HTMLvs.XHTML
HTMLForms
HTMLForms
HTMLFormAttributes
HTMLFormElements
HTMLInputTypes
HTMLInputAttributes
HTMLInputFormAttributes
HTMLGraphics
HTMLCanvas
HTMLSVG
HTMLMedia
HTMLMedia
HTMLVideo
HTMLAudio
HTMLPlug-ins
HTMLYouTube
HTMLAPIs
HTMLGeolocation
HTMLDrag/Drop
HTMLWebStorage
HTMLWebWorkers
HTMLSSE
HTMLExamples
HTMLExamples
HTMLQuiz
HTMLExercises
HTMLCertificate
HTMLSummary
HTMLAccessibility
HTMLReferences
HTMLTagList
HTMLAttributes
HTMLGlobalAttributes
HTMLBrowserSupport
HTMLEvents
HTMLColors
HTMLCanvas
HTMLAudio/Video
HTMLDoctypes
HTMLCharacterSets
HTMLURLEncode
HTMLLangCodes
HTTPMessages
HTTPMethods
PXtoEMConverter
KeyboardShortcuts
HTMLclassAttribute
❮Previous
Next❯
TheHTMLclassattributeis
usedtospecifyaclassforanHTMLelement.
MultipleHTMLelementscansharethesameclass.
UsingTheclassAttribute
Theclassattributeisoftenusedtopoint
toaclassnameinastylesheet.ItcanalsobeusedbyaJavaScripttoaccessand
manipulateelementswiththespecificclassname.
Inthefollowingexamplewehavethree
elements
withaclassattributewiththevalueof
"city".Allofthethree
elementswillbestyledequallyaccordingtothe.city
styledefinitionintheheadsection:
Example
London
LondonisthecapitalofEngland.
Paris
ParisisthecapitalofFrance.
Tokyo
TokyoisthecapitalofJapan.
TryitYourself»
Inthefollowingexamplewehavetwo
elements
withaclassattributewiththevalueof
"note".Both
elementswillbestyledequallyaccordingtothe.note
styledefinitionintheheadsection:
Example
MyImportant
HeadingThisissomeimportant
text.
TryitYourself»
Tip:TheclassattributecanbeusedonanyHTMLelement.
Note:Theclassnameiscasesensitive!
Tip:YoucanlearnmuchmoreaboutCSSinourCSSTutorial.
TheSyntaxForClass
Tocreateaclass;writeaperiod(.)character,followedbya
classname.
Then,definetheCSSpropertieswithincurlybraces{}:
Example
Createaclassnamed"city":
London
LondonisthecapitalofEngland.
Paris
ParisisthecapitalofFrance.
Tokyo
TokyoisthecapitalofJapan.
TryitYourself»
MultipleClasses
HTMLelementscanbelongtomorethanoneclass.
Todefinemultipleclasses,separatetheclassnameswithaspace,e.g..Theelementwillbestyledaccordingtoallthe
classesspecified.
Inthefollowingexample,thefirst
elementbelongstoboththe
cityclassandalsotothemainclass,
andwillgettheCSSstylesfrombothoftheclasses:
Example
London
Paris
Tokyo
TryitYourself»
DifferentElementsCanShareSameClass
DifferentHTMLelementscanpointtothesameclassname.
Inthefollowingexample,both
and
pointstothe"city"class
andwillsharethesamestyle:
Example
ParisParisisthecapitalofFrance
TryitYourself»
UseofTheclassAttributeinJavaScript
TheclassnamecanalsobeusedbyJavaScripttoperformcertaintasksfor
specificelements.
JavaScriptcanaccesselementswithaspecificclassnamewiththegetElementsByClassName()method:
Example
Clickonabuttontohideallelementswiththeclassname
"city":
TryitYourself»
Don'tworryifyoudon'tunderstandthecodeintheexampleabove.
YouwilllearnmoreaboutJavaScriptinourHTMLJavaScriptchapter,oryoucanstudyour
JavaScriptTutorial.
ChapterSummary
TheHTMLclassattributespecifiesoneor
moreclassnamesforanelement
ClassesareusedbyCSSandJavaScripttoselectandaccessspecific
elements
Theclassattributecanbeusedonany
HTMLelement
Theclassnameiscasesensitive
DifferentHTMLelementscanpointtothesameclassname
JavaScriptcanaccesselementswithaspecificclassnamewiththegetElementsByClassName()
method
HTMLExercises
TestYourselfWithExercises
Exercise:
Createaclassselectornamed"special".
Addacolorpropertywiththevalue"blue"insidethe"special"class.
Myparagraph
SubmitAnswer»
StarttheExercise
❮Previous
Next❯
NEW
WejustlaunchedW3Schoolsvideos
Explorenow
COLORPICKER
Getcertifiedbycompletingacoursetoday!
w3schoolsCERTIFIED.2022
Getstarted
CODEGAME
PlayGame