programming4us
         
 
 
Programming

Text Tags and a Little CSS3 - Adding Style to Text with CSS3 (part 1) - Styling HTML5 elements with CSS3 properties

- 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:35:17 PM

1. Styling HTML5 elements with CSS3 properties

All style sheets can be added in three ways:

• You can use the <style> tag to define the properties of elements in the HTML5 page.

• You can use external style sheets, which are text files where you store a style you may want to reuse.

Most professional developers and designers prefer the CSS3 external style sheets because perfecting the desired style takes a lot of work. When you want to make a change to the design of a Web site, you can make changes to many pages that use an external style sheet, just by changing the one style sheet. It’s just more efficient than having to change the <style> attributes in each individual Web page.

You also can add styles without style sheets by using inline styles. An inline style is like a “Break Glass in Case of Emergency!” technique. A good-looking page has a plan developed in a style sheet. However, sometimes, you run into a case where you need some feature added, and instead of changing the style sheet, you just pop it in with a tag.

Embedded style sheets

An embedded style sheet is simply adding the style sheet directly into the HTML5 script. In the <head> of the program, add the style sheet using the <style> container. Place the element you want to style in the style container, and then add values to the property to be styled. Figure 1 shows the general format.

977279-fg0307.eps

Figure 1: An embedded style sheet.

Each element has a unique set of properties, and each property has values that can be assigned to it. When you change the value of the property, that value appears in the text inside the element’s container. So, if you change the text color to red, all the text inside the element’s container will be red. 

<!DOCTYPE HTML>

<html>

<head>

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

<style type=”text/css”>

body {

background-color:#fbf7e4;

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

margin-left:20px;

color:#8e001c;

}

h1 {

background-color:#8E001C;

color:#e7e8d1;

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

text-align:center;

}

h2 {

background-color:#424242;

color:#d3ceaa;

font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;

margin-left:5px;

}

</style>

<title>CSS3-Embedded Stylesheet</title>

</head>

<body>

<h1>This Is the Big Head</h1>

<h2>&nbsp;Here Is the Second Head</h2>

The body text is styled for a bit of a eft margin and picks up the color of the body along with its font. Notice that the background of the heads extends all the way across the page. Also notice that a space (& nbsp;) gives the h2 text a ittle indent so that it stays “within” the background. That’s not a problem with the h1 head because it’s centered.

</body>

</html>

Figure 2 shows how the styled page looks.

977279-fg0308.eps

Figure 2: Text styled with CSS3.

You should be aware that when you use style sheets, you have to pay attention to the little details — like adding both curly braces, separating the property from the values by colons, and ending each property value with a semicolon. If your CSS3 style sheet doesn’t work as you think it should, check those little gotchas!

When using background colors, the background often extends across the entire page. Certain inline elements such as <span> can be used to contain the background to the affected text. With background colors in headers that are left- or right-justified, you’ll want to add a space (&nbsp;) so that it doesn’t bleed into the background color of the page.

External style sheets

With all the different kinds of style combinations you may have to consider — including different formats for desktops, laptops, and small mobile screens — the work involved in creating a good style sheet or set of style sheets can be considerable. By saving your CSS3 work to a text file, you can reuse your style sheet as often as you want. Plus, you can copy your embedded CSS and easily paste it into a text file and save it as a .css file.

For example, let’s take a color scheme with a set of colors that a corporate client, Mighty Smite Web Development, has described as the corporate palette. (That means you can use only the set of colors provided.) You start with the following company colors:

#3C371E, #8C5F26, #BCA55F, #F2CC6E, #F26205

The background color must be #F2CC6E. You don’t have to know what the color is — you just have to know that the company has decided that it’s going to be the background color. You’re told that the designers can figure out the rest.

Further, you’re told that they’d like a version that looks good on a phone and a different one that looks good on a desktop. So, that means you’re going to need two different CSS3 style sheets. Later on, you’ll worry about how the browser is going to know whether the user is viewing from a desktop with a screen the size of a drive-in theater or viewing from a Droid phone.

All that’s required is the following tag:

<link rel=”stylesheet” type=”text/css” href=”mightySmiteSmall.css” />

This tag goes in the <head> container where the <style> tag had gone along with the CSS3 code. Now the CSS3 code goes into a separate file. Notice that the <link> tag contains an href attribute assigned the value mightySmiteSmall.css

To create a CSS3 file, all you have to do is enter the CSS3 code in a text editor or Web development application minus the <style> tags. The following shows the example to be used here:

@charset “UTF-8”;

/* CSS Document */

/*3C371E,8C5F26,BCA55F,F2CC6E,F26205 */

body

{

background-color:#F2CC6E;

font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif;

color:#8C5F26;

font-size:11px;

max-width:480px;

}

h1

{

color:#BCA55F;

background-color:#3C371E;

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

text-align:center;

}

h2

{

color:#F26205;

font-family:”Lucida Sans Unicode”, “Lucida Grande”, sans-serif

}

h3

{

color:#3C371E;

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

}

The top line lets the browser know that it’s a UTF-8 character set, and the second two lines are comment lines. They’re different from the comment lines in HTML5, but they work the same. The second comment line is a handy way to keep track of the color palette and can save time in setting up the style sheet.

To test this mobile version of the CSS3 code, the following HTML5 file is used:

<!DOCTYPE HTML>

<html>

<head>

<link rel=”stylesheet” type=”text/css” href=”mightySmiteSmall.css” />

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

<title>Mighty Smite Sofware Test Sheet</title>

</head>

<body>

<h1>Mighty Smite Software Conglomorate</h1>

<h2>This is an h2 head</h2>

<h3>Here’s an h3 head</h3>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut abore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco aboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est aborum.

</body>

</html>

All the styles in the CSS3 file are used to test their appearance, and the body text beginning with Lorem ipsum is filler text, used to get an idea of what a text block looks like. (It’s been used since the 16th century, so it must be good.)

In setting up the CSS3 file, the only setting that specifically targeted mobile devices is the width setting in the body element. It’s set to 480px because that’s the width of the iPhone used in testing. However, depending on how users hold their mobile devices, they’ll get different results. Figures 3 and 4 show what the page looks like when the phone is held at different angles.

977279-fg0309.eps

Figure 3: Style set for mobile device vertical.

977279-fg0310.eps

Figure 4: Style set for mobile device horizontal.

Different pixel density

When you’re creating Web pages for output ranging from large desktops to mobile devices, you have to consider more than just the number of pixels on the vertical and horizontal planes. In the example CSS3 external style sheet, the width is set to 480 with the code max-width:480px; for an iPhone with 480-pixel horizontal resolution. However, when you run the application on your mobile device, the text may be way too big or way too small. What’s going on?

We tend to think of screen resolution in terms of the number of pixels — the more pixels, the higher the resolution. So, if you set your screen to 1680 x 1050, it has a higher resolution than if I set it to 1024 x 768. However, the resolution actually depends on the number of pixels relative to the size of the display area. More important than the number of pixels is the number of pixels stuffed into your viewing area or pixels per inch (PPI) — pixel density. If you develop your Web page on a typical computer screen, the pixel density is around 100. However, your mobile device is likely to have a much higher pixel density. For example, my iPhone 3GS has a pixel density of 132 and a resolution of 480 x 320. If I upgrade to an iPhone 4, my pixel density will be 326 and the resolution will be 960 x 640. However, the phones both have a 31⁄2-inch viewing area. The iPhone 4’s resolution is double that of the iPhone 3GS, and its ppi is about 21⁄2 times greater. For my Web page, that means a width setting of 480 will show up as coming only about halfway on an iPhone 4 even though it fills the width of iPhone 3GS models.

However, because I do my development on a computer with a ppi of 99 on a 20-inch screen, the best I can get is an estimation of what it will look like on any mobile device. I can estimate what a Web page will look like on different mobile devices by changing the size of the browser window, but ultimately, you need to actually see what your HTML5 Web page looks like on the target mobile device.

A unique feature of many mobile devices is that they allow Web pages to be viewed from different aspects — vertical or horizontal. So, when I’m preparing a CSS3 file for a mobile device, I tend to set the width to the horizontal. However, you’ll quickly find that different mobile browsers work differently. At the time of this writing, the Apple Safari browser on the iPhone displayed the page in a tiny, unreadable page that had to be expanded, but the Opera Mini browser (as shown in Figures 3-9 and 3-10) on the same iPhone using the same size screen displayed the page immediately in an optimum viewing size, whether viewed horizontally or vertically.

Inline style

A third way to add CSS3 to your document is to simply add a style attribute to an element that redefines the content in the element’s container. 

<!DOCTYPE HTML>

<html>

<head>

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

<title>Inline CSS3</title>

</head>

<body>

<div style=”font-family:Verdana, Geneva, sans-serif;font-size:24px;background-color:yellow;color:navy;”>This is important!</div>

<p>But this...not so much</p>

<p style=”font-size:10px;font-family:sans-serif;”>And this you can ignore altogether....

</body>

</html>

Figure 5 shows what you see when you test the Web page in a browser. Keep in mind that the second line has no styling at all added.

977279-fg0311.eps

Figure 5: Inline CSS3.

The use of inline CSS3 can be invaluable when some feature of your CSS3 external file doesn’t have a style for something on your Web page that needs to be there. Generally, inline is one of those tools you want to use both sparingly and judiciously. This is especially true when dealing with other developers and designers who are working from a common style sheet.

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