User Guide Cancel

Understand Cascading Style Sheets

  1. Dreamweaver User Guide
  2. Introduction
    1. Responsive web design basics
    2. What's new in Dreamweaver
    3. Web development using Dreamweaver - An Overview
    4. Dreamweaver / Common Questions
    5. Keyboard shortcuts
    6. Dreamweaver system requirements
    7. Feature summary
  3. Dreamweaver and Creative Cloud
    1. Synchronize Dreamweaver settings with Creative Cloud
    2. Creative Cloud Libraries in Dreamweaver
    3. Using Photoshop files in Dreamweaver
    4. Work with Adobe Animate and Dreamweaver
    5. Extract web-optimized SVG files from Libraries
  4. Dreamweaver workspaces and views
    1. The Dreamweaver workspace
    2. Optimize Dreamweaver workspace for visual development
    3. Search files based on filename or content | Mac OS
  5. Set up sites
    1. About Dreamweaver sites
    2. Set up a local version of your site
    3. Connect to a publishing server
    4. Set up a testing server
    5. Import and export Dreamweaver site settings
    6. Bring existing websites from a remote server to your local site root
    7. Accessibility features in Dreamweaver
    8. Advanced settings
    9. Set site preferences for transferring files
    10. Specify proxy server settings in Dreamweaver
    11. Synchronize Dreamweaver settings with Creative Cloud
    12. Using Git in Dreamweaver
  6. Manage files
    1. Create and open files
    2. Manage files and folders
    3. Getting and putting files to and from your server
    4. Check in and check out files
    5. Synchronize files
    6. Compare files for differences
    7. Cloak files and folders in your Dreamweaver site
    8. Enable Design Notes for Dreamweaver sites
    9. Preventing potential Gatekeeper exploit
  7. Layout and design
    1. Use visual aids for layout
    2. About using CSS to lay out your page
    3. Design responsive websites using Bootstrap
    4. Creating and using media queries in Dreamweaver
    5. Present content with tables
    6. Colors
    7. Responsive design using fluid grid layouts
    8. Extract in Dreamweaver
  8. CSS
    1. Understand Cascading Style Sheets
    2. Laying out pages using CSS Designer
    3. Using CSS preprocessors in Dreamweaver
    4. How to set CSS Style preferences in Dreamweaver
    5. Move CSS rules in Dreamweaver
    6. Convert inline CSS to a CSS rule in Dreamweaver
    7. Work with div tags
    8. Apply gradients to background
    9. Create and edit CSS3 transition effects in Dreamweaver
    10. Format code
  9. Page content and assets
    1. Set page properties
    2. Set CSS heading properties and CSS link properties
    3. Work with text
    4. Find and replace text, tags, and attributes
    5. DOM panel
    6. Edit in Live View
    7. Encoding documents in Dreamweaver
    8. Select and view elements in the Document window
    9. Set text properties in the Property inspector
    10. Spell check a web page
    11. Using horizontal rules in Dreamweaver
    12. Add and modify font combinations in Dreamweaver
    13. Work with assets
    14. Insert and update dates in Dreamweaver
    15. Create and manage favorite assets in Dreamweaver
    16. Insert and edit images in Dreamweaver
    17. Add media objects
    18. Adding videos in Dreamweaver
    19. Insert HTML5 video
    20. Insert SWF files
    21. Add audio effects
    22. Insert HTML5 audio in Dreamweaver
    23. Work with library items
    24. Using Arabic and Hebrew text in Dreamweaver
  10. Linking and navigation
    1. About linking and navigation
    2. Linking
    3. Image maps
    4. Troubleshoot links
  11. jQuery widgets and effects
    1. Use jQuery UI and mobile widgets in Dreamweaver
    2. Use jQuery effects in Dreamweaver
  12. Coding websites
    1. About coding in Dreamweaver
    2. Coding environment in Dreamweaver
    3. Set coding preferences
    4. Customize code coloring
    5. Write and edit code
    6. Code hinting and code completion
    7. Collapse and expand code
    8. Reuse code with snippets
    9. Lint code
    10. Optimize code
    11. Edit code in Design view
    12. Work with head content for pages
    13. Insert server-side includes in Dreamweaver
    14. Using tag libraries in Dreamweaver
    15. Importing custom tags into Dreamweaver
    16. Use JavaScript behaviors (general instructions)
    17. Apply built-in JavaScript behaviors
    18. About XML and XSLT
    19. Perform server-side XSL transformations in Dreamweaver
    20. Performing client-side XSL transformations in Dreamweaver
    21. Add character entities for XSLT in Dreamweaver
    22. Format code
  13. Cross-product workflows
    1. Installing and using extensions to Dreamweaver
    2. In-App updates in Dreamweaver
    3. Insert Microsoft Office documents in Dreamweaver (Windows only)
    4. Working with Fireworks and Dreamweaver
    5. Edit content in Dreamweaver sites using Contribute
    6. Dreamweaver-Business Catalyst integration
    7. Create personalized email campaigns
  14. Templates
    1. About Dreamweaver templates
    2. Recognizing templates and template-based documents
    3. Create a Dreamweaver template
    4. Create editable regions in templates
    5. Create repeating regions and tables in Dreamweaver
    6. Use optional regions in templates
    7. Define editable tag attributes in Dreamweaver
    8. How to create nested templates in Dreamweaver
    9. Edit, update, and delete templates
    10. Export and import xml content in Dreamweaver
    11. Apply or remove a template from an existing document
    12. Edit content in Dreamweaver templates
    13. Syntax rules for template tags in Dreamweaver
    14. Set highlighting preferences for template regions
    15. Benefits of using templates in Dreamweaver
  15. Mobile and multiscreen
    1. Create media queries
    2. Changing page orientation for mobile devices
    3. Create web apps for mobile devices using Dreamweaver
  16. Dynamic sites, pages and web forms
    1. Understand web applications
    2. Set up your computer for application development
    3. Troubleshoot database connections
    4. Removing connection scripts in Dreamweaver
    5. Design dynamic pages
    6. Dynamic content sources overview
    7. Define sources of dynamic content
    8. Add dynamic content to pages
    9. Changing dynamic content in Dreamweaver
    10. Display database records
    11. Provide and troubleshoot live data in Dreamweaver
    12. Add custom server behaviors in Dreamweaver
    13. Building forms using Dreamweaver
    14. Use forms to collect information from users
    15. Create and enable ColdFusion forms in Dreamweaver
    16. Create web forms
    17. Enhanced HTML5 support for form elements
    18. Develop a form using Dreamweaver
  17. Building applications visually
    1. Build master and detail pages in Dreamweaver
    2. Build search and results pages
    3. Build a record insert page
    4. Build an update record page in Dreamweaver
    5. Building record delete pages in Dreamweaver
    6. Use ASP commands to modify database in Dreamweaver
    7. Build a registration page
    8. Build a login page
    9. Build a page that only authorized users can access
    10. Securing folders in Coldfusion using Dreamweaver
    11. Using ColdFusion components in Dreamweaver
  18. Test, preview, and publish websites
    1. Preview pages
    2. Preview Dreamweaver web pages on multiple devices
    3. Test your Dreamweaver site
  19. Troubleshooting
    1. Fixed issues
    2. Known issues

 

 

