Presentation is loading. Please wait.

Presentation is loading. Please wait.

3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› (CSS) Cascading Style Sheets By Bill Bennett.

Similar presentations


Presentation on theme: "3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› (CSS) Cascading Style Sheets By Bill Bennett."— Presentation transcript:

1 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› (CSS) Cascading Style Sheets By Bill Bennett Associate Professor MSJC CIS MVC

2 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Why Use Style Sheets? Flexibility Consistency Compatibility –Formatting tags & attributes are being deprecated Reduced file sizes (External CSS) Ease in updating sites (External CSS)

3 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Support for multiple devices: –screen, print, handheld, etc. More formatting choices than HTML HTML tag Being deprecated –In addition to other HTML formatting tags List of obsolete tags: –http://www.codehelp.co.uk/html/deprecated.html Why Use Style Sheets? (cont.)

4 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Pattern matching In CSS, Pattern Matching rules determine which Style rules apply to which Elements in the document tree. These patterns, called “Selectors”, may range from simple element names to rich contextual patterns. If all conditions in the pattern are true for a certain element, the selector matches the element. The case-sensitivity of document language element names in selectors depends on the document language. For example, in HTML, element names are case- insensitive, but in XHTML, CSS, and XML they are case- sensitive.

5 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› CSS Rules A CSS rule consists of two main parts: 1.Selector (Pattern Matching rule) 'h1' In HTML, element names are case-insensitive so 'h1' works just as well as 'H1'. In XHTML, you must use only ‘h1’ and not ‘H1’ 2.Declaration (Style Matching rule) ' color:green ' –The declaration has two parts: 1.property (' color ') –Full list of CSS 2.1 properties: http://www.w3.org/TR/CSS21/propidx.html 2.value (‘ green ') –Each part is separated by a colon “ : ” property:value color:green –All the Declarations that make up a Rule are encapsulated curly braces {} (except in In-Line styles) {property1:value1; property2:value2;} –Each declaration in a rule is separated by a semi-colon “ ; ” {property1:value1; property2:value2;}

6 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Types of Selectors Type selectors –Applies globally to HTML tags. –i.e.,, etc. –p {declaration} Class selectors –Created, Named, and Assigned manually to elements in an HTML document. –All class styles begin with a period –.className {declaration}

7 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Types of Selectors (cont.) ID selectors –Can appear only ONCE per page – Element –#ID {declaration} Descendant selectors (formerly Contextual Selectors) –h1 em { declaration } Child selectors –A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". –body > p {declaration}

8 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Types of Selectors (cont.) Adjacent Sibling selectors –Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non- element nodes (such as text nodes and comments).

9 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Types of Selectors (cont.) Attribute selectors –CSS 2.1 allows authors to specify rules that match elements which have certain attributes defined in the source document. –Attribute selectors may match in four ways: –[att] Match when the element sets the "att" attribute, whatever the value of the attribute. –[att=val] Match when the element's "att" attribute value is exactly "val". –[att~=val] Match when the element's "att" attribute value is a space-separated list of "words", one of which is exactly "val". If this selector is used, the words in the value must not contain spaces (since they are separated by spaces). –[att|=val] Match when the element's "att" attribute value is a hyphen-separated list of "words", beginning with "val". The match always starts at the beginning of the attribute value. This is primarily intended to allow language subcode matches (e.g., the "lang" attribute in HTML) as described in RFC 3066. –p color=“ff0000” {declaration}

10 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Types of Selectors (cont.) Pseudo-elements –The :first-line pseudo-element Pseudo-classes –:link, :visited (Link pseudo-classes) –:hover, :active, :focus (Dynamic pseudo-classes)

11 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Creating Styles Styles can be created using: –Any ASCII Text Editor –Virtually any GUI-based HTML editor Styles are best applied to HTML tags –Class styles are best used on repetitive elements, like hyperlinks, and images. –An ID name can only be applied once in an HTML document. Use it to identify groups of HTML elements like the page header or a group of navigational elements.

12 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› CSS Properties Font Properties –Font Family –Font Style –Font Variant –Font Weight –Font Size –Font –Color Background Properties –Background Color –Background Image –Background Repeat –Background Attachment –Background Position –Background

