logo
g Text Version
Beauty & Self
Books & Music
Career
Computers
Education
Family
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
Money
News & Politics
Relationships
Religion & Spirituality
Sports
Travel & Culture
TV & Movies

dailyclick
Bored? Games!
Nutrition
Postcards
Take a Quiz
Rate My Photo

new
European Travel
Action Movies
Bible Basics
Houseplants
Romance Movies
Creativity
Family Travel


dailyclick
All times in EST

Full Schedule
g
g HTML Site

BellaOnline's HTML Editor

g

How To Define A CSS Class Style - The Class Selector

Guest Author - Diane Cipollo

There will be times when the built-in CSS styles are not exactly what you need. When this happens, you can create your own CSS rule with the class command. This CSS rule will be independent of any one HTML tag which allows you to use it on any HTML tag. In fact it can be applied to multiple HTML tags on a web page which makes it very versatile. You can see how this might be useful for streamlining your code.

The first step in creating a CSS class is to give it a unique name. Unlike the HTML selector which is derived from a part of an HTML tag, you can give the class command any name you want. You can use any letter or number combination to create this unique name. Then, as usual, this unique class name is followed by the CSS definitions. Let's take a look at an example of a CSS style that I have created to control the copyright text on a web page.

.class_name {definition; definition;}

.copyright_style {font-face: arial; font-size: 10px;}


As you can see from the example above, the CSS class begins with the unique name (copyright_style) and before the class name there is a period. To the right of the name are the definition(s) enclosed within curly brackets and each definition is separated by a semicolon.

You can place this CSS class inside the <style> tags in the head section of a web page or in an external CSS file. It will work throughout the entire web page. When you want to apply this CSS class to any HTML tag, you will use the class attribute within the HTML tag. The value for the class attribute is the unique name given to your CSS class. (class="value") In the example below I have applied it to the <p> tag. Notice that I have not included the period before the class name.

<p class="copyright_style">Text goes here</p>




This site needs an editor - click to learn more!

Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Twitter Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Facebook Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to MySpace Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Del.icio.us Digg How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Yahoo My Web Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Google Bookmarks Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Stumbleupon Add How+To+Define+A+CSS+Class+Style+%2D+The+Class+Selector to Reddit




RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map


For FREE email updates, subscribe to the HTML Newsletter


Past Issues


print
Printer Friendly
bookmark
Bookmark
tell friend
Tell a Friend
forum
Forum
email
Email Editor


Content copyright © 2014 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact BellaOnline Administration for details.

g


g features
What's Coming in HTML 5

What is FTP?

HTML Fundamentals - Tables

Archives | Site Map

forum
Forum
email
Contact

Past Issues
memberscenter


vote
Poetry
Daily
Weekly
Monthly
Less than Monthly



BellaOnline on Facebook
g


| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2014 Minerva WebWorks LLC. All rights reserved.


BellaOnline Editor