About text formatting and css, About shorthand css properties – Adobe Dreamweaver CC 2014 v.13 User Manual
Page 168
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 inheritence. 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
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 Styles panel to create and edit CSS rules and properties. The CSS Styles panel 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 Styles panel (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.
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
.
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
161