CSS: Classes and Contextual Selectors
Learning Objectives By the end of this lecture, you should be able to: Explain why it is a good idea to name your div sections consistently throughout a web site. Describe the usefulness of classes. Describe the benefits of using contextual selectors. Create and apply classes and contextual selectors. Describe how you can harness the power of external stylesheets to easily make changes to an entire web site.
Class Selectors: Using Classes to apply styles Sometimes you have style(s) that you wish to apply to several different places in your document, but not always with the same tag. For example, suppose you wanted to regularly apply a style of red and bold, but you did not want to limit yourself to a single tag (e.g. an H2 tag). You also don’t want to have to retype the style into a <span> tag every single time. CSS allows us to create a group of styles and name them. We call this group of styles a class. A class can then be applied to any tag you wish.
Creating a Class Selector: Inside either an embedded style, or an external sheet, you create a class by giving it a name, preceded by a period. You then list the styles you wish to apply: .emphasize { color:red; font-weight:bold; } (Note the period)
Applying a Class Selector: Once you have a class selector such as: .emphasize { color:red; font-weight:bold } You can then apply that class as many times as you want: <span class="emphasize">Some text…</span> <h2 class="emphasize">Some other text</h2> <p class="emphasize">A paragraph…</p> Remember: A class must be created inside either an embedded style, or in an external style sheet. Ie: They can not be placed inside an inline style However, you can use classes in any place you want including inline styles
<head> <style type="text/css"> .emphasize { color:red; font-weight:bold } .highlight { background-color:yellow; color:black } </style> </head> <body> Here is some text applying <span class="highlight">one style.</span> <p class="emphasize">Here is some text applying another...</p> </body> Note the period that precedes the class name Apply the class by writing class="name_of_your_class" inside the tag
Review: ‘div’ sections Recall that we use our div tags to organize our page into sections. In addition to organization, however, it also gives us the ability to apply styles to the different areas of our page. For example, you can style your ‘main_content’ section one way, your ‘header’ section another way, and your ‘footer’ section yet another way. Perhaps you want the information in the ‘footer’ section to be in a small font and in italics.
Organize the various sections of your web page into ‘div’s Get in the habit of breaking up your web page into sections. Then surround the HTML code of each section with a <div> tag. For example, for an IT-130 course web page, I might divide the sections into: Title Useful Links Tagline (reminder) Weekly Links Content of the page
TITLE USEFUL LINKS TAGLINE WEEKLY LINKS CONTENT
Identify each div tag with an ‘id’ attribute Once you have divided your page into organizational sections using <div>, you should apply the ‘id’ attribute to each section Every ‘id’ attribute must be unique. That is, in a given web page, no two ID attributes should have the same name.
<div id="tagline"> <div id="title"> <div id="usefullinks"> <div id="tagline"> <div id="weeklylinks"> <div id="content">
Template using ‘div’ <body> <div id="header“> <h1>Turtles Are Us</h1> </div> <div id="tagline"> For all your terrapine needs. <div id="main_content"> Thank you for visiting our site. We hope that you will find everything that….. <div id="useful_links"> <a href=“contact.htm”>Contact Us</a> | FAQ | Shipping | Returns <div id=“copyright"> id name is not a great identifier id=“footer” is probably better… Copyright 2009 Turtles Are Us Inc. All rights reserved. </body>
Try to name your ID sections consistently throughout your entire site Throughout your entire web site, it is a good idea to try to name your sections consistently. For example, every page is likely to have: A section at the top with the name of your business, and perhaps a slogan. id=“header” Some kind of navigation section around the top or on the side. id=“navigation” Some ‘small print’ information at the bottom such as ‘Contact Us’, ‘Hours’, etc id=“footer” The key point is that you should try to give these sections the same identifier throughout your entire site.
<div> sections are a great way to apply formatting You can apply styles to a div tag – and therefore, to various entire sections of your page. For example you could easily: put a border around your title section change the font of your table_of_contents section center your footer section and give it a background color etc div tags work particularly well with “classes” and “contextual selectors”.
“Contextual” Selectors Contextual selectors are most commonly used to style <div> sections. Based on the <div> tag’s ID value Do not confuse ‘contextual’ selectors with ‘class’ selectors (previous slides) Contextual selectors are applied to a specific ID. Class selectors can be applied to any tag in the document.
“Contextual” Selectors contd Suppose you wanted the following look to the pages throughout your entire web site: Everything in the div section of your document you called ‘header’ should: Be a certain width Have a border around it Have a certain background color Everything in the div section of your document you called ‘main_content’ should: Have a silver background Be the same width as the header section.
External stylesheet for your business turtles_r_us_styles.css #header { background-color:peachpuff; width:500px; border:solid 2px black; } #main_content { background-color:silver; width:500px; } #footer { width:500px; font-style:italic; } .emphasize { background-color:yellow; color:red; } body { width:500px; border:solid 2px dashed; } h1, h2, h3 { font-family:Arial; } Note: I am not using hex codes for the moment. In the ‘real world’, however, you should use them.
<head> <link rel=“stylesheet” href=“turles_r_us_styles.css” type=“text/css”> <style type=“text/css”> h2 { color:green; } </style> </head> <body> <div id=“header”> <h1>Turtles Are Us</h1> </div> <div id="tagline"> For all your terrapine needs. <div id=“main_content"> <p>Thank you for visiting out site. We hope that you will find everything you need to keep your turtle happy and healthy.</p> <p>We have the finest selection of….<p> <div id=“footer” > <a href=“contact.htm”>Contact Us</a> | <a href="faq.htm">FAQ</a> | <a href="shipping.htm">Shipping</a> | <a href="returns.htm">Returns</a> </body> You can, of course, still have as many internal and inline styles you wish…
This is Power!! Imagine that you have a large website with hundreds of web pages. You have been careful to name all of your div sections consistently. All of the pages on your site are linked to the same external stylesheet. Think about how easy it now is to make a change to your entire site: All you have to do is make a single change to your external style sheet, and, your entire site will change to display your adjustment!!
Don’t forget: Every ID must be unique As you know, you can not have the same ID for different div sections However, you can – and often WANT – to give div sections the same name among various pages within your site. Restated: No two divs on a single page should have the same ID. However, it is entirely okay – and often desirable – to give divs on different pages the same ID. For example, you may want all the ‘header’ div sections throughout an entire web site to have a certain background image associated with them.
Recap For every div section that you would like to style (e.g. header, maincontent, table_of_contents, footer, etc), create a contextual selector. You don’t have to have a contextual selector for every ID though… A contextual selector is created by writing a ‘#’ symbol, followed by the ID name e.g. #header, #table_of_contents, etc After you declare the contextual selector, you write the styles you wish to apply: #header { color:red; font-family:Arial } #table_of_contents { background-color:black; color:white }