Methods for configuring Cascading Style Sheets. Applying style to element name selectors. Style Rule Basics. CMPT 165: Cascading Style Sheets

Size: px

Start display at page:

Download "Methods for configuring Cascading Style Sheets. Applying style to element name selectors. Style Rule Basics. CMPT 165: Cascading Style Sheets"

Nigel Spencer
5 years ago
Views:

1 CMPT 165: Cascading Style Sheets Tamara Smyth, School of Computing Science, Simon Fraser University October 7, 2011 Methods for configuring Cascading Style Sheets There are 4 method to incorporating CSS in a website: 1. Inline: coded in the body of the web pages as an attribute of an HTML tag. Style only applies to that element. 2. Embedded: defined in the head section of a web page. Style applies to entire web page document. 3. External: coded in a separate text file called an external style sheet. Style applies to all web pages coding a link element in the head section. 4. Imported: similar to external. can be imported into embedded styles or into another external style sheet using the import directive. 1 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 2 Style Rule Basics Applying style to element name selectors Style sheets are composed of rules that describe the styling to be applied to a web page. Each rule has 2 parts: 1. a selector 2. a declaration CSS Style Rule Selector can be the HTML name for: 1. an element 2. a class 3. an id CSS Style Rule Declaration indicates the CSS property you are setting (e.g. colour) and the value you are assigning to the property. body { color : blue } body is the Selector, color is the Declaration Property, blue is the Declaration Value. To set the background color of an element, class or id, is background-color. The following will set the background of a web page to yellow: body { background-color: yellow } To note: the declaration is enclosed within braces and the color symbol (:) separates the declaration property and the declaration value. CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 3 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 4

2 The color Property Inline CSS using the style attribute To configure the colour of text, use the color property. The following CSS rule will set the text color of a web page to be blue: body { color: blue } You can configure both background and text using the same rule selector by separating declarations is a semicolon (;): body { color: blue; background-color: yellow } Color can be any valid colour: aqua, black, blue, fuchsia, green, grey, lime maroon, navy, olive, purple, red, silver, teal, white, yellow. The most flexible way to specify color is by its numeric value (either hexadecimal, or RGB triplet in decimal). The style rule to create a soft yellow background #FFFFCC with medium blue text #3399CC is Recall that CSS can be inline, embedded, external and imported. An inline style is coded using an element s style attribute. Recall, a declaration consists of a property and a value separated by a colon (:). To set an <h1> tag to a shade of red: <h1 style= color:#cc0000">this is displayed as a red heading</h1> If there is more than one property, they are separated by a semicolon (;). For red text and a gray background: <h1 style= color:#cc0000; background-color:#cccccc;"> body { color:#3399cc; background-color:#ffffcc } CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 5 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 6 Inline CSS example Write another paragraphs and override the text color to dark gray: # To set the global style (i.e. for the entire page) set the style attribute in the body element: <body style="background-color:#f5f5f5;color:#008080;"> Example: <!DOCTYPE HTML> <html> <head> <title>inline CSS Example</title> <meta charset="utf-8"> </head> <body style="background-color:#f5f5f5;color:#008080;"> <h1 style="background-color:#008080;color:#f5f5f5;">inline CSS Example</h1> <p>this paragraph inherits the styles applied to the body tag.</p> </body> </html> Figure 1: Using inline CSS. CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 7 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 8

Using Embedded CSS Embedded styles apply to the entire document and are placed within a <style> element in the head section of a web page. The opening and closing <style>.

3 Using Embedded CSS Embedded styles apply to the entire document and are placed within a <style> element in the head section of a web page. The opening and closing <style>...</style> tags surround the embedded style rules. In XHTML you will see a type attribute for the style element. This is not required in HTML5. <head> <title>embedded CSS Example</title> <meta charset="utf-8"> <style> body { background-color: #E6E6FA; color: #191970; } h1 { background-color: #191970; color: #E6E6FA; } h2 { background-color: #AEAED4; color: #191970; } </style> </head> Figure 2: Embedded Styles CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 9 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 10 External CSS The <link> element The flexibility of CSS is best used when the CSS is external to the web page document. It s good to keep style (CSS) and structure (HTML) separate whenever possible! An external CSS style sheet is a text file (as HTML is a text file) but with a.css extension. Rather than HTML tags, it contains CSS rules. Since styles are in a single file, any modifications to the style of a webpage need only be done once, and to one single file (rather than to all the files making up the website!). The <link> element associates an external style sheet with a web page. It is placed in the head section of the page and is a stand-alone tag (singleton). <link> has 3 attributes: rel, href, and type 1. rel specifies the relationship between the current document and the linked document: stylesheet. 2. href specifies the location of the linked document: cssfilename.css 3. type specifies the type of file: text/css (optional for HTML5) The following is included in the head of an HTML document to associate it with the external style sheet named color.css <link rel="stylesheet" href="color.css"> TODO in class: create an external style sheet called color.css containing the following code: body { background-color:#00ffff;color:#ffffff; } CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 11 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 12

4 The Class Selector Configuring the Class Selector Use a CSS class selector when you need to apply a CSS declaration to a certain set of elements and not a particular element. As an example, you may want to highlight or emphasize items of a list in red (but not the whole list): CMPT 165 has 5 labs: <ol> <li>lab 1</li> <li>lab 2</li> <li>lab 3</li> <li>lab 4</li> <li>lab 5</li> <li>lab 6 (optional) </li> </ol> When setting a style for a class, configure the class name as the selector. For example, for the class name optional, place a period (.) in front of the class name in the style sheet:.optional { color: #FF0000; } The styles set in the new class can be applied to any element by using its class attribute: class="optional" To apply the style to the sixth list item: <li class="optional">lab 6 (optional)</li> NOTE: Only place the period in the class rule declaration (as defined in the CSS file) The sixth element is optional, so we may want it to stand out from the others, perhaps by making it red. CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 13 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 14 The Id Selector The Contextual Selector An id selector is used to apply a CSS rule uniquely to a single area on a web page. For example, to display the copyright information in dark gray (#333333). This could have been configured with a class, but since there is only one, an id is more appropriate. When setting a style for an id, place a hash mark (# in front of the id name in the style sheet. #footer { color: #333333; } The styles set in the footer id can be applied to any element you with by using the id attribute: id= footer. NOTE: the # only goes in the rule declaration. To apply to <div> tag: Use a contextual (or descendent) selector when you want to specify an element within the context of its container (parent) element. To configure a contextual selector, list the container selector (an element, id, or class) followed by the specific selector you are styling. To style the anchor tags located within the footer id, use the following: #footer a { color: fuchsia } Choose id and class names carefully! Though they must begin with a letter, numeral the dash, and the underscore can be used for additional letters. <div id="footer"> This paragraph will be diplayed using styles configure in the footer id.</div> CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 15 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 16

5 Span Element Margin between elements The <span>...</span> element defines a section on a wepage that is not physically separated from other areas by line breaks. Use the <span> tag when formatting an area contained within another, such as <p>, <blockquote>, <div>. In the style file configure the class:.coursename { color: maroon; } And in the HTML file, use the span as follows: Notice the empty space between the h1 element and the navigation area. It is the empty space between these two block-level elements. To collapse this space, configure the margin between the elements by adding the following style rule to the h1 element: margin-bottom: 0; If you want to specify a value other than 0 you must use the units (eg. unit of measure, percent or pixels). <p>in the course <span class="coursename"> CMPT 165: Introduction to the WWWW</span>, there will be 5 lab assignments: CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 17 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 18 Wireframes and Page Layout Page Layout Design Techniques A wireframe is a sketch or blueprint of a web page that show the structure but not the detailed design. As an example, you ll likely want to have a title or logo, a navigational area (where you have links to other areas on your site), content, and a footer. Heading Subheading... Title / Logo Navigation Content Footer Figure 3: The page layout in a wireframe. It s useful to create a wirefram to develop and experiment with ideas of page layout. The exact contact can be omitted. There are three popular techniques of web page layout design: ice, jello, and liquid. 1. Ice Design: (solid for fixed design), content is of fixed width, but arranged closer to the left margin. 2. Jello Design: content is either of fixed width OR a percentage width, and centered on the page with columns on both sides. 3. Liquid Design: content takes up to 100% of the browser window regardless of the screen resolution. A multicolumn content will flow to fill whaterver size of window is used to display it. WARNING: this may result in exceedingly long lines of text making it difficult to read! Jello designs are often used because the web pages are typically most pleasing to view on a variety of screen resolutions. CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 19 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 20

Creating a banner and other tips Configure Background Images Feel free to find web page banners/headers at the following URL: http://www.freewebpageheaders.

The background-image property can be used to configure a background image. For example body { background-image: url(spiderweb.png) } By default, this produces a background with a repeating image.

6 Creating a banner and other tips Configure Background Images Feel free to find web page banners/headers at the following URL: If the navigation area consists of images that may not display in some browsers, use an additional text-based navigational area in the footer. The background-image property can be used to configure a background image. For example body { background-image: url(spiderweb.png) } By default, this produces a background with a repeating image. Figure 4: A repeating background image. CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 21 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 22 The background-repeat property This property allows control over how the backgorund image will be repeated within the element. For example: repeat-x: repeat along the x-axis repeat-y: repeat along the y-axis For example, to repeat along the y-axis (vertical axis) NOTE: You can use both image and color to configure the background, so that the browser will display color in areas not covered by the image. body { background-color: #E2E2EF; color: #191970; background-image: url(spiderweb.png); background-repeat: repeat-y} Figure 5: Repeating background image along the y-axis CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 23 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 24

7 Positioning the Background image background-repeat: no-repeat; background-position: right, center; } You can specify the location of the background image besides the default top left corner using the background-position property. The background-position property can take on the following values: two percentages, pixel values or position values (left, top, center, bottom, right) with the two values being separated by a comma. The first value indicates the horizontal position The second value indicates the vertical position If only one value is provided the second defaults to center. Horizontal position: left right center, 0% -100% Vertical position: top center bottom, 0% -100% Example: background-position: right bottom; body { background-color: #E2E2EF; color: #191970; background-image: url(spiderweb.png); CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 25 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 26 Background attachment Adding space The background-attachment property configures whether the background image scrolls with the page or is fixed in the place: fixed, scroll (default). Try configure the following: h2 { color: #6A6AA7; background-image: url(spiderweb.png); background-repeat: no-repeat; } Notice the text appears over the image making it difficult to read. It would be nice to add space: To add space or padding: code the &nbsp about five times just after each opening <h2> tag OR, bettern, use the padding-left property (more on this later) to add empty space within the left-hand-side of the element. padding-left: 30px CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 27 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 28

8 Multiple Background Images The Favorites Icon Use the CSS background propertyto configure multiple backgroun images. Each declaration is separated by a comma. body{background-color: #E2E2EF; color: #191970; background-image: url(spiderweb.png); background: url (image1.png) no repeat botto url (image2.png); } The background property uses a shorthand notation: just list values needed for relevant properties. NOTE: not all browser s support multiple images. The favorites icon is the small icon you see in the address bar or tab of the browser (favicon). it is a square image (16X16 pixels) or (32X32 pixels) associated with a web page. See and configuring a favicon use the link element to link element to a webpage. file name should have.ico extension. <link rel="icon" href="favicon.ico" type="image/x-icon"> To be compatible with IE, you ll need to code a second link <link rel= shortcut icon href= favicon.ico type= image/x-icon > CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 29 CMPT 165: Introduction to the Internet and the WWW: Cascading Style Sheets 30

CMPT 165: More CSS Basics

CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see