Textbook Notes (363,534)
Canada (158,402)
Dr.Hurst (18)

Unit 3 CSS notes.docx

8 Pages
Unlock Document

McMaster University
Computer Science

McMaster University Computer Science Com Sci: Introducing Cascading Style Sheets Using CSS Element Selectors to Format Web Pages Tutorial 3 Review Session 3.1 Introducing Cascading Style Sheets The purpose of XHTML is to create structure for the page content. Cascading Style Sheet (CSS) is used for the presentation- the formatting of your Web pages. CSS provides a way to easily and efficiently format an unlimited number of Web pages so they have the same appearance. CSS offers many advantages over using XHTML alone, including the following: - Creater consistency in your Web site. You can apply styles you create in one document to some or all of the other pages in your web site. - Easily modified code: When you modify code to change the style of one page, all of the pages in your Web site can change, which can help you maintain a consistent design. - More flexible formatting: You can format and position text in ways that you cannot with XHTML. - Greater functionality: Many features of word-processing programs, such as tab indents, line spacing, and margins-none of which are available in XHTMAL-are available in CSS. (XHTML text type: .htm) When a CSS feature appears in all browsers without any differences, the feature is said to have cross-browser support. However, no contemporary browser supports all the features of CSS, nor do these browsers support CSS in a consistent manner. Understanding How Styles are written Using CSS, you can change how an XHTML element appears in the browser. (For example, the XHTML strong element makes text appear as bold, but the strong element does not change the font, size or color of the text. Using CSS, you can create a style for the strong element so that whenever you use it, you control how that text appears in the browser) A style is a consistent, recognizable pattern. A CSS style is a collection of one or more rules, and a style sheet is a collection of styles. A style sheet can be written within an XHTML document or as a separate file. A rule is the combination of selectors, a property, and a value. The Selector identifies the element to which you are applying a style. CSS have several kinds of selectors, but the three most common are element selectors, class selectors, and id selectors. Element selectors, also known as type selectors, are used to format XHTML elements. Class Selectors are used to select a specific XHTML element or format one or more elements on a Web page. ID selectors are used to uniquely format a single element on a Web page. In CSS, the property describes how the selector will be modified. The value indicates the manner or extent to which the property will be modified. (ex: color is the property and white is the value: color: white;). Recall that XHTML code has syntax-specific rules for how the XHTML code should be entered. CSS also has its own syntax, and you must follow it; otherwise, the CSS code will not function properly. In writing CSS code, the selector comes first. (ex, if the h1element were the selector, the code to style the h1 element selector would begin with h1) Creating a CSS Rule: - In a text document, type the selector followed by a left brace, as in the following code and the press the Enter key. Selector { - Type the declaration (each indented by two or three spaces), separating a property from a value with a colon. Type a semicolon after each declaration, and then press the Enter key, as in the following code. Property: value; - Type a right brace on its own line (but not indented) below the declaration list. The following code shows the complete syntax for a rule: Selector { property: value; property: value; } Each property and value pair (for example, color: white) is called a declaration. The declaration is preceded by a start (left-facing) brace, like this: h1 { A colon follows the property. These should be only one space after the colon. A semicolon follows the value. The declaration should be indented two or three space to make the code easier to read. h1 { color: white; If there is more than one declaration, type each declaration on a separate line and indent the code for each h1 { colour: white; background-colour: teal; Type and end (right-facing) brace to close the declaration list, the group of all the declarations. Type the end brace on a separate line, but do not indent the end brace. h1 { colour: white; background-colour: teal; } In your CSS code, it’s the punctuation that matters- the braces, the colons, and the semicolons. What doesn’t matter is the spacing, indentation, line returns, or the position of the braces. CSS Terminology Quick Glossary CSS Style A collection of one or more rules Style Sheet A collection of Styles Rule The combination of a selector and one or more properties and values Selector What is being styled Property How the selector will be modified Value The manner or extent to which the property will be modified Declaration A property and value pair Declaration List All the declaration for the same selector Figure3-5 on Txt pg 680 shows the components of a CSS style You should avoid paragraph format because it write everything in a long line which is hard to recognize. Most CSS editing software, such as Adobe Dreamwaver and Microsoft Expression Web, creates code with the same formatting as you have learned. The selector and the start brace are written on a separate line. Each declaration is written on a separate line and indented two spaces so that the declarations stand out from the selector. The end closing brace is placed on a separate line, indicating the end of the style code for the selector. Although it is not required, it is better that you always end the declaration list with a semicolon because you can avoid potential syntax error. Working With Color The color property is used to change the foreground (the text) color of an element. The background-color property changes the background color of an element. Whenever you change either the foreground color or the background color, it is important to have sufficient contrast between the two colors. (It is best to avoid green-on-red or red-on-green combinations-for the color blindness people). In CSS code, colors are most commonly entered in three ways: (1) by name, (2) by the RGB triplet, or (3) by a hexadecimal value. (There are 216 named colors, which is not a large number, but not all of them may be supported by all browsers.) Most web page designers use hexadecimal values for color because there are several million color values from which to choose, which offers you greater variety. The hexadecimal system (hex code) is based on the number 16 and uses the number 0-15. The number 0-9 are also used in hexadecimal, but after the number 9, the letters A through F represent the numbers 10-15 (as shown in Figure-3-6 pg 682). When entering hexadecimal color values in CSS code, you precede each value with a flag character, the # symbol. A flag character has special significance in XHTML or CSS code. In this instance, the # flag character indicates that the numbers after it should be treated as code, not as numbers. After the flag character, you enter three pairs (6) of hexadecimal numbers or letters, each representing the intensity of red, green, and blue, respectively. In the system, 00 is the lowest intensity and FF is the highest. Repeating values can be entered into code using a shorthand notation called short hex. In Short hex, you can use just the first number or letter to enter each pair, but only if the pairs have repeating characters. (ex: the color of yellow: #FFFF00 can be written as #FF0). Web-safe colors are colors that all computer monitor should be able to display them correctly. CSS version 2.1 has 17 Web-safe colors (check on figure3-7 Txt 682). Creating an Embedded Style Sheet An embedded style sheet is one in which the CSS code is written in the section of an XHTML documents. The primary advantage to creating an embedded style sheet is that the XHTML code and CSS code are on the same page, which makes it easy to enter and modify the CSS code while you are developing the Web page. Once the Web page is finalized and you are satisfied with the CSS code, you can move the CSS code to an external style sheet, a separate documents where you can store and easily revise your styles. The style element in XHTML is a special element that serves as a container for all the style code. The type attribute, with a value of text/css, is always entered within the start tag. - Position that insertion point on the blank line between the start tags. - Type the CSS code. - The following code shows the syntax for an embedded style sheet: For example: To create the style for the h1 heading: Txt pp.684 The CSS display property change whether the background color extends the full screen width. The display property determines how an element will be display. The display property has 17 values, but the two most commonly used are block and inline. Block is the default value, which extends the color across the screen. Assigning the display property a value of inline will place a background color behind the text only. The code for the display property h1{ color: white; background-color: teal; display: inline; } Grouping Element Selectors If you want to apply the same style to more than one element so they have the same appearance, you can group several selectors together. Grouped selectors are selectors with the same declaration grouped into a comma-separated list. To group selectors, type each element selector separated by commas, like this: p,li { color: navy; } Notes: While you must insert a comma after each element in a list of grouped selectors, it doesn’t matter if you insert a space after the comma or not. CSS inheritance is the method where a child element inherits characteristics from the parent element. A block- level element and body element, such as p, is very often the parent element to an inline element such as strong. For example, you applied the color green to the p element. By default, any of the child elements of the p element, such as strong will also have text appear in the green. Because the child ( the strong element) inherits the green color from its parent (the p element), you don't have to create a separate style for the strong element to have the text appear in green. Note that if you do not want a child element to inherit the style of the parent element, you can apply a different style to the child. The body element is the parent to many elements on a Web oage. Because of these parent-child relationships, you can apply a style to the body element to affect other styles of the entire Web page, such as the page margins, font, foreground color, and background color. For example, if you style the body element to have text appear in green, all of its child elements, (such as the p, em, strong, ul, ol, and heading elements) will also appear in the green, unless you have specifically style those element selectors otherwise. Using Descendant Selectors A descendant selector is a selector nested within another selector. For example, suppose that you want bold and italic text to appear as maroon. To achieve this effect, you would create the following style:
More Less

Related notes for COMPSCI 1BA3

Log In


Don't have an account?

Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.