HTML and CSS Reference
In-Depth Information
Referencing elements correctly
CSS is used to apply styles to elements in an HTML page. To do so, the CSS has to know which
elements to apply the styles to. There are a few ways to reference elements from CSS. This
is known as the selector syntax . This has been demonstrated throughout the chapter. This
section will explain specifically how to reference elements from CSS. The key consideration is
to ensure that you reference elements such that the styles affect only the elements you want
affected. In large complex CSS, it can get complicated.
Elements can be referenced from CSS by their element name. For example:
p{…}
article{…}
div{…}
In this code, styles are applied to all paragraph elements, article elements, and div
elements.
The next method to select elements is through the use of classes as shown here:
.bold{…}
.largeTitle{…}
In this code, the styles are applied only to HTML elements that have their class attribute
assigned these class names. Element names and classes can be combined to narrow the
selector even further:
p.largeTitle{…}
This code applies the styles only to paragraph elements that have the class largeTitle
assigned to the class attribute.
The most granular method to reference HTML elements from CSS is by using the id or
name of the element:
#nameBox{…}
This code applies the specified styles only to the single element on the page with the
specified name.
In some cases, you might want to apply the same style to many elements of different
types. In this case, you can group them and define the styles only once:
p, H1, H2 {…}
In this sample, all three of the HTML elements noted will have the defined styles applied to
them.
 
 
Search WWH ::




Custom Search