CSS Classes
Learning Objectives By the end of this lecture, you should be able to: Describe why CSS classes are extremely useful Be able to create a CSS class Be able to apply one or more CSS class’ to a tag Describe how you can harness the power of external stylesheets to easily make changes to an entire website
Grouping styles together to form a CSS class Sometimes you may find that you would like to apply a particular collection of styles to several different tags in your document. For example, suppose you frequently wanted to apply the following styles: Text that is red, with a black background, in bold, italicized, in Helvetica font surrounded by a blue border. It is certainly easy to write the CSS to accomplish this, but which tag do you want to apply this group of styles to? A single <h1> tag? A single <h2> tag? All <h> tags on your page? Or perhaps all <aside> tags? Or perhaps a certain specific <aside> tag but none of the others? How about all <h> tags on an entire website?! All of this can be easily achieved by creating a CSS class. A CSS class is when you create a group of styles and group them together under a specific name. You can then apply this class to any tag that you wish. Stated differently: 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 as many elements (tags) as you wish.
Creating a CSS Class Inside an external sheet or as an internal style, you create your class by giving it a name. Note: When you are creating a class, this name must be preceded by a period. You then list the styles you wish to apply: .emphasize-text { color:red; font-weight:bold; font-style:italic; } (Note the period) The identifier ‘emphasize-text’ is known as a class selector. Naming convention for CSS Classes: - When naming class, we do NOT use camel-case notation. Rather, we use dashes to separate words. e.g. highlight-text, my-first-class, etc.
Applying a Class Once we have created a class such as: .emphasize-text { color:red; font-weight:bold; font-style:italic; } We can apply that class as many times as we want: <h1 class="emphasize-text">Some text…</span> <aside class="emphasize-text">Some other text</aside> <p class="emphasize-text">A paragraph…</p> Remember: A class must be created either as an internal style, or in an external style sheet. * Note: It is generally preferable to use external style sheets. However, for many of our lectures, we will use internal styles for demonstration purposes. (It’s easier to discuss / demonstrate when the style is in the same document as our HTML code).
EXAMPLE We create a class by giving it a name (preceded by a period), and then listing some styles inside the braces. When you are applying the class, you do not include the period. We apply the class by applying an HTML attribute called class inside the tag. The syntax is: class="name-of-your-class" You can apply more than one class to a tag. Simply separate them with spaces inside the class attribute. <head> <style type="text/css"> .emphasize { color:red; font-weight:bold } .highlight { background-color:yellow; color:black; } .delim { border:2px solid red; width:300px; } </style> </head> <body> <h1 class="delim">Welcome to My Page!</h1> <p class="emphasize">Here is a paragraph with a class applied.</p> <section class="highlight delim">Two classes have been applied.</section> </body>
Here is part of an HTML document in which we have created and applied some styles. Note: The point here is not to discuss aesthetics of page design. It is simply to demonstrate how to create and apply classes. File: turtles_with_classes.html <!DOCTYPE html> <html lang="en"> <head> <title>Classy Turtles</title> <meta charset="utf-8"> <style> .highlight { background-color:yellow;color:red;} .emphasize { font-weight:bold; font-style:italic; } .bold-border { border:2px solid red; width: 300px; text-align:center; } </style> </head> <body> <header> <h1>The World of Turtles</h1> <h2>A Highly Abbreviated Primer</h2> <img src="box_turtle_wikipedia.jpg" alt="Picture of a box turtle"> </header> <main> <section> <h2 class="bold-border">Introduction</h2> <p class="highlight emphasize"> Turtles are diapsids of the order Testudines. The earliest known members of this group date from the Middle Jurassic,[1] making turtles one of the oldest reptile groups and a more ancient group than snakes or crocodilians. </p> <p>Turtles are ectotherms—animals commonly called.... </p> We have applied a class to this tag. We have applied two classes to this paragraph. This paragraph will have NO styles applied.
Internal or External Style Sheet? Generally, external style sheets are preferred. However: In the previous example file, as well as many of the others in this course, we will be using internal style sheets. The only reason for this is that it makes it easier for purposes of our discussion. By keeping the styles inside the class, it makes the lecture easier to follow. In the real world, however, we would probably place our classes inside an external style sheet. Let’s modify the previous example to demonstrate use of an external style sheet. <!DOCTYPE html> <html lang="en"> <head> <title>Classy Turtles</title> <meta charset="utf-8"> <link rel="stylesheet" href="turtle_pages.css"> </head> <body> <header> <h1>The World of Turtles</h1> <h2>A Highly Abbreviated Primer</h2> <img src="box_turtle_wikipedia.jpg" alt="Picture of a box turtle"> </header> <main> <section> <h2 class="bold-border">Introduction</h2> <p class="highlight emphasize"> Turtles are diapsids of the order Testudines... </p> <p>Turtles are ectotherms—animals commonly called.... </p> Etc... File: turtle_pages.css .highlight { background-color:yellow; color:red; } .emphasize font-weight:bold; font-style:italic; .bold-border border:2px solid red; width: 300px; text-align:center; Additional CSS styles might follow, of course...
CSS Means Power! Imagine that you have a large website with hundreds of web pages. You have been careful to organize all of your pages consistently in terms of semantic tags, heading tags, etc. You link every one of the pages on your entire site to the same external stylesheet. Inside your external style sheet, you can apply classes to various tags. For example, you might decide that all of your <header> tags should have a class applied that creates a larger font, applies a 3px thick blue border, and a unique background color. You can create all kinds of classes that define detailed or elaborate styles, and can then apply those classes to any tag on your site. 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!! Example: Suppose you are the lead web programmer for a major company with a web site spanning over 300 different pages. You have carefully organized your site so that every page has a <header> semantic tag that includes the company logo and its slogan. You have applied a blue border to every <header> tag throughout your site via an external style sheet. Then one day, one of the UX (user experience) specialists comes to you and say “Hey, we’ve realized the blue borders we’ve been using have not been good for sales. Red is much more dynamic and we are certain it will increase sales!”. All you would have to do is go to your external style sheet and change the header selector to make the border red instead of blue. Voila – your entire web site will be modified with just one line of code!