programming4us
         
 
 
Programming

Text Tags and a Little CSS3 - Adding Style to Text with CSS3 (part 2) - Creating CSS3 classes and IDs

- How To Install Windows Server 2012 On VirtualBox
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire
7/21/2013 7:37:36 PM

2. Creating CSS3 classes and IDs

CSS3 classes and IDs are ways to extend a style to any element. For example, suppose you have a feature that you want to add to just some items such as a yellow highlight. If you define a div or a p element’s background color as yellow, all the text in either of those containers will be bright yellow — not what you want. On the other hand, if you have a class that defines a yellow background, all you have to do is to assign that class to an element to lighten it up.

CSS3 classes

You create style classes in an almost identical way as you do element styles. The “dot” (.) definitions used to create a class in CSS3 are labels you make up instead of using element names. Figure 6 shows how to create a CSS3 class definition.

977279-fg0312.eps

Figure 6: Creating class definition.

As you can see, the dot definition goes where the element name goes. The rest is identical to CSS3 definitions for elements. However, implementing a class style is a bit different because it can be used in almost any element tag.

In order to see how we might want to use a bit of highlighted text, a very handy inline element is span. The <span> tag can be added in the middle of a block element and only change that part of the content in the span container without changing the rest of the block. To add a class to an element, you use the following format:

<element class=”myClass”>

Notice that the name of the class does not include the “dot” from the dot definition. The dot is used only in the style definition to let the parser know that the word is a class and not an element. The following program  gives you an example of how you might use the class with the <span> tag.

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

body {

background-color:#F93;

}

.highlight {

background-color:yellow;

}

div {

font-family:”Comic Sans MS”, cursive;

font-size:18px;

}

h1 {

font-family:”Arial Black”, Gadget, sans-serif;

color:#930;

text-align:center;

font-size:20px;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Halloween Highlight</title>

</head>

<body>

<h1>Halloween Party!</h1>

<div>You are invited to a Halloween Party on <span class=”highlight”>Saturday, October 29</span>. Costumes are <span class=”highlight”><i>de rigueur</i></span>.</div>

</body>

</html>

When you test the program, you’ll see that the two portions of the text within the <span> containers are affected. Figure 7 shows how they’re displayed in a Chrome browser on a Mac (top) and an Opera Mini browser on an iPhone (bottom).

977279-fg0313.eps

Figure 7: Class defined style in <span> container on desktop computer (top) and mobile device (bottom).

Both displays clearly show that the CSS3 class named highlight is working fine. However, the Opera Mini browser displays neither the defined fonts nor the italicized words. (The Safari browser does display the italicized words, but not the defined fonts.)

CSS3 IDs

A CSS3 ID is set up almost exactly like a class except that it uses a pound sign (#) instead of a dot (.) in the definition. Further, in assigning an ID, you use ID instead of class to specify which ID to use with an element. You even can use IDs and classes with the same element. The following tag is perfectly correct:

<p ID=”this” class=”that”>

Both can select styles, and the ID provides a unique ID for the paragraph.

The ID has some major differences from a class. Both a class and an ID can be used as style sheet selectors. However, an ID has some other limitations and features:

• An ID can be used only once in a document.

• An ID can serve as an anchor .

• An ID can act as a script reference. That’s important for JavaScript.

• An ID can be used as a name in a declared object element — more stuff from JavaScript.

• An ID can be used by agents for processing information in translating an HTML document.

Of these features, you’ll be using only the first two until you decide to incorporate JavaScript and other languages into your résumé. Nevertheless, if you pay attention to these differences, your Web pages won’t run into problems later on (and others will think you’re a pro). The following example  shows a use of the ID with CSS3:

<!DOCTYPE HTML>

<html>

<head>

<style type=”text/css”>

#littleHead {

font-family:Verdana, Geneva, sans-serif;

background-color:#9FC;

font-size:16px;

}

#javascript {

/* red */

color:#cc0000;

}

#php {

/* blue */

color:#009;

}

#actionscript {

/* green */

color:#063;

}

</style>

<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>

<title>Using IDs</title>

</head>

<body>

<div id=”littleHead”>Everything you always wanted<br>

to know about variables:</div>

<p id=”javascript”> JavaScript variables do not have to be given a data type.</p>

<p id=”php”> PHP variables can be nudged toward a data type with type hinting.</p>

<p id=”actionscript”> ActionScript variables must be assigned a data type.</p>

</body>

</html>

In looking at that code, you may have wondered what the slash-asterisk (/* ... */) marks are. Quite simply, they’re comment code for CSS3. Within a <style> container and in external style sheets, they work just like the <!-- --> comment marks in HTML5. Figure 8 shows what you’ll see when you test it.

977279-fg0314.eps

Figure 8: IDs in a Web page.

If you have a long Web page with discussions about JavaScript, PHP, and ActionScript, the user may have to scroll down to find the topic he wants. Using IDs, you can write the URL to include the exact paragraph the user is trying to find.

Other -----------------
- Visual Basic 2010 : Deploying Applications with ClickOnce - Registration-Free COM
- Visual Basic 2010 : Deploying Applications with ClickOnce - Security Considerations, Programmatically Accessing ClickOnce
- Visual Basic 2010 : Deploying Applications with ClickOnce - Configuring ClickOnce
- Visual Basic 2010 : Deploying Applications with ClickOnce
- ASP.NET 4 in VB 2010 : Site Maps (part 3) - Binding Portions of a Site Map, The SiteMap Class
- ASP.NET 4 in VB 2010 : Site Maps (part 2) - Binding an Ordinary Page to a Site Map, Binding a Master Page to a Site Map
- ASP.NET 4 in VB 2010 : Site Maps (part 1) - Defining a Site Map
- DirectX 10 Game Programming : Shaders and Effects - Vertex Shaders
- DirectX 10 Game Programming : Shaders and Effects - High Level Shading Language
- DirectX 10 Game Programming : Shaders and Effects - Effect Files
- Programming Windows Services with Microsoft Visual Basic 2008 : Services and Polling - Updating the Service Events
- Programming Windows Services with Microsoft Visual Basic 2008 : Services and Polling - Adding a Module File, Adding New Polling Code
- Microsoft Visual Studio 2010 : Using the Concurrency Visualizer (part 3) - The Cores View
- Microsoft Visual Studio 2010 : Using the Concurrency Visualizer (part 2) - CPU Utilization View, The Threads View
- Microsoft Visual Studio 2010 : Using the Concurrency Visualizer (part 1)
- Microsoft Visual Studio 2010 : Reports and Debugging - Using the Parallel Stacks Window
- Microsoft Visual Studio 2010 : Reports and Debugging - Using the Parallel Tasks Window
- Microsoft Visual Studio 2010 : Debugging with Visual Studio 2010 (part 2) - Debugging Threads
- Microsoft Visual Studio 2010 : Debugging with Visual Studio 2010 (part 1) - Live Debugging, Performing Post-Mortem Analysis
- .NET Components : Serialization and Class Hierarchies (part 2) - Manual Base-Class Serialization
 
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
- First look: Apple Watch

- 3 Tips for Maintaining Your Cell Phone Battery (part 1)

- 3 Tips for Maintaining Your Cell Phone Battery (part 2)
programming4us programming4us
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS