What is CSS?

sass la gi

CSS is a recommendation of the Worldwide Web Consortium (W3C) and offers web designers precise control over the formatting and layout of web pages. CSS enables you to set up default formatting rules which the browser will automatically apply to headings, paragraphs and any other elements on your pages.

CSS is a recommendation of the Worldwide Web Consortium – image by bizflycloud.vn

CSS allows web developers to separate the content of their web pages from the style and formatting information. This means that the HTML code is not cluttered with style information and will be processed more quickly by browsers, leading to faster download times.

Also, since style definitions are normally stored in external files to which all HTML pages are then linked, the appearance of the entire site can be updated by modifying the CSS file(s), without even having to open any of the HTML pages.

CSS allows web developers to separate the content of their web pages from the style and formatting information – image by hoadm.net

To edit CSS in Dreamweaver’s Design view, you use the CSS Styles panel and the Properties panel. The Tag Selector is also extremely useful in specifying the object to be targeted by the CSS rule.

Where can CSS information be placed?

CSS can be incorporated into web pages in three different ways. Firstly, it can be embedded inside an HTML document, in the head area of the page. Secondly, it can be placed in an external file, with a “.css” file extension. Thirdly, CSS can be placed inline; that is to say, inside HTML tags.

It can be placed in an external file, with a “.css” file extension – image by blog.com

It is important to realize that these three methods are not mutually exclusive. A typical website may have one or more external style sheets, combined with internal CSS on certain pages and a few smatterings of inline CSS within one or two pages.

In general, the closer the CSS is to the HTML element it controls, the higher its precedence. Thus inline styles normally take precedence over internal CSS, which, in turn, takes precedence over external CSS definitions.

Relationship – image by bnn.vn

Creating CSS files

Technique 1: Using File – New

As with all other file types, you can create a CSS file by choosing File – New and making the necessary choices in the New Document dialog. In the first column, click on Blank Page and, in the second column (Page Type), click CSS; then click the Create button.

Using File-New

Method 2: Using the Files panel

To create a CSS file using the Files panel, simply right-click on the folder that you want the file to go inside and choose New File from the context menu. You must then remember to end the file name with the extension “.css”: as opposed to “.html”.

image by stackoverflow.com

Associating an HTML page with a CSS file

External CSS files offer the greatest flexibility to web developers, allowing them to link multiple HTML pages to a single CSS file then modify the look and feel of all of these HTML pages simply by updating that one CSS file. It is also possible to use the same external CSS file on more than one website. Dreamweaver allows us to make this process even more efficient by linking a template to the CSS file.

Link multiple HTML pages to a single CSS file – image by 101computing.com

We will examine the use of templates in Chapter 10: Dreamweaver Templates. For the moment, let’s look at linking a single HTML page to a CSS file.

From the CSS Styles panel menu, choose Attach Style Sheet to display the Attach External Stylesheet dialog. Click on the Browse button; locate the .css file then double-click on it to select it.

image by dummies.com

Media options

The dialog also enables you to specify which type of media which the style sheet is designed for. By default, a single style sheet is used for all media; however, for the convenience of visitors to your website, you can designate different styles sheets for different media.

The most important option is of course Screen; but Print is also worth considering for those pages which you know visitors are likely to print out.

Make it easy with CSS – image by stolennguyen.com



Please enter your comment!
Please enter your name here