background preloader

CSS

Facebook Twitter

Understanding cascading style sheets. Cascading style sheets (CSS) is a collection of formatting rules that control the appearance of content in a web page.

Understanding cascading style sheets

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 faster 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. Best practices with CSS in Dreamweaver CS4. After a somewhat slow start due to varying degrees of support by the major browsers, the use of cascading style sheets (CSS) has moved from simple text formatting to the de facto standard for page layout.

Best practices with CSS in Dreamweaver CS4

Throughout this gradual evolution, Dreamweaver has regularly added and enhanced CSS features to support designers and developers alike. With the release of Dreamweaver CS4, new features such as Live view will completely change the way in which we go about designing CSS-based layouts in Dreamweaver. This article discusses best practices for using CSS and highlights specific CSS features in Dreamweaver CS4. Cascading style sheets are, in general terms, a collection of formatting rules that control the appearance, or presentation, of content on a web page. Implementing CSS within a page or site is done in one of three ways: Inline: A one-time style applied within the code as an attribute of a given element (or tag). Many websites use a combination of these methods. CSS Horizontal Drop Down Menu - 1 of 2.

CSS page layout basics. A CSS page layout uses cascading style sheet format, rather than traditional HTML tables or frames, to organize the content on a web page.

CSS page layout basics

The basic building block of the CSS layout is the div tag—an HTML tag that in most cases acts as a container for text, images, and other page elements. When you create a CSS layout, you place div tags on the page, add content to them, and position them in various places. Unlike table cells, which are restricted to existing somewhere within the rows and columns of a table, div tags can appear anywhere on a web page. You can position div tags absolutely (by specifying x and y coordinates), or relatively (by specifying their distance from other page elements). Creating CSS layouts from scratch can be difficult because there are so many ways to do it. If you are an advanced user, you can also insert div tags manually and apply CSS positioning styles to them to create page layouts. Simple styling with CSS. If the font is included in the Available fonts list on the right, highlight it and click the left arrow to add it to the Chosen fonts list on the left.

Simple styling with CSS

Make sure you add the fonts in the order given here because you are creating the order that browsers will attempt to display them. If the font is not available on your system, you'll have to type the font name into the text box under the Available fonts list. Be sure to use correct spelling or the browser will not recognize it and it won't be displayed. For this list (which will style the main heading) order the fonts as follows: Marker Felt, Impact, Arial Black, sans-serif. If you're hand-coding this list, note that fonts with more than one word in their name must be typed in quotation marks, as shown. I chose this font order for a reason. With Type still selected in the CSS Style Definition dialog box's Category list, choose the font list you just created.

Next, you'll add the little background icon to the left of this heading.