Use this topic to learn the basic concepts of CSS such as CSS rules, selectors, inheritance, and more. Also, learn how to associate CSS with your web pages in Dreamweaver.

About Cascading Style Sheets

Cascading Style Sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page. Using CSS styles to format a page separates content from presentation. The content of your page—the HTML code—resides in the HTML file, and the CSS rules defining the presentation of the code reside in another file (an external style sheet) or in another part of the HTML document (usually the head section). Separating content from presentation makes it much easier to maintain the appearance of your site from a central location because you don’t need to update every property on every page whenever you want to make a change. Separating content from presentation also results in simpler and cleaner HTML code, which provides shorter browser loading times, and simplifies navigation for people with accessibility issues (for example, those using screen readers).

CSS gives you great flexibility and control over the exact appearance of your page. With CSS you can control many text properties including specific fonts and font sizes; bold, italics, underlining, and text shadows; text color and background color; link color and link underlining; and much more. By using CSS to control your fonts, you can also ensure a more consistent treatment of your page layout and appearance in multiple browsers.

In addition to text formatting, you can use CSS to control the format and positioning of block-level elements in a web page. A block-level element is a standalone piece of content, usually separated by a new line in the HTML, and visually formatted as a block. For example, h1 tags, p tags, and div tags all produce block-level elements on a web page. You can set margins and borders for block-level elements, position them in a specific location, add background color to them, float text around them, and so on. Manipulating block-level elements is in essence the way you lay out pages with CSS.

About CSS rules

A CSS formatting rule consists of two parts—the selector and the declaration (or in most cases, a block of declarations). The selector is a term (such as p, h1,a class name, or an id) that identifies the formatted element, and the declaration block defines what the style properties are. In the following example, h1 is the selector, and everything that falls between the braces ({}) is the declaration block:

h1 { 
font-size: 16 pixels; 
font-family: Helvetica; 
font-weight:bold; 
}

An individual declaration consists of two parts, the property (such as font-family) and value (such as Helvetica). In the previous CSS rule, a particular style has been created for h1 tags: the text for all h1 tags linked to this style will be 16 pixels in size, Helvetica font, and bold.

The style (which comes from a rule, or a collection of rules) resides in a place separate from the actual text it’s formatting—usually in an external style sheet, or in the head portion of an HTML document. Thus, one rule for h1 tags can apply to many tags at once (and in the case of external style sheets, the rule can apply to many tags at once on many different pages). In this way, CSS provides extremely easy update capability. When you update a CSS rule in one place, the formatting of all the elements that use the defined style are automatically updated to the new style.

You can define the following types of styles in Dreamweaver:

  • Class styles let you apply style properties to any element or elements on the page.

  • HTML tag styles redefine the formatting for a particular tag, such as h1. When you create or change a CSS style for the h1 tag, all text formatted with the h1 tag is immediately updated.

  • Advanced styles redefine the formatting for a particular combination of elements, or for other selector forms as allowed by CSS (for example, the selector td h2 applies whenever an h2 header appears inside a table cell.) Advanced styles can also redefine the formatting for tags that contain a specific id attribute (for example, the styles defined by #myStyle apply to all tags that contain the attribute-value pair id="myStyle").

CSS rules can reside in the following locations:

External CSS style sheets

Collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). This file is linked to one or more pages in a website using a link or an @import rule in the head section of a document.

Internal (or embedded) CSS style sheets

Collections of CSS rules included in a style tag in the head portion of an HTML document.

Inline styles

Defined within specific instances of tags throughout an HTML document. (Using Inline styles is not recommended.)

Dreamweaver recognizes styles defined in existing documents as long as they conform to CSS style guidelines. Dreamweaver also renders most applied styles directly in Design view. (Previewing the document in a browser window, however, gives you the most accurate “live” rendering of the page.) Some CSS styles are rendered differently in Microsoft Internet Explorer, Netscape, Opera, Apple Safari, or other browsers, and some are not currently supported by any browser.

About cascading styles

The term cascading refers to the way a browser ultimately displays styles for specific elements on a web page. Three different sources are responsible for the styles you see on a web page: the style sheet created by the author of the page, the user’s customized style selections (if any), and the default styles of the browser itself. The previous topics describe creating styles for a web page as the author of both the web page and the style sheet attached to that page. But browsers also have their own default style sheets that dictate the rendering of web pages, and in addition to that, users can customize their browsers by making selections that adjust the display of web pages. The final appearance of a web page is the result of the rules of all three of these sources coming together (or “cascading”) to render the web page in an optimal way.

A common tag—the paragraph tag, or <p> tag—illustrates the concept. By default, browsers come with style sheets that define the font and font size for paragraph text (that is, text that falls between <p> tags in the HTML code). In Internet Explorer, for example, all body text, including paragraph text, displays in Times New Roman, Medium font by default.

As the author of a web page, however, you can create a style sheet that overrides the browser’s default style for paragraph font and font size. For example, you can create the following rule in your style sheet:

p { 
font-family: Arial; 
font-size: small; 
}

When a user loads the page, the paragraph font and font size settings set by you as the author override the default paragraph text settings of the browser.

Users can make selections to customize the browser display in an optimal way for their own use. In Internet Explorer, for example, the user can select View > Text Size > Largest to expand the page font to a more readable size if they think the font is too small. Ultimately (at least in this case), the user’s selection overrides both the default browser styles for paragraph font size and the paragraph styles created by the author of the web page.

Inheritance is another important part of the cascade. Properties for most elements on a web page are inherited—for example, paragraph tags inherit certain properties from body tags, span tags inherit certain properties from paragraph tags, and so on. Thus, if you create the following rule in your style sheet:

body { 
font-family: Arial; 
font-style: italic; 
}

All paragraph text on your web page (as well as text that inherits properties from the paragraph tag) will be Arial and italic because the paragraph tag inherits these properties from the body tag. You can, however, become more specific with your rules, and create styles that override the standard formula for inheritance. For example, if you create the following rules in your style sheet:

