GS-07: Understanding Style Sheets (CSS) - Dreamweaver CS5
Understanding simple rules about CSS will help you create more efficient styles and assist in the creation of more manageable websites. Learn the benefits of cascading style sheets and distinguish between external and internal styles.
What is CSS?
CSS style is a collection of formatting attributes that is used to style the formatting of a page.
A stylesheet is a collection of various styles that can be applied to a single page of a site, a range of pages or the entire website.
How CSS Benefits Users
CSS can be used to manipulate various HTML elements, such as text, paragraphs and images, to fit certain specifications such as sizing, color, font or placement. CSS can be modified at any time to update a given HTML element.
For example, if a webpage has multiple headings in HTML, a user could write a single style for that page that oversees the styling of all the headings rather than format each heading individually.
Types of CSS Styles
Usually, CSS is placed in its own file so that HTML can be more easily managed; however, an external CSS style sheet is not necessary. CSS can also be embedded into the HTML of a page with the same results.
External CSS Style (Site-wide Style)
External CSS styling comes from an external CSS file which is linked to the HTML of various pages by means of a meta tag. This makes the page reference the external CSS file to pull the proper formatting. External CSS style is ideal for those who use CSS throughout multiple pages.
Embedded CSS Style (Single-Page Style)
Embedded CSS style is a piece of coding added onto individual pages of a site. This method does not require references to an external file of sorts and is best for those who intend to have a page utilize CSS that is unique to the page upon which it resides.
Inline CSS Style (Single-Element Style)
Inline CSS style is a derivative of embedded CSS, only more exclusive as it works on a per element perspective of a page, differing slightly from embedded CSS which applies to the entire webpage. This version of CSS style is not often recommended as it can be rather labor-intensive, requiring the individual manipulation of multiple elements.
Getting Started Videos
- What is Dreamweaver CS5?
- 1. Defining a New Site
- 2. Creating New Documents
- 3. Adding Structure to Text
- 4. Managing Assets
- 5. Placing Images on the Page
- 6. Creating Links
- 7. Understanding Style Sheets (CSS)
- 8. Controlling CSS from the Property Inspector
- 9. Using Live View and CSS Inspect
Dreamweaver is a popular Adobe program for creating websites and applications. It supports HTML5, CSS3, PHP, FTP, jQuery and more; and it works with HostGator web hosting.
You can learn more about Dreamweaver by visiting Adobe's website or the video learning portal, Adobe TV. The video in this article is courtesy of Adobe TV.