We will see shortly how this can be used.Ĭlass selectors start with a period (. The asterisk ( * ) can be used as a wildcard to represent ANY element tag. You don't have to do anything to those elements on the page (such as adding class or id names to them)-they will simply get the formatting specified in the rules simply because the elements uses the tags that are the selectors. And the fourth would apply to all paragraphs. The second rule would apply to all level two headings. The first style rule above would apply to all level one headings on the page. The simplest selector is a single element tag, which specifies the type of element you want to format, such as: It is OK (and advantageous) to use the same id on different Web pages (for example, the id="footer" that is has its style rule in an external style sheet could be used on many pages that link to the style sheet-but only once per each page).Īn element can contain both class AND and id attributes, if desired. and remember that any particular id name can only be used ONCE on each Web page (whereas a class name can be used multiple times on a Web page). This Web page was created by Thomas Beach ©2010 Remember that an id name can be assigned to an item on a page by putting an id attribute inside the opening tag of the element, such as: You can even assign multiple class names to a single element (although you can only have one class attribute in a tag) by doing separating the class names with a space, like this: Remember that class names can be assigned to multiple items on a page by putting a class attribute inside the opening tag of the element, such as: but we won't be doing much inline styling. (Note that no selector is needed when applying local (inline) styles, since the element to be formatted is simply the one with the style attribute in it, such as: There are also pseudo-classes or pseudo-elements that can affect specific parts of the page (such as the first letter in a paragraph, or a link that has the mouse pointer hovering over it). Selectors can be built up out of element tags (as above), class names, id names, attributes, and complex combinations of these (with special characters that relate multiple items). I will show you examples today using this file, and this external style sheet (you can load them in tabs in your browser for later reference). We have already seen examples of selectors in previous lectures, and we have used simple selectors in our exercises, but now we want to define selectors in more detail. is the h1, and therefore all h1 elements on the page will be formatted with red text color. For example, the selector in this style rule: The selector is the first part of the style rule, which specifies what items on the Web page will be formatted by the style rule (and then the style rule's declarations are applied to format all items on the page that match that selector). Note the Midterm Project Assignment details at the end of this page!