1. Using Cascading Style Sheets (CSS) Dept. of Computer Science and Computer Information CSCI N-100

2. What is CSS CSS is an abbreviation for Cascading Style Sheets. Style sheets are simply text files (.css ), composed of lines of code that tell browsers how to display an HTML page. They give the designer more control over the appearance of a webpage by allowing to specifically define styles for elements, such as fonts, on the page. By using CSS one could separate HTML content from its appearance, distinguishing style from structure.

3. What is CSS In CSS, a style is a grouping of different properties given a common name. If you were to re-create this paper for the web, you could define styles for the text on your title page, outline page, and so on. For our example, you could create a style called topicHeadings and specify its font properties to be bold and have a font-size of 14pt. A specification of a property is known as a rule. With a style established, whenever you type in text for a topic heading, you can set it to the topicHeading style and all of that style's properties are applied to the selected text in one step. Later, if you decide to change the font color or some other aspect of the style, you can just change its definition or specification in the style sheet and the appearance of all text marked with that style will change throughout the webpage or website.

4. Why are style sheets called 'cascading'? As already indicated, a designer can create a style sheet to tell a browser how she prefers a webpage displayed, but browsers and even the users viewing the webpage may apply additional style sheets of their own. Since several style sheets may be affecting the appearance of an HTML page, there must be an order in which style sheets are applied. The style sheets are applied in a 'cascading' order with the designer's style sheet having the strongest claim, followed by the user's, and then the browser's. If there are conflicts between the designer's and user's style sheets, the browser's would resolve it. Although, in the end, the user can always override any other style sheet if she wishes.

5. Concept One way to think of CSS is as a word processing tool for the web. For example, if you were writing a paper in a word program, you may have a title page, an outline page, and then the pages for the rest of your paper. For your title page, you set the text of your paper's title to be bold, Times New Roman, and have a font-size of 18pt. On your outline page, you set the text to be normal with a font-size of 12pt. In the rest of your paper, for all of the topic headings indicated in your outline, you set that text to be bold and have a font-size of 14pt. For the text in your paragraphs, you set them to be normal with a font size of 12pt. Within your paper, there are quotes that you want to indent and have in different fonts, etc. Bold, font, and font-size are all properties of text or Type. By specifying how each type element in your paper appears, what you are essentially doing is creating styles.

6. Advantages of CSS More Precise Formatting Separation of HTML Content from Appearance Saves Time Easier Site Maintenance Web Accessibility

7. Disadvantages of CSS Inconsistent Browser Support Larger Initial Time Commitment Not Perfect Bugs

8. Implementation Methods There are three methods of CSS implementation: – external, – Internal or embedded, – and inline. Which method to use depends entirely on how large your website is and what type of maintenance will be kept.

9. External style sheets For larger sites, i.e. consisting of more than four or five HTML pages, external style sheets are recommended. By creating an external CSS file that links to all the your pages, you can update the appearance of your pages by changing the values in just one file. This is great for management of large, sophisticated sites. For example, different departments of an organization can create their own departmental webpages yet still project a consistent overall organization image by sharing a few CSS files. External style sheets also save time, not only in terms of when you're updating or editing, but also download time. Since one file contains all the style instructions for a website, once it is downloaded, all the pages that are linked to it can refer to it. It is not downloaded every time a page is requested, which makes your website much smaller and quicker to download.

10. Internal (or Embedded) style sheets For smaller sites, maybe less than two to three pages, it may be easier to use embedded CSS. Internal (or Embedded) style sheets only affect the style of the pages they are written into. When you update the appearance of a website, you will have to edit every page. Inconsistency may arise if you miss any of the pages. Instead of one file, your style instructions are contained in every file and they will be downloaded every time a user sees a page from your site. This repeated action will slow download time. If your site is small and it does not contain many style instructions, then download and maintenance time should not be an issue.

11. Inline CSS Many web developers think that inline CSS should be avoided, because it really does not support the CSS philosophy of separation of content from appearance nor does it take advantage of CSS's site management capabilities (So when internal style sheets are mentioned, it usually refers to embedded style sheets.) Inline CSS is written among the rest of the HTML code, similar to presentational HTML tags. To edit, you would have to go through the page line by line to find the CSS code. This is not an efficient method of implementing CSS.

12. Here are examples of an inline style rule. Note the structure of the rule. Inline style for the body of the web page Inline style for a paragraph Some text goes here Inline style for a paragraph Some Text goes here

13. CSS - Inline style Cascading Style Sheets - N100 Here are some notes and links to help with the CSS for the web page. Looking below, this is a sample of an inline style. The style being used is for the body of the web page. The information is the background color for the web page is maroon; the font style (family) has three selections - the first selection is a script, or cursive style of lettering, the last two are default styles. If the user viewing your page does not have the first font on their computer, the browser will go to the next option (serif). The browser will display the text in a default serif setting. Note the style is written inside the html tag. That is why it is called inline. It is inline with the tag. An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly

14. An internal style sheet (also called embedded sometimes) should be used when a single document has a unique style. By using an internal style, you are telling the browser how to display similar elements in the web page. All h1 headings will have the same style – orange text and centered. All paragraphs will have the same style – font size of 20 and font style of Times New Roman. You define internal styles in the head section of an HTML page, by using the tag, like this: CSS – Internal style body {background-color: #d0e4fe;} h1 {color: orange; text-align: center;} p {font-family: "Times New Roman"; font-size: 20px;} Cascading Style Sheets - N100 Here are some notes and links to help with the CSS for the web page.

15. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. CSS - External style Cascading Style Sheets - N100 Here are some notes and links to help with the CSS for the web page. Each page must link to the style sheet using the tag. The tag goes inside the head section. hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a.css extension. An example of a style sheet file is shown below.

16. References Wellesley College Information Services http://www.wellesley.edu/Computing/Dreamweaver/CSS/cssMain.html http://www.wellesley.edu/Computing/Dreamweaver/CSS/cssMain.html W3schools http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp