IT tutorials
 
Graphics
 

Adobe Dreamweaver CS5 : Understanding Cascading Style Sheets

1/22/2013 6:08:46 PM
- 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

The Cascading Style Sheets system significantly increases the design capabilities for a Web site. If you are a designer used to working with desktop publishing tools, you may recognize many familiar features in CSS, including the following:

  • Commands for specifying and applying font characteristics

  • Traditional layout measurement systems and terminology

  • Pinpoint precision for page layout

Cascading Style Sheets are able to apply many features with a simple syntax that is easy to understand. If you're familiar with the concept of using styles in a word processing program, you'll have no trouble grasping style sheets.

Here's how the process works: CSS instructions are given in rules; a style sheet is a collection of these rules. A rule is a statement made up of an HTML or custom style, called a selector, and its defined properties and values. For example, a CSS rule that makes the contents of all <h1> tags (the selector) red (#FF0000 in hexadecimal, the value) in color (the property) looks like the following:

h1 {
   color: #FF0000;
}

A CSS property and its associated value are collectively referred to as a declaration.

In the following sections, you see the various characteristics of CSS — grouping, inheritance, and cascading — working together to give style sheets their flexibility and power.

1. Grouping properties

A Web designer often needs to change several style properties at once. CSS enables you to group declarations by separating them with semicolons. For example:

h1 {
  color:#FF0000;
  font-family:Arial,Helvetica,sans-serif;
  font-size:18pt;
}

The Dreamweaver interface provides a wide range of options for styles. If you look at the code, you find that Dreamweaver groups your selections exactly as shown in the preceding example. You can group selectors as well as declarations. Separate grouped selectors with commas rather than semicolons. For example:

h1, h2, p, em {
  color:green;
  text-align:left;
}

2. Inheritance of properties

CSS rules can also be applied to more than one tag through inheritance. The HTML tags enclosed within the CSS selector can inherit most, but not all, CSS declarations. Suppose you set all <p> tags to the color red. Any tags included within a <p>...</p> tag pair then inherit that property and are also colored red.

Inheritance is also at work within HTML tags that involve a parent-child relationship, such as a list. Whether numbered (ordered, <ol>) or bulleted (unordered, <ul>), a list comprises any number of list items, designated by <li> tags. Each list item is considered a child of the parent tag, <ol> or <ul>. Look at the following example:

ol {
  color:#FF0000;
}
ul {
  color:#0000FF;
}

Using the preceding example, all ordered list items appear in red (#FF0000); all unordered list items appear in blue (#0000FF). One major benefit to this parent-child relationship is that you can change the font for an entire page with one CSS rule. The following statement accomplishes this change:

body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

The change is possible in the previous example because the <body> tag is considered the parent of every HTML element on a page.

3. Cascading characteristics

The term cascading describes the capability of a local style to override a general style. Think of a stream flowing down a mountain; each ledge encountered by the stream has the potential to change its direction. The last ledge determines the final direction of the stream. In the same manner, one CSS rule applying generally to a block of text can be overridden by another rule applied to a more specific part of the same text.

For example, you've defined, using style sheets, all normal paragraphs — <p> tags — as a particular font in a standard color, but you mark one section of the text using a little-used tag such as <samp>. If you make a CSS rule altering both the font and color of the <samp> tag, the section takes on the characteristics of that rule.

The cascading aspect of style sheets also works on a larger scale. One of the key features of CSS is the capability to define external style sheets that can be linked to individual Web pages, acting on their overall look and feel. Indeed, you can use the cascading behavior to fine-tune the overall Web site style based on a particular page or range of pages. Your company may, for instance, define an external style sheet for the entire company intranet; each division could then build upon that overall model for its individual Web pages. For example, suppose that the company style sheet dictates that all <h2> headings are in Arial and black. One department could output its Web pages with <h2> tags in Arial, but colored red rather than black, whereas another department could make them blue.

Dreamweaver has a great learning tool built in to help you understand inheritance and cascading: the Relevant CSS tab of the Tag inspector. Select any tag and you can see what CSS rules are being applied to the selection; rules that are applied, but not taking effect because of inheritance or cascading properties, are marked with a red strikethrough.

4. Defining new class and ID selectors for extended design control

Redefining existing HTML tags is a step in the right direction toward consistent design, but the real power of CSS comes into play when you define custom selectors. One type of custom selector is called a class; class selector names always begin with a period. To style all copyright notices at the bottom of all pages of a Web site to display in 8-point Helvetica all caps, you could define a tag as in this simple example:

.cnote {
  font-family:Helvetica, sans-serif;
  font-size:8pt;
  font-transform:uppercase
}

If you define this style in an external style sheet and apply it to all 999 pages of your Web site, you have to alter only one line of code (instead of all 999 pages) when the edict comes down from management to make all the copyright notices a touch larger. After a new class has been defined, you can apply it to any range of text, from one word to an entire page.

Classes are typically applied to more than one element on a page. You could, for example, have more than one paragraph styled as a copyright notice in various parts of the page. A custom tag intended to be applied to a single element, such as a <div> tag that contains the footer content, is called an ID selector. An ID selector is identified by its beginning pound sign — technically called an octothrope — for example, #footer. If you want the footer content to really stand out, you could style it with white type against a black background with a red border. The CSS rule looks like this:

#footer {
   color: #FFFFFF;
   background: #000000;
   border: thin solid #FF0000;
}

An ID selector is applied to a tag through the self-named id attribute, minus the pound sign. Thus, the <div> tag that holds the footer content is coded like this:

<div id="footer">Footer content goes here</div>

Designers use a combination of class and ID selectors — as well as other types of selectors — when laying out the page. It's considered a best practice to avoid using class selectors when the CSS rule is intended to be applied only once on the page; in those situations, an ID selector is the better choice.

5. Specificity

The specificity of a CSS rule determines which rule takes effect when two or more rules conflict. For example, let's say you have one rule that sets the color of an <h1> tag to dark gray, like this:

h1 { color: #333333; }

and another rule that sets the color of a class called .alert to bright red:

.alert { color: #FF0000; }

What would happen when the browser encounters code like this:

<h1 class="alert">Attention all shoppers!</h1>

As you might suspect, the .alert rule would be applied and the <h1> tag would appear red. This occurs because the .alert selector is more specific than the <h1> tag selector. The W3C CSS specification (no relation) provides a different weight for each kind of selector.

A rule's specificity is noted with four comma-separated values. For example, the specificity for the <h1> rule is

0,0,0,1

because there is one tag element in the selector, whereas the specificity for the .alert rule is

0,0,1,0

because there is one class element in the selector. Any positive value in the second-to-last column outweighs any value in the last column.

The formula for creating specificity is as follows:

Total inline styles, total ID selectors, total class and
pseudo-class selectors, total tag elements

Inline styles are the most specific — and the most rarely used these days — so they trump any other type of selector. If two rules have the same specificity and are applied to the same selection, the rule that comes later in the style sheet — because it is physically closer to the code — wins.

6. How styles are applied

CSS applies style formatting to your page in one of three ways:

  • Via an external, linked style sheet

  • Via an embedded style

  • Via inline style rules

6.1. External style sheets

An external style sheet is a file containing the CSS rules; it links one or more Web pages. One benefit of linking to an external style sheet is that you can customize and change the appearance of a Web site quickly and easily from one file.

Two different methods exist for working with an external style sheet: the link method and the import method. Dreamweaver initially defaults to the link method, but you can also choose import if you prefer.

For the link method, a line of code is added outside of the <style> tags, as follows:

<link href="mainstyle.css" rel="style sheet" type="text/css">

The import method writes code within the style tags, as follows:

<style type="text/css">
<!--
@import url("newstyles.css");
-->
</style>

If you compare the link and the import methods, you see that the link method was previously better supported among browsers, but all major browsers support both techniques now. As a general rule, many developers use the HTML element <link> to attach external style sheets to an HTML page and the CSS @import property from a CSS file to import other CSS documents.

6.2. Embedded styles

Embedded styles are those typically written into the actual file at the top of a Web page within a <style>...</style> tag pair. Placing style sheets within the header tags has become a convention that many designers use, although you can also apply a style sheet anywhere on a page.

The <style> tag for a Cascading Style Sheet identifies the type attribute as text/css. A sample embedded Class listing looks like the following:

<style type="text/css">
<!--
p {

  font-family: "Arial, Helvetica, sans-serif";
  color: #000000;
}

.cnote {

  font: 8pt "Arial, Helvetica, sans-serif";
  text-transform: uppercase;
}
h1 {

  font: bold 18pt Arial, Helvetica, sans-serif;
  color: #FF0000;
}
-->
</style>

The HTML comment tags <!-- and --> prevent older browsers that can't read style sheets from displaying the CSS rules.

6.3. Inline styles

The final method of applying a style inserts it within HTML tags using the style attribute — a technique known as inline styles. This method is the most local of all the techniques; that is, it is closest to the tag it is affecting and, therefore, has ultimate control — because of the cascading nature of style sheets as previously discussed.

As my mother used to say, "Just because you can do something, doesn't mean you should." Generally, inline styles are not used because they exert such a high level of control, and modifying the style must be done on an item-by-item basis, which defeats much of the purpose of CSS.


When you create an AP element within Dreamweaver, you notice that the positioning attribute is a Cascading Style Sheet inline within a <div> tag like the following:

<div id="apDiv1" style="position:absolute; visibility:inherit; left:314px; i
top:62px; width:194px; height:128px; z-index:1">
</div>

					  

For all its apparent complexity, the Cascading Style Sheets system becomes straightforward in Dreamweaver. Often, you won't have to write a single line of code. But even if you don't have to write code, you should understand the CSS fundamentals of grouping, inheritance, and cascading.

NOTE

Dreamweaver gives anyone working with CSS layouts a big boost with the newly introduced starter pages available through the Layout category of the New Document dialog box. With a full array of layout variations, you can quickly get a solid head start without touching a single CSS rule. Naturally, you're free — and encouraged — to customize the styles. 
 
Others
 
- Corel Painter X : The Great Outdoors - Just Add Watercolor, Bayside Scene
- Adobe Illustrator CS5 : Working with Objects - Creating Arcs and Spirals
- Adobe Illustrator CS5 : Working with Objects - Creating Polygons and Stars, Creating Line Segments
- Adobe Photoshop CS5 : Sizing Digital Images - Resizing an Image (part 4) - Content-Aware Scaling, Puppet Warp, Using Smart Objects Before Transforming
- Adobe Photoshop CS5 : Sizing Digital Images - Resizing an Image (part 3) - Rotate Canvas Command, Free Transform Command
- Adobe Photoshop CS5 : Sizing Digital Images - Resizing an Image (part 2) - Crop Tool
- Adobe Photoshop CS5 : Sizing Digital Images - Resizing an Image (part 1) - Image Size, Canvas Size
- Adobe Photoshop CS5 : Sizing Digital Images - Resolution Revisited, Resampling
- Adobe After Effects CS5 : Expressions - Creating Expressions
- Adobe Fireworks CS5 : Working with Vector Graphics - Basic vector drawing techniques
 
25 Inspiring Game of Thrones Quotes
 
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
programming4us programming4us
 
Popular tags
 
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