Using CSS in Web Site Design

Transcription

1 Question 1: What are some of the main CSS commands I should memorize? Answer 1: The most important part of understanding the CSS language is learning the basic structure and syntax so you can use the language to communicate what you need. Like learning any new language, you may not start out saying very complicated things, but you should know enough to say at least a few things. CSS allows you to control how the HTML looks. You can use CSS to describe different HTML tags and give them attributes. For example, you might add a CSS tag that redefines the <p> and </p> tag and makes anything inside the <p> </p> tags appear orange. A good way to get a jump start into adding CSS code to your Web page is by going to Modify > Page Properties in Dreamweaver and simply setting the background color of your Web page. This will automatically insert code into the header of your Web page. You can then either edit the CSS directly in Dreamweaver s Code view, or you can create new styles using Dreamweaver s what-you-see-is-what-you-get (WYSIWYG) interface for styles. Because understanding the syntax is key at this point, you will use the Code view. Once you have set the background color of the Web page, you can click over to Code view in your Dreamweaver document. Then, look toward the top of the Web page and inside the header area. This area appears inside the and tags. You should see a tag for the body. The style Dreamweaver added for you is from setting the background color. You are going to add a style for all tags inside your document. To do this, create a new entry that reads as the following: p { color: #FFCC00;} This entry tells the Web browser that any time it finds a <p> and </p> tag in your document to give the text inside the <p> </p> tags the hexadecimal color of #FFCC00, which is orange. Notice that the name of the tag comes first and is followed by curly quotes. Inside the curly quotes are the attributes you decide to give to that tag. You might also decide to underline the text. To do so, you would write the following: p { color: #FFCC00; text-decoration: underline; } Notice that the two attributes (color and text decoration) are separated by 1

2 semicolons. This is important because without these semicolons, the styles might not work in all browsers. The semicolon tells the browser that one style definition has ended. You will also notice that a colon separates the attribute from the value. Question 2: What is the difference between inline CSS and external CSS? Answer 2: Inline CSS are styles that appear inside the HTML. External CSS are styles that appear in a file outside the HTML file. In general, designers who use CSS extensively will use external style sheets because these allow the designer to control the appearance of their files from one location. Also, having the style sheets located in an external file means that they don t have to repeat the style definition every time they want to apply the definition. For example, imagine a designer decides to use inline styles. This means that whenever a designer decides to customize the appearance of some text, the designer adds that style in that exact instance. For example, here is some simple HTML that uses inline styles: <p style="color: #ffcc00"> This text should be orange. <p style="color: #ffcc00"> This text should also be orange. You will notice that the designer must always include the style inline and exactly when and where the designer wishes the change to appear. One drawback of working this way is that if the designer later decides to change all text that appears orange to blue, the designer would need to find every instance of style="color:#ffcc00;" and change it to style="color:#000066;". There could be hundreds of these littered throughout the site. An external style sheet, however, provides a designer a central location from which to define and modify styles. The benefit of this is that the designer will ultimately type less code because the designer is typing these definitions only once and then merely calling those definitions from inside the HTML file. (For example, a designer could create a class of styles and simply state inside a 2

3 given HTML tag that it belongs to that class; there are Q&As on how to do this.) It is important to know that inline styles trump external styles. This means that if the external style sheet says to make text blue and an inline style says to make the text orange, the inline style will win and the text will be orange. Thus, a designer using an external style sheet might choose to use inline styles where exceptions in styling need to be made. Question 3: What are classes? Answer 3: Designers use classes to minimize the amount of code they need to write. A designer can define a class in cases where some kinds of text always need to be a certain color. For example, if a designer knows that all headlines inside a site should appear orange, then the designer can decide to make a class that always makes the headlines, or any other text the designer chooses, into orange. To do this, the designer can create a class of styles and place it in the external style sheet. The class would look like this (you can, in fact, copy this code and paste it into a blank file and name it "stylesheet_file.css" to create this external style sheet):.orangetext { color: #FFCC00;} Then, whenever the designer decides to want orange text, the designer could simply call this code from wherever it is needed inside the HTML file. Notice the designer has chosen to make the text inside the <p> </p> tags orange simply by calling the class, orangetext. <p class="orangetext"> This text should be orange. <p class="orangetext"> This text should also be orange. 3

4 Whenever the designer wanted to change the color of the text, the designer would simply change the attributes of the class, orangetext, in the external CSS file. This raises an interesting point: Designers should avoid using descriptive class names. If the designer changes the CSS definition of "orangetext" so the text becomes blue, the name of the class becomes moot. Question 4: What are ID tags? Answer 4: IDs are much like classes. They work the same way. They are defined in very similar ways. The main difference is in how designers use the ID tag. With classes, a designer can use these more than once. With ID tags, the goal is to define the ID once and use it once. To do this, the designer can create an ID style and place it in the external style sheet. The ID style would look like the following (you can, in fact, copy this code and paste it into a blank file and name it "stylesheet_file.css" to create this external style sheet): #header { width: 600px; height: 200px;} Notice that, unlike class, IDs have a number sign preceding them. Classes will have periods preceding them. A designer might choose to use an ID tag to define an element the designer knows will only appear once. One example of such an element is the header that most sites use to house the site s logo. The logo will only appear once on the page. It will usually be at the top: <p id="header"> logo might go here </p> Question 5: How can Web designers make text visually appealing on a Web site? 4

5 Answer 5: Writing for the Web is significantly different from writing other types of descriptive content. In general, Web content consists of shorter paragraphs and sentences. Users tend to form an impression of a Web site within 10 seconds of opening a Web page. If visitors do not see relevant information on the page, they are likely to leave the site. Use headings, ordered and unordered lists, and bold and italic formatting to help guide users visually through important sections of the page. It is important to remain consistent with text formatting through various Web pages to maintain the user s trust in the contents. Sentences should consist of objective, descriptive, and concise words unless users expect otherwise. For example, when describing a certain service or product, provide as much information as possible within a sentence. Quotes from other customers or personal recommendations to visitors about certain products may be useful but should be clearly delineated from objective content to avoid confusion. Use appropriate language for Web pages designed to express opinions and ideas about specific topics or created to communicate advanced information about the subject. In these cases, using oversimplified words or concepts may drive your visitors away from the site. Question 6: How do I add special characters, color, and formatting to my Web pages? Answer 6: The Web color system consists of 216 RGB (red, green, and blue) Web-safe colors that are universally recognized by Web browsers and operating systems. Dreamweaver CS3 has expanded on the Web-safe color concept; it offers a choice between Color Cubes, Continuous Tone, Windows OS, Mac OS, Grayscale, or Web-Safe color palettes as shown in the following: Dreamweaver CS3 Application: 5

6 Today, many Web designers use custom, not Web safe, colors for their designs because they believe that the Web-safe color system unnecessarily limits Web design capabilities and that most Web browsers support advanced colors. However, one should be aware of the fact that such an approach is risky and requires thorough testing in various environments. In Web design, color codes are converted into the hexadecimal (six-digit) system, which defines colors as a combination of 00, 33, 66, 99, CC, or FF. For example, the hexadecimal code for black is , red is FF0000, and blue is 0000FF. When specifying a color in your HTML code, you need to place a pound sign in front of it as shown here: This text will show in red In addition to specifying font characteristics and creating links or hyperlinks on your Web site, you can use HTML tags to position your content within a page, format it, or insert special characters as shown in the following: Left-aligned text Bold Text Italicized Text Text with special characters, such as & and &quote; Please note that & will be displayed as "&" on the Web and &quote; will be displayed as a set of double quotes. 6

7 Question 7: What is CSS? Answer 7: Although most Web designers prefer tables to frames when building Web sites, the new design trend takes the concept of separating layout from content by using Cascading Style Sheets (CSS). CSS may be internal or external depending on the Web site. The style sheet includes a detailed listing of all of the styles used throughout the Web site: location of certain elements within a Web page, size and color for various headings, and so forth. Once these styles are created, a Web designer needs to specify the type of the element; for example, the style sheet may indicate that all items in the unordered lists should be red and underlined. Instead of specifying these properties for every single item, one would include them into the style sheet. When rendering a Web page, the browser would look at the style sheet to determine proper formatting. One can create external CSS in Dreamweaver by going into New Document > CSS Style Sheets as shown in the following: Dreamweaver CS3 Application: 7

8 In the event that you do not want to create a CSS style sheet from scratch, you can select one of the existing style sheets and click "Create." For example, if you select "Full Design: Georgia, Red/Yellow," the style sheet would, among other styles, include the specifications for the table row and table data elements as follows: td, th { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 24px; color: #330000; } If you now apply this style sheet to one of your existing tables, all of the data cell data would have the following formatting: font: Arial (if Arial is not installed, then Helvetica, else sans-serif); font size: 12 px; line height: 24 px; color: black. 8