Cascading Style Sheets Understanding styles The term cascading

Cascading Style Sheets Understanding styles

• The term cascading describe the capability of a local style to override a general style. • CSS applies style formatting to your page in one of three ways: – Via an external, linked styled sheet – Via an embedded style – Via inline style rules • External Style Sheets =files containing the CSS rules; they link one or more Web pages. One benefit to linking to an external style sheet –you can customize and change the appearance of all pages easily from one file. They are recommended. • Embedded Styles are those typically written into the actual file at the top of the web page within a <style>…</style> tag pair. (however, they can be placed anywhere on the page) • Inline Styles are inserted within HTML tags using the style attribute- a technique known as inline styles ( the most local-> has the ultimate control) – These two last categories are also called internal styles

• External style sheets –can use 2 methods: – The link method: a line of code is added outside of the <style> tags: <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> The <style> tag for a Cascading Style Sheet identifies the type attribute as text/css.

• Embedded styles Sample: <style type="text/css"> <!-a: link { color: #FF 3300; } a: visited { color: #993300; } a: hover { color: #FF 9900; }

• Inline styles: Sample: <div id=“Layer 1” style=“position : absolute; visibility: inherit; left: 314 px; ……. . > </div>

Working with Internal Styles • There are 3 different selector types( kinds of elements defined by styles) that can be used : – Class: allows you to create classes that are not tied to any particular elements. You can apply a single class to many different elements. Classes are indicated by their initial period – Tag: allows you to specify an HTML tag as the element that will be redefined by the style – Advanced: allows you to create styles that are used for specific tag combinations (contextual selectors). It enables you to create IDs, which are similar to classes but they can only be used once per page as a way of defining or uniquely identifying a particular element. =>IDs are often used for scripting purposes and are indicated by #

Converting Internal Styles to External Styles • Gives consistency from page to page • The internal styles ( especially those with the same name) should be deleted before attaching an external style sheet, to avoid conflict, reduce the amount of code and reduce possibility of error and confusion: In the list of rules on the CSS Styles panel, select <style> and delete it

Linking to an Existing External Style Sheet • How to do it: • Attach the. css file in the styles panel • The link option is selected by default when it is the first time attaching a style sheet – Given the cascading nature of style sheets, the second style sheet has priority and overrides any conflicting styles in the first sheet. Likewise, a third style sheet overrides any conflicts in the first and second sheets.

Creating External Styles Creating Styles for Tag Combinations

Editing an Existing Style • Web pages tell the browser which external style sheets to use for instructions on how to display the formatting. • The styles are applied to the elements by the browser at the time that a file is seen by visitor. • Any modifications are automatically reflected in every page that is attached to the edited style sheet at the time it is viewed. • Because formatting values are contained in the style sheet, those values need to be modified in only that one location to affect all pages linked to the style sheet. This is useful because the appearance of an element such as text can be changed in several pages or entire site very quickly.

Working with Style Precedence • The origin which is the source of style , is evaluated first: – Browser defaults (lowest priority) – Styles created by user – Styles specified by the web page ( highest priority) • The order of styles concerns where styles are located: – – – Browser defaults (lowest priority) External CSS styles Inline CSS styles Local HTML formatting ( the formatting which is closest to the text; highest priority-overrides any other options set in the styles above if there are conflicts)-no used anymore by Dreamweaver because the <font> tag is deprecated (marked for deletion) in HTML 4. 0

Creating a basic CSS Layout • CSS can be used in combination with, or as an alternative to, creating layouts with tables. • The benefits: – – – – The ease and speed with which a CSS-based site can be updated A consistent appearance Less code Faster download time Increased accessibility Flexibility Efficiency (content—separated from the design and attributes that define appearance)