You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to text by using the Properties panel or menu commands, CSS rules 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.
In this guide, you review CSS rules, create and apply a class-style CSS rule by using the Properties panel, and modify an HTML tag-style rule by using the CSS Styles panel.
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. The declaration block defines the style properties. In the following example, h1 (a heading tag) is the selector, and everything that falls between the braces ({and }) is the declaration block (defining the properties of the h1 heading):
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
text-transform: uppercase;
color: #
An individual declaration consists of two parts: the property (such as font family) and value (such as Georgia). 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 18 pixels in size, Georgia font, uppercase, and bright green (hex value #090).
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 section 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 is automatically updated to the new style.
There are three main types of CSS:
Class style: Similar to the styles you use in word processing and page layout programs. For example, you may want to format all body text in 10-point, Arial, dark green type. You can create a class style with these attributes and then apply this style to all body text in your website. Class names must begin with a period and can contain any combination of letters and numbers (for example, .myhead1).
HTML tag style: Applies global formatting to individual HTML tags rather than to individual selections. Suppose you want to modify the Heading 1 paragraph style to appear always in purple text. Instead of creating a class style and applying it to every heading in the document, you can create an HTML tag style with these attributes and apply it to the Heading 1 <h1> tag. In effect, you are redefining the HTML tag.
ID style: A unique identifier (ID) for a style applied to headers, banners, menus, and other elements present in only one location in the document. Used once within a document or page. IDs must begin with a pound (#) sign and can contain any combination of letters and numbers (for example, #myID1).
CSS rules can reside in the following locations:
• Internal (or embedded) CSS style sheets are collections of CSS rules included in a style tag in the head section of an HTML document.
• External CSS style sheets are collections of CSS rules stored in a separate, external CSS (.css) file (not an HTML file). You link this file to one or more pages in a website with a link or an @import rule in the head section of a document.
Creating a new CSS rule from the Properties panel
In the CSS Properties panel, you can access Targeted Rules and create new ones. A Targeted Rule is a rule you are editing in the CSS Properties panel. When you have an existing style applied to text, the rule affecting the text’s format appears when you click inside the text on the page. You can also use the Targeted Rule pop-up menu to create new CSS rules and new in-line styles or apply existing classes to selected text.
Properties panel, CSS mode
How you edit your CSS depends on selection level. To access rules that apply to a current selection only, you can use the Targeted Rule pop-up menu in the CSS Properties panel. To access all CSS rules for a page, you can use the CSS Styles panel. The CSS Styles panel will be reviewed in the next guide. In this section, you use the Properties panel to create a simple CSS class-style rule to format a block of text.
How you edit your CSS depends on selection level. To access rules that apply to a current selection only, you can use the Targeted Rule pop-up menu in the CSS Properties panel. To access all CSS rules for a page, you can use the CSS Styles panel.
