1 / 28

New Perspectives on Creating Web Pages with HTML

New Perspectives on Creating Web Pages with HTML. Lecture 4: Cascading Style Sheets and “#includes”. HTML and Page Layout. Early versions of HTML had little support for Web page design. The philosophy was to: use basic text files that could be quickly downloaded

norman-melton
Download Presentation

New Perspectives on Creating Web Pages with HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. New Perspectives on Creating Web Pages with HTML Lecture 4: Cascading Style Sheets and “#includes” IS 360 Lecture 4: CSS & Includes

  2. HTML and Page Layout • Early versions of HTML had little support for Web page design. • The philosophy was to: • use basic text files that could be quickly downloaded • rely on Web browsers to format the document’s appearance • The simplicity of HTML tags made creating Web pages easier and made pages load faster. IS 360 Lecture 4: CSS & Includes

  3. History and Support of CSS • One principle of design theory is to separate the content of a document from its design. • A style defines the appearance of a document element. • The collection of styles for a Web page or Website is known as a style sheet. • Style sheets use a common language and syntax. • The main style sheet standard is Cascading Style Sheets (CSS). IS 360 Lecture 4: CSS & Includes

  4. Benefits of Style Sheets • Use as a design tool. • Makes website more flexible. • Easier to maintain and modify. • More aesthetically interesting. • Consistent look. IS 360 Lecture 4: CSS & Includes

  5. Style Types • There are three ways of employing CSS in Web pages: • inline styles in which styles are added to each tag within the HTML file. The style affects that particular tag but does not affect other tags in the document. • embedded or global styles applied to an entire HTML file, allowing the Web designer to modify the appearance of any tag in the document. • linked or external style sheets placed in an external file and linked with pages in the Web site, allowing the Web designer to modify the appearance of tags in several documents • Which approach you choose depends on the Web site’s design.. IS 360 Lecture 4: CSS & Includes

  6. Using Inline Styles • If you need to format a single section in a Web page, you’d probably use an inline style. • To create in inline style, add the style attribute to the HTML tag using the following syntax: <tag style=“style declarations”> • tag is the name of the tag (h1, h2, etc) • style declarations are the styles you’ll define for a particular tag • style declaration must be enclosed within double quotation marks IS 360 Lecture 4: CSS & Includes

  7. A Style Declaration • A style declaration consists of attribute names that specify such features as: • font size • color • font type • Attributes are followed by a colon and then the value of the attribute. • Multiple attributes can be used as long as you separate each one by a semicolon. • The general syntax for the style declaration is: attribute1:value1; attribute2:value2; IS 360 Lecture 4: CSS & Includes

  8. Inserting an Inline StyleMEH 8.2 This figure shows how to insert an inline style. IS 360 Lecture 4: CSS & Includes

  9. Heading with New Stylechem.htm This figure shows the heading with the new style. IS 360 Lecture 4: CSS & Includes

  10. Creating an Embedded Stylechem.htm; fig0503.htm • An embedded style is a style applied to various sections within a Web page. • Insert a <style> tag within the head section of the HTML file. • Within the <style> tag, enclose the style declarations needed for the entire Web page. • The syntax of an embedded style is: <style type=“style sheet language”> style declarations </style> • style sheet language identifies the type of style language used in the document • The default, is “text/css” for use with CSS IS 360 Lecture 4: CSS & Includes

  11. Selectors and Declarations • Style declaration within the <style> tags obey the following syntax: selector {attribute1:value1; attribute2;value2; ...} • selector identifies an element in your document, such as a heading or paragraph, and the attributes and values within the curly braces indicate the styles applied to all the occurrences of that element • this collection of attributes and values is also referred to as the declaration of the selector IS 360 Lecture 4: CSS & Includes

  12. Selectors and Declarations Continued • For example, to display all h1 headings in the HTML document using a gold sans-serif font, use the following embedded style: <style> h1 {color: gold; font-family: sans-serif} </style> • h1 is the selector and the text enclosed in the braces is the declaration IS 360 Lecture 4: CSS & Includes

  13. Defining a Global Style The type attribute was not included within the <style> tag. This is because “text/css” is the default style language , and unless you specify a different style language, you don’t need to enter the type attribute. When using the <style> tags, you don’t need to include double quotes around the attributes and attribute values. IS 360 Lecture 4: CSS & Includes

  14. Grouping Selectors • You can apply the same declaration to a group of selectors by including all of the selector names separated by commas. • The following is a sample style declaration to format all headings in a gold sans-serif font: <style> h1, h2, h3, h4, h5, h6 {color:gold; font-family:sans-serif} </style> IS 360 Lecture 4: CSS & Includes

  15. The Same Style Applied to Two Headings Even though the same style is used for all heading tags, there are still some differences in how the browser displayed text formatted with these tags. Most notably, the styles did not affect the relative sizes of the text. Text formatted with the <h1> tag is still larger than text formatted in the <h2> tag. This is because the size of the heading text was not defined, so that attribute is left to the browser. IS 360 Lecture 4: CSS & Includes

  16. Using an External Style Sheet • Create styles that apply to an entire Web site by creating a text file containing style declarations. • Most style sheets have the extension “.css”, though this is not a requirement. • Within a style sheet, you don’t need <style> tags, just the style declarations. IS 360 Lecture 4: CSS & Includes

  17. Linking to Style Sheets with the <link> Tag (fig0802.htm, nletter.css) • Use the <link> tag to link Web pages to a style sheet. • The general syntax for using the <link> tag is as follows: <link href=“URL” rel=“relation_type” type=“link_type”> • URL is the URL of the linked document • relation_type establishes the relationship between the linked document and the Web page • link_type indicates the language used in the linked document • In order to link to a style sheet, the value of the rel attribute should be “stylesheet” and the value of the type attribute should be “text/css”. • To link to a style sheet named “mws.css,” the <link> tag would be: <link href=“mws.css” rel=“stylesheet” type=“text/css”> IS 360 Lecture 4: CSS & Includes

  18. Linking to Style Sheetswith @import • Another way to link to a style sheet is to use the @import command, which accesses the style sheet definitions from another file. • To use @import with styles, enclose the @import command within the embedded <style> tags as follows: <style> @import url(stylesheet.css); style declarations </style> • stylesheet.css is the URL of the style sheet file IS 360 Lecture 4: CSS & Includes

  19. The @import Command • The @import command provides greater flexibility than the <link> tag when working with multiple style sheets. • The @import command has limited browser support. • Unless you have a compelling reason to use @import, you are probably better off using the <link> tag. IS 360 Lecture 4: CSS & Includes

  20. Resolving Style Precedence • In cases where the styles conflict, precedence is determined in the following order: • an inline style overrides any embedded style or external style sheet • an embedded style overrides an external style sheet • an external style sheet overrides the internal style rules set by the Web browser • any style attributes left undefined by an inline style, an embedded style, or an external style sheet are left to the Web browser IS 360 Lecture 4: CSS & Includes

  21. Changing Styles • As a change is made to a style at one level, the changes are cascaded through to the other levels (hence the term, cascading style sheets). • Where a different font has not been specified, changes will cascaded through the embedded and inline styles. • As you define more styles for a Web site, you need to keep track of the inline, embedded, and external style sheets to correctly predict the impact that style changes have on the appearance of each page. IS 360 Lecture 4: CSS & Includes

  22. The color Attribute • CSS works with most of the color names supported by HTML. • Another way to specify color in CSS is to use RGB color values. • You can enter the hexadecimal form of the color value or the RGB color values directly. • for example, to change the body text color to teal, use any of the following styles: body {color:teal} body {color: #008080} body {color: rgb (0,128,128)} body {color: rgb (0%, 50%, 50%} IS 360 Lecture 4: CSS & Includes

  23. Changing the Color of the H1-H6 Headings RGB color values range from 0 to 255, so specifying a color percentage of 50% for green and blue is close to a color value of 128. This figure shows an example of changing the color of the H1-H6 headings. IS 360 Lecture 4: CSS & Includes

  24. Specifying styles for ID’s (HCR 10.2) • Virtually every HTML element can have an ID attribute: ID=“UniqueName” • Using #UniqueName syntax, styles can be assigned to individual elements. Example: <STYLE> #Para2 {background: green} </STYLE> <BODY> <P>This is paragraph 1.</P> <P ID=“Para2”>This is the second paragraph.</P> IS 360 Lecture 4: CSS & Includes

  25. Specifying styles for CLASSes (MEH 8.2, nletter.css) • Virtually every HTML element can have an CLASS attribute: CLASS=“NonUniqueName” • Using .NonUniqueName syntax, styles can be REPEATEDLY assigned to individual elements - unlike IDs, CLASSes need not be unique. Example: <STYLE> .important {background: yellow} </STYLE> <BODY> <P>This is paragraph 1.</P> <P CLASS=“important”>This is the second paragraph.</P> IS 360 Lecture 4: CSS & Includes

  26. Absolute PositioningHTML:CR 10-18 • Review: the browser normally takes great liberty in positioning HTML elements. It is supposed to - it was originally designed that way! • Absolute positioning available within CSS allows the designer to take absolute control of where in the browser window an element is placed. IS 360 Lecture 4: CSS & Includes

  27. Standardizing Pages Through #Includes • External style sheets help standardize style • Likewise, #include can bring complete portions of a page, frequently HEADERS and FOOTERS, into an HTML page • Write the HEADER and/or FOOTER one time and imbed in multiple documents • <!-- #include file=“footer.html --> (oldMEH 3.include.demo.shtml) • 134.197.65.27/360/kuechler/includeDemo.shtml IS 360 Lecture 4: CSS & Includes

  28. Includes continued • The document that contains the #include statement must have the extension “.shtml” • The document that contains the #include statement must be accessed through a server, that is, you can’t simply double click on an .shtml file – the include won’t work IS 360 Lecture 4: CSS & Includes

More Related