Adding text to css class

Advanced CSS

First off, you’re going to need a thorough grasp of the basics of CSS before you go into this. It’s been easy so far, and this trend will continue here.

CSS is a simple language with a lot of depth. There are many techniques you can use to get more out of your stylesheets. There’s another implementation you’ve yet to learn; with classes and ids you will be able to set up custom ways of styling elements without having to change the fundamental properties of a HTML tag; and contextual style gives you yet another level of control.

This page was last updated on 2012-08-21

Importing Stylesheets

There is a fourth method of applying a stylesheet to your pages, suitable for CSS that you don’t want old browsers trying to use. It is similar to the method discussed in the introduction, but is only supported by browsers of versions 5 and above. Netscape and Internet Explorer 4 will not be able to read the stylesheet you supply this way, and so it is useful to apply things like positioning and CSS layout through this method, as old browsers mangle this code and occasionally crash if you give it to them. The code to import, which is placed in the , is:

It should be noted that this method is not available specifically to block out stylesheets to old browsers. It just happens that the two version 4 browsers did not support this implementation. This method is meant as a way to add partial stylesheets to your main sheets, so many sources are combined as one.

Implementation Overriding

CSS code can override other existing CSS code depending on how it is implemented. Say you had redefined the p tag in an external stylesheet. If you redefine it again in the head section of a document, this definition will be the one that is used, as it is closer to the things that it affects. Adding css using the style attribute will override anything else that has been specified elsewhere.

Overriding-wise, the sheet imported last will override the imported ones that come before — i.e. in the example above, ‘advanced.css’ has more weight than ‘style.css’ because it is imported below it. Imported stylesheets have the least influence over the final presentation of a page overall, as link ed sheets will override them. So we finally have a full cascade order:

• the style attribute overrides
• a style block, which overrides
• a link ed stylesheet, which overrides
• an imported sheet.

classes and ids

If you have been using a stylesheet to reformat HTML tags you will probably have wished you could just set up certain ways of formatting HTML elements and apply them to multiple tags. Without these two methods of CSS implementation, you’d soon run out of tags to reformat.

Using classes and ids (which are roughly the same thing), you can set up these custom options, which allow you to format single tags in many different ways. They’re easy to set up, fast and flexible.

classes

Class selectors are created by typing a dot followed by the class name. Before you start putting in these, you should have an existing stylesheet or style block to add them to. That was all covered in the intro to CSS. Now, say you wanted to format lots of individual pieces of text as 12 point red Verdana. Adding the font face, color and size HTML around every instance where you want this type of text is a load of code, and a whole load of coding. This is the beauty of class es. Put this line of CSS into your style:

Note the dot before the name you want to use for it. You’ve just set up a class. Now, you can add class=»caution» to any element and it will be formatted as such. Try it out on a couple of tags, like

and . When you’re giving the name of the class here, the dot does not appear. Try to name the classes based on their function rather than their presentation.

ids

id s are practically the same as class es, with one difference. Only one element can be given each id per page. They can be used for elements you know will only occur once, such as header and navigation tables. If you want to use them, the code is the same, but with hashes (#) in place of the dots.

id s are also in place to take over from the name attribute as the tag that creates internal links, but this has yet to become fully supported. More often than not, id values are used in JavaScript for referencing page elements, and are necessary for DHTML.

Both class and id names can contain characters a-z, A-Z, digits 0-9, underscores and hyphens, but they cannot start with a number or dash.

Now, I’ll introduce the span tag. It does exactly what you’d expect — it influences any other code that it spans. So, to use it in conjunction with the class you set up above, do this:

This would create your desired text , without a font tag in sight. Note that the span tag does absolutely nothing on its own without the class attribute.

The best part about class implementation is that it isn’t confined to any one tag. You use span when there isn’t any other tag around the text you want to affect. But; if the text is also being bolded, you can just add the class attribute to that instead, which means the text takes on the effects of the tag and the css in the class.

text will create text

If you wanted all your instances of the class to be bold, you modify the class code — and every occurrence of it on your site changes instantly. But if you only want one instance to be bold, you just add the class to the bold tag that’s around that specific text. This saves you having to set up a whole new class when it would be inefficient to do so.

Overriding

If you wanted one of the instances of caution to be the same as the rest, but green instead of red, instead of setting up a whole new class with just this changed, you can override this aspect of the css by putting further style definitions closer to the affected text than the class that defines it. We’ll call this ‘overriding by proximity‘, because that sounds cool. For example:

Here I’ve embedded style into the tag, the most powerful overriding technique. If the caution class was specified in an external stylesheet I could have added the modification into a style block and it still would have overridden the class, due to the cascading order defined earlier on in this tutorial. In any case, the text will be displayed in 12pt green Verdana. If you want text vastly different, set up further classes. You can have an unlimited number, so long as they all have different names.

Contextual Style

Contextual style is a powerful technique that can save you from having to define too many classes. You can have your stylesheet apply CSS rules to an element, depending on what other elements it is contained in. For instance, if I wanted all strong elements that are contained in paragraphs to be red, I could write

You just list the selectors (which can be element names, classes or ids) in descending order, with single spaces between them. Using this method properly is a real time-saver.

sourcetip: All of you out there using XHTML should use lowercase selectors in your code, to match the all lowercase elements in your source code.
A rule like STRONG might not be applied, while strong is safe.

For a further example, you could get all the links that occur in your navigation bar (which you’ve defined as div ) to be white with

div#navigation a

This spares you from having to add class=»nav» , or whatever, to all of those links. Above I’m illustrating another technique you can use. If you define your navigational area using the selector div#navigation instead of just #navigation your stylesheet will be easier to read without you having to add in comments.

Keep Learning // CSS and Text → Go! Go!

What’s Related //

Источник

HTML class Attribute

The HTML class attribute is used to specify a class for an HTML element.

Multiple HTML elements can share the same class.

Using The class Attribute

The class attribute is often used to point to a class name in a style sheet. It can also be used by a JavaScript to access and manipulate elements with the specific class name.

In the following example we have three elements with a class attribute with the value of «city». All of the three elements will be styled equally according to the .city style definition in the head section:

Example

In the following example we have two elements with a class attribute with the value of «note». Both elements will be styled equally according to the .note style definition in the head section:

Example

My Important Heading

This is some important text.

Tip: The class attribute can be used on any HTML element.

Note: The class name is case sensitive!

Tip: You can learn much more about CSS in our CSS Tutorial.

The Syntax For Class

To create a class; write a period (.) character, followed by a class name. Then, define the CSS properties within curly braces <>:

Example

Create a class named «city»:

London is the capital of England.

Paris is the capital of France.

Tokyo is the capital of Japan.

Multiple Classes

HTML elements can belong to more than one class.

To define multiple classes, separate the class names with a space, e.g. . The element will be styled according to all the classes specified.

In the following example, the first element belongs to both the city class and also to the main class, and will get the CSS styles from both of the classes:

Example

London

Different Elements Can Share Same Class

Different HTML elements can point to the same class name.

In the following example, both and

point to the «city» class and will share the same style:

Example

Use of The class Attribute in JavaScript

The class name can also be used by JavaScript to perform certain tasks for specific elements.

JavaScript can access elements with a specific class name with the getElementsByClassName() method:

Example

Click on a button to hide all elements with the class name «city»:

Don’t worry if you don’t understand the code in the example above.

You will learn more about JavaScript in our HTML JavaScript chapter, or you can study our JavaScript Tutorial.

Chapter Summary

• The HTML class attribute specifies one or more class names for an element
• Classes are used by CSS and JavaScript to select and access specific elements
• The class attribute can be used on any HTML element
• The class name is case sensitive
• Different HTML elements can point to the same class name
• JavaScript can access elements with a specific class name with the getElementsByClassName() method

Источник

How to Define a CSS Class Style

wikiHow is a “wiki,” similar to Wikipedia, which means that many of our articles are co-written by multiple authors. To create this article, volunteer authors worked to edit and improve it over time.

This article has been viewed 77,324 times.

Classes are a nice feature in HTML that allows you to assign a certain name to an element. They can be styled using CSS. If you don’t know how to use those features, this article will help you.

Create the basic HTML skeleton. As a reminder, it’s an opening HTML tag, an opening head tag, a closing head tag, an opening body tag, a closing body tag, and a closing html tag.

Give the HTML element a class. Do this by inserting «class=»classname» inside the opening tag for your element.

Expert Q&A

You can do the exact same thing with ID styles. To call an ID style in CSS, put «#idname < >» in your CSS document.

You Might Also Like

How to Insert a Hyperlink Using Rich Text or HTML: 3 Methods

Источник