ID and Class Selector
If you want to set CSS styles in HTML elements, you need to set the "id" and "class" selectors in the element.
ID Selector
The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.
The HTML element sets the ID selector with the id attribute, and the ID selector in the CSS is defined as "#".
The following style rules apply to element properties Id= "PARA1":
#para1 {text-align:Center; color:Red
The id attribute does not start with a number, and the ID at the beginning of the number does not work in the Mozilla/firefox browser.
Instance:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>W3cschool Tutorial (w3cschool.cn)</title> <style>#para1{text-align:Center;Color:Red;} </style></Head><Body><PID= "Para1">Hello World!!!</P><P>This paragraph isn't affected by the style.</P></Body></HTML>
Class Selector
The class selector is used to describe the style of a set of elements, which differs from the ID selector, and class can be used in multiple elements.
The class selector is represented in the HTML as a class attribute, and in CSS, the category selector takes a point "." Number display:
In the following example, all HTML elements that have a center class are centered.
{text-align:Center
Instance:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>W3cschool Tutorial (w3cschool.cn)</title> <style>. Center{text-align:Center;}</style></Head><Body><H1class= "Center">Center Title</H1><Pclass= "Center">The paragraph is centered.</P> </Body></HTML>
You can also specify a specific HTML element to use class.
In the following instance, all P elements use class= "center" to center the text of the element:
{text-align:Center
Instance:
<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"> <title>W3cschool Tutorial (w3cschool.cn)</title> <style>P.center{text-align:Center;}</style></Head><Body><H1class= "Center">This heading won't be affected</H1><Pclass= "Center">This paragraph would be center-aligned.</P> </Body></HTML>
The first character of a class name cannot use a number! It doesn't work in Mozilla or Firefox.
[HTML] CSS Id and Class selector