13 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› CSS Properties (cont.) Text Properties –Word Spacing –Letter Spacing –Text Decoration –Vertical Alignment –Text Transformation –Text Alignment –Text Indentation –Line Height Box Properties –Top Margin, Right Margin, Bottom Margin, Left Margin –Top Padding, Right Padding, Bottom Padding, Left Padding –Top Border Width, Right Border Width, Bottom Border Width, Left Border Width –Top Border Color, Right Border Color, Bottom Border Color, Left Border Color –Top Border Style, Right Border Style, Bottom Border Style, Left Border Style –Width, Height, Float, Clear

14 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› CSS Properties (cont.) Classification Properties –Display –Whitespace –List Style Type –List Style Image –List Style Position –List Style Units –Length Units –Percentage Units –Color Units –URLs For a full list of CSS 2.1 Properties see: http://www.w3.org/TR/CSS21/propidx.html

15 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Ways To Link CSS Rules to a Document There are 3 methods that can be used to link CSS Rules to a document: 1. Inline (within an element) 2. By Embedding a style sheet into an HTML document 3. By Linking or Importing an External style sheet from within an HTML document

16 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Inline Styles Inline styles are defined within an opening HTML tag of an element Simply insert a style attribute into the opening HTML tag of an element – – this is the text the style will apply to

17 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› A Style Sheet is: One or more CSS Rules, each defining how to format a particular piece of HTML content A way to format, quickly and uniformly, a multitude of HTML documents. For example: You could format all paragraph text with the font Verdana and make the text color green by adding a single CSS rule to your document.

18 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Embedded Style Sheets –Created in the section using the tag – selector {declaration} –While the example above tries to influence only one of the properties needed for rendering an HTML document, it qualifies as a style sheet on its own. p {color:#ffffff} property value selector CSS Rule

19 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› External Style Sheets –Can be linked or imported to numerous pages, providing uniform formatting. –The link element specifies: the type of link to a "stylesheet". the location of the style sheet via the "href" attribute. the type of style sheet being linked "text/css". –To change the color of all “headlines” you only have to edit one file. Type of Link Location Type of Style Sheet

20 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› More on CSS Style Sheets You can also import an external style sheet into another external style sheet or into an embedded style sheet by using @import @import(stylesheet.css); (must precede any other style declarations in the style sheet) Combining style sheets together will determine the final presentation of the document based on the cascading order established by Inheritance and Precedence.

21 3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› Understanding Cascading Order Inheritance –A tag inside another tag is a descendent –A tag that surrounds another tag is an ancestor –Inheritance passes from parent to child, ancestor to descendent Precedence –When two different rules modify the same property the style that is closest to the element will take precedence

22 Working with CSS in Expression Web Expression Web offers a vast array of toolbars, task panes, and dialog boxes that facilitate working with external, document- wide, and inline style sheets In the coming slides we’ll be examining the following tools: –The Style and Style Application toolbar –The New Style & Style Properties dialog boxes –The Apply Styles & Manage Styles task panes

23 Style Application Toolbar You open the Style Application toolbar from the View menu by choosing Toolbars and the clicking on Style Application from the fly out menu Read pages 136 – 137 in your textbook for a detailed description of how to use this toolbar

24 Creating a Style Rule Make sure the Style Application toolbar is set to Manual Choose Apply New Style from the Target Rule drop-down list and the New Style dialog box will open Create a new class style name by typing “.solutionText” in for the Selector: (don’t forget class names begin with a period) Choose “New Style Sheet” from Define In: Clear the check from Apply new style to document selection

25 Font Options Next, the New Style dialog box opens As you can see there are many font and text choices available in the Font category For the.solutionText style enter the font size, weight and color information the same as it is in the image to the right Color is dark blue, #0000FF

26 Rename the New Style Sheet Click on the Untitled.css tab to view the new file From the File menu choose Save As… and save the file as “styles.css” in your Chapter05 folder A new file, untitled_1.css is now visible in the Tabbed File Chooser

27 Edit an Existing Style In order to Modify an existing style, open either the Apply Styles or Manage Styles task pane, right click on the style name and choose Modify Style…

28 Style Categories Both the New Styles and Modify Styles dialog boxes have a list of style categories to choose from Click on one of the categories from the list to view the style properties available for the selected category To learn more about the style properties that you can modify for each style category see pages 142 – 151 in your textbook

29 Block Options

30 Background Options

31 Border Options

32 Box Options

33 Position Options

34 Layout Options

35 List Options

36 Table Options

37 Applying Styles To apply styles that you have created, select the text or other element that you want to apply a style to From the Apply Styles task pane simply click on the style that you want to apply

38 Using Tag Properties to Apply Styles Another way to apply a style to text or element in a page is by using the Tag Properties task pane Just click on the drop-down list arrow for the “class” property of the selected tag and chose the appropriate style from the list that appears

39 Managing Styles You can modify the properties of an existing style by using the Apply Styles or Manages Styles task pane Right-click on the style and choose “Modify” from the context menu that appears

40 CSS Properties Task Pane If you select text or an element in your page which has a style applied to it, you can use the CSS Properties Style name Style properties Sort by category Sort alphabetically Show set properties on top modify the properties of the style

41 Designing Styles by Redefining HTML Tags Choose “New Style” from either the Apply Styles or Manage Styles task pane When the New Style dialog box appears choose “body” from the Selector: drop-down list Set the font to Arial, Helvetica, sans-serif Set the font size to “small” In the Box category set the left margin to 25 px Selector: drop-down list

42 Using Anchor Pseudo-Classes Your textbook calls these “Contextual Selectors” which is an incorrect term The Anchor pseudo-classes are: –a:link, a:hover, a:visited, a:active –When you apply a class style to an anchor (hyperlink) you can create styles to affect the way the hyperlink appears depending on whether a user’s mouse is hovering over the link or its look once the user has visited the link

43 Using Anchor Pseudo-Classes To see how the Anchor Pseudo-Classes work, create a new class style called “.navlink” (don’t forget the period) Set the font-size to small, the font-weight to bold, the text decoration to none, and color to a shade of blue by sampling a color from the Vecta Corp header image at the top of your page (remember the eye dropper in the More Colors dialog box) Click OK Apply the new.navlink style to each of the hyperlinks in your navbar (Home, About Us, Solutions, Support, and Contact Us)

44 Using Anchor Pseudo-Classes Next, create another new style Call this style “.navlink:hover” Set the font-color to red and the text decoration to underline and click OK Save the changes to both the default.htm and styles.css documents Preview your Web page in your Web browser and notice what happens whenever you move your mouse over the hyperlinks in your navbar That’s how the anchor pseudo-classes work, the style changes when the hyperlink’s state changes

45 Attaching Existing Style Sheets to Web Pages You’ll want the styles you created for your default.htm page to apply globally to all of the pages in your Chapter05 For the URL: type in “styles.css” or use the Browse button to select the “styles.css” file in your Chapter05 folder Choose Attach to: Current page as a Link and click OK You will now be able to use your existing styles in your new document As you create each new page click on Attach Style Sheet… in the Apply or Manage Styles task pane

46 Working With CSS Reports In order to view style problems you can use Expression Web’s CSS Reports Open CSS Reports from the Tolls menu Select where you want to check for errors and which type of errors you want to check for then click OK Your CSS error report will appear at the bottom of the Document window Double-click on the error in the CSS Reports window to view the location of the error in your document

47 End-of-Chapter Exercise 1.Create an external style sheet for the Chapter05 folder called styles.css. All styles created in this chapter should reside in the new external style sheet and all pages you create for Chapter05 should use the same external style sheet 2.Within the style sheet, redefine the tag. Change the font to Arial, Helvetica, sans-serif, the font-size to small, and the left margin to 25px. 3.The three headings: Welcome, Our Solutions, and Client Testimonials should be headings and you should redefine the h1 tag’s style so that the font- size is medium, the font-weight is bold, and the font-color is red (#CC1C0D) 4.Create a class style called “.navlink”, set the font-size to small, font-weight to bold, text decoration to none, and font-color to a blue color similar to a blue color in the Vecta Corp image at the top of the page. Apply the.navlink style to each hyperlink in the navbar on each page. Create a pseudo-class style a:hover with the font-color set to red and the text decoration set to underline 5.Create a class style called “.solutionsText” and apply it to each of the three solutions sub-headers within the Our Solutions section. Set the font-size to small, font-weght to bold, and the font-color to dark blue. 6.Use the Attach Style Sheet feature to apply the newly created style sheet to the rest of the pages within the "chapter05" folder.

48 Chapter05 Completed Default.htm


Download ppt "3/6/2008 CSIS 117d: Dynamic Web Development & Administration Using MS Web Tools Instructor: Bill Bennett ‹#› (CSS) Cascading Style Sheets By Bill Bennett."

Similar presentations


Ads by Google