How To Create A Style Sheet Css

Why do you create a CSS stylesheet?

It is important to note that throughout your internship for Education Designs you have exercised the process of pre-planning for just about every aspect of your web site. Indeed, selecting your link style properties for your web pages in Lesson 6.01 is just another example! Your Education Designs team leader understands that the most difficult part of design is knowing when something looks finished.

As you progressed through these last 5 modules, have you made any changes? Re-written text? Changed media? That's ok! You may want to change your link styles later too! That is the best part of using a Cascading Stylesheet or CSS. CSS is a list of style definitions or rules. You can create, add, and remove CSS style rules in one location and all your web pages that use the style automatically update and are uniform. This way, you do not need to repeat the same steps over and over in each web page.

Please click the links below to find out what you need to know to understand the difference between internal and external CSS stylesheets and how to apply them in your web pages.

Internal vs. external CSS

In Lesson 5.04, you learned how to use KompoZer's Current Attributes' Inline Style feature to further design your web page text, links, tables, horizontal rule lines, and media. These design properties only applied to the current page element such as the paragraph <p> or media <img>, <audio>, <video> tag. Click images for a larger view. KompoZer Advanced Properties dialog for HTML Attributes, Inline Style, and JavaScript Events.

To design with the same attributes for all similar elements, you can use internal CSS or link to (attach) an external CSS file. There are 3 types of rules you can create, with an added option to create your own rule.

Elements of type (h1, table)
Elements of class (.imageBorder)
- Has the period in front.
  Capitalizing the 2nd word's initial letter is optional.
Element with an id attribute (#top)

Internal CSS

Internal CSS exists as a list of style rules within or embedded in the <head> </head> section of an .htm web page.

KompoZer Source screen with internal (embedded) CSS.

External CSS

External CSS exists as a list of style rules in its own .css file. Below is an example of a few styles in a stylesheet named, jones.css.

KompoZer Source screen with internal (embedded) CSS.

Then you link to the .css file in the <head> </head> section of an .htm web page.

KompoZer Source screen with external (linked) CSS.

KompoZer CSS tutorials

Please complete the tutorial topics listed below and follow along to help you create your own External CSS file. You will give it a proper name and save this .css file to a new folder in your project1 folder called styles (e.g., project1/styles/jones_proj1.css)

Information from the tutorials will be covered in your upcoming quizzes. Please do not skip any of these tutorials.

From KompoZer, click Help -> Help Contents -> Using Style Sheets for Your Web Pages, and then complete each of the following tutorial sub-topics in this category.
Watch the 3 videos below: "How to Work with CSS (Style Sheets) in KompoZer" Parts 1, 2, 3 and follow along in your KompoZer app. Courtesy of How Do I Do That Videos?. In the bottom-right of each video, click the Full Screen button for a larger view and click the button to view text subtitles.

Additional resource for editing CSS in KompoZer: Cascading Stylesheets (introduction to CSS in KompoZer)

Editing CSS in KompoZer

Once you have added your CSS styles (internal or external), the styles are displayed on the left side of the CSS Stylesheets dialog box (under Styles and Rules).
1. Select the style you want to edit and make the changes you desire using the tabs and options on the right, and then click OK .
2. Once the stylesheet and HTML pages are saved, all the pages linked to the external stylesheet are updated.
Create a new style for existing CSS stylesheet: Each time you click the CSS button in the KompoZer main menu while in an HTML page linked to a stylesheet, you return to this view.

...To return the screen where you can create a new rule, click the CSS button in the top-left.
Apply a style in your web page
1. Select the text or media item, and then select the style from the Class drop-down list.
How styles work together: 3 defining characteristics
1. Cascading nature—indicates that a general specification in a stylesheet can be overridden by a more specific element. If there are conflicting styles for some elements, the innermost definition is applied. Example: If a paragraph's text was defined to have the color blue and a second definition is for italicized text to be green in color, the paragraph text would be blue until it encountered italicized text which would be changed to green.
2. Grouping—refers to the ability to apply several different rules to a specific portion of the element of the document. Example: A level one heading style could include font size, font color, and apply bold.
3. Inheritance—indicates that stylesheet rules are inherited from parent to child. If there is not a specific rule for a particular HTML tag, then the tag assumes the stylesheet properties of the tag in which it resides. Example: If all boldfaced text is assigned blue color, and a small amount of underlined text falls within a group of boldfaced text, the underlined text will inherit the stylesheet properties of the boldfaced text.
Removing a style
1. If you decide to remove a style from your external stylesheet: Select the style in the CSS Stylesheets window and click the Delete button .
2. This will remove the reference to the external stylesheet on the page you have open, but does not remove the external stylesheet from your root folder.
3. If you are no longer using an external stylesheet, you should delete it from your root folder.
Return to the previous page to finish the 6.02 External Links lesson, or if applicable, continue to lesson 6.03 Site Map.