Browse DevX
Sign up for e-mail newsletters from DevX


Introduction to Cascading Style Sheets : Page 2

Browsers often have a difficult time reading a style definition for one reason or another. Adding a position (and sometimes a width) value to every appropriate CSS definition can jumpstart the browser into recognizing your styles correctly.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

Practical Applications
Now that you know how and when the styles are applied, it's important to understand why and where you should use each approach. When you create a site, the first visual aspect you want to affect is the font on each page. This type of application screams for the use of an included file. This means that you create a global, or site-wide, style sheet file and include the file on each page in your application. Later, you may decide you want the background color on every page to be a light gray. To accomplish this, you use a new element style (body{background-color:#ccc;}) in your included file.

As your site grows, certain pages develop specific layout requirements. As stated before, rather than sinking all of your style definitions into one unruly file, you'll find a best practice in spinning off a new style sheet file for pages that require heavy lifting. The next bit of code is an example of how to use two included files to achieve the granularity you need for complex layouts.

<head> <link rel="stylesheet" href="/Styles/global.css" type="text/css" /> <link rel="stylesheet" href="default.aspx.css" type="text/css" /> </head>

This code loads in all global styles plus the definitions specific to the page.

Hierarchical Element Styles
An HTML document is organized around the Document Object Model (DOM). The DOM is a hierarchical object-based representation of your structured markup. Although the DOM is most often used in JavaScript, your awareness of the DOM construct helps you to write fewer classes and ID styles while empowering your Style Sheet definitions.

Figure 3. Global Style Sheets: Use global style sheets and <div> tags to create distinct areas on your page.
Perhaps your designer requires that all <h1> tags on a page show up with a solid border and all <h1> tags nested inside a content area display a solid border. In Figure 3, you can see an example of what that might look like.

A couple of options are available to achieve the desired result. First, you could create a new class definition and apply this class to the <h1> tag, as shown in the following code:

/* Global Style Sheet */ h1 { border:dashed 3px #000; } .nav { background-color:#ccc; } .navHeader { border:solid 3px #000; } ... <!-- HTML Page --> <div class="nav"> <h1 class="navHeader">Links</h1> </div> <div id="divContent"> <h1>Welcome</h1> </div>

The problem with the preceding sample code is that two changes are required to produce the desired result. One change is required in the style sheet and the other change is required in the HTML page. You can avoid these types of changes if you add enough hooks.

Hooks are a combination of HTML elements with their associated class or ID attribute values. The art of coding an HTML page is in knowing where to place the appropriate element and class/ID definition. A mature structure to your page allows you to hook into your page from your style sheet without always requiring new class or ID definitions.

The code below shows a revised example of styling the navigational header without having to add a new class definition.

/* Global Style Sheet */ h1 { border:dashed 3px #000; } .nav { background-color:#ccc; } .nav h1 { border:solid 3px #000; } ... <!-- HTML Page --> <div class="nav"> <h1>Links</h1> </div> <div id="divContent"> <h1>Welcome</h1> </div>

In this version of the code, you use the power of cascading styles. Instead of creating a new tag, you write code saying that anywhere an <h1> tag shows up within a container that has a class of "nav," apply this style. This allows you to define a good hierarchical structure that you can duplicate from page to page, and thus be able to make changes across all pages without changing structure or names of elements.

The Box Model
Figure 4. The Box Model: The figure shows the four parts of the Box Model.
Containment and positioning within a style sheet are controlled by the Box Model. The Box Model is the metaphor for how positioning, margins, padding, and borders are applied to an element, as shown in Figure 4.

  • Margin. The margin is the space between the container element and any other surrounding elements.
  • Border. The space on the edge of the container element
  • Padding. The space between the border and any content in the container element
  • Content. The area where your text, controls, etc., will appear
You can find an in-depth tutorial on the box model here.

Comment and Contribute






(Maximum characters: 1200). You have 1200 characters left.



Thanks for your registration, follow us on our social networks to keep up-to-date