body { 
font-family: Arial; 
font-style: italic; 
} 
p { 
font-family: Courier; 
font-style: normal; 
}

All body text will be Arial and italic except paragraph (and its inherited) text, which will display as Courier normal (non-italic). Technically, the paragraph tag first inherits the properties that are set for the body tag, but then ignores those properties because it has properties of its own defined. In other words, while page elements generally inherit properties from above, the direct application of a property to a tag always causes an override of the standard formula for inheritance.

The combination of all of the factors discussed above, plus other factors like CSS specificity (a system that gives different weight to particular kinds of CSS rules), and the order of CSS rules, ultimately create a complex cascade where items with higher priorities override properties that have lower priorities. For more information on the rules governing the cascade, inheritance, and specificity, visit www.w3.org/TR/CSS2/cascade.html.

About text formatting and CSS

By default, Dreamweaver uses Cascading Style Sheets (CSS) to format text. The styles that you apply to text using the Property inspector or menu commands create CSS rules that are embedded in the head of the current document.

You can also use the CSS Designer to create and edit CSS rules and properties. The CSS Designer is a much more robust editor than the Property inspector, and displays all CSS rules defined for the current document, whether those rules are embedded in the head of the document or in an external style sheet. Adobe recommends that you use the CSS Designer (rather than the Property inspector) as the primary tool for creating and editing your CSS. As a result, your code will be cleaner and easier to maintain.

For more information on CSS Designer, see Laying out pages using CSS Designer.

In addition to styles and style sheets you create, you can use style sheets that come with Dreamweaver to apply styles to your documents.

For a tutorial about formatting text with CSS, see www.adobe.com/go/vid0153.

About Shorthand CSS properties

The CSS specification allows for the creation of styles using an abbreviated syntax known as shorthand CSS. Shorthand CSS lets you specify the values of several properties using a single declaration. For example, the font property lets you set font-style, font-variant, font-weight, font-size, line-height, and font-family properties on a single line.

A key issue to note when using shorthand CSS, is that values omitted from a shorthand CSS property are assigned their default value. This may cause pages to be incorrectly displayed when two or more CSS rules are assigned to the same tag.

For example, the h1 rule shown below uses longhand CSS syntax. Note that the font-variant, font-stretch, font-size-adjust, and font-style properties have been assigned their default values.

h1 { 
font-weight: bold; 
font-size: 16pt; 
line-height: 18pt; 
font-family: Arial; 
font-variant: normal; 
font-style: normal; 
font-stretch: normal; 
font-size-adjust: none 
}

Rewritten as a single, shorthand property, the same rule might appear as follows:

h1 { font: bold 16pt/18pt Arial }

When written using shorthand notation, omitted values are automatically assigned their default values. Thus, the previous shorthand example omits the font-variant, font-style, font-stretch, and font-size-adjust tags.

If you have styles defined in more than one location (for example, both embedded in an HTML page and imported from an external style sheet) using both the short and long forms of CSS syntax, be aware that omitted properties in a shorthand rule may override (or cascade) properties that are explicitly set in another rule.

For this reason, Dreamweaver uses the long form of CSS notation by default. This prevents possible problems caused by a shorthand rule overriding a longhand rule. If you open a web page that was coded with shorthand CSS notation in Dreamweaver, be aware that Dreamweaver will create any new CSS rules using the longhand form. You can specify how Dreamweaver creates and edits CSS rules by changing the CSS editing preferences in the CSS Styles category of the Preferences dialog box (Edit > Preferences in Windows; Dreamweaver > Preferences on the Macintosh).

Dreamweaver and CSS

In Dreamweaver, you can work with CSS in multiple ways:

  • You can use the CSS Designer to build your CSS with minimal coding. For more information, see Laying out pages using CSS Designer
  • You can also code your CSS by hand. For more information on coding features offered by Dreamweaver, see Coding environment in Dreamweaver.
  • If you prefer to work with Sass, Scss, or Less files, you can code your files using your preferred syntax and use it in Dreamweaver. For more information, see CSS preprocessors.

 Adobe

Dapatkan bantuan lebih cepat dan lebih mudah

Pengguna baru?

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX 2024

Adobe MAX
Konferensi Kreativitas

14–16 Oktober Miami Beach dan online

Adobe MAX

Konferensi Kreativitas

14–16 Oktober Miami Beach dan online