1 / 23

Cascading Style Sheets (CSS)

This guide explores the use of Cascading Style Sheets (CSS) to control the appearance of web pages, focusing on font styles, sizes, colors, and more. Learn the three types of CSS: inline styles for local changes, internal styles for document-wide consistency, and external styles for uniform design across multiple documents. Each method allows for specific customizations, with clear examples provided. Discover how CSS enhances layout consistency and user experience while being compatible with major browsers.

terra
Télécharger la présentation

Cascading Style Sheets (CSS)

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. Cascading Style Sheets (CSS) “Styles” for short. Pg. 418

  2. Cascading Style Sheets (CSS) Used to control how your web pages look -- font styles & sizes, colors, backgrounds, alignments etc. CSS allows individual tags to be redefined.

  3. CSS is used to: • Used to change the affect that a single tag has on text (in-line style). • Used to impose characteristics uniformly over an entire document (internal style). • Used to impose characteristics uniformly over an entire collection of documents (external style).

  4. Both Netscape and Internet Explorer support CSS

  5. Three types of CSS • In-line • Internal • External

  6. In-line Styles • The style affects just a particular tag. • The change from the in-line style is a local one.

  7. Example of an in-line style <H1 STYLE = “color: blue; font-style: italic”>Changed text</H1> The scope of the style covers the contents of that tag only. <H1>This text is back to normal</H1>

  8. General layout of an in-line style <TAG STYLE=“property1: value1; property2: value2>text</TAG> Note: • A property and its value are separated by a colon : • Each set of properties and their corresponding values are separated by a semicolon ;

  9. Internal Style (Also known as Document Level Style Sheets or Embedded Style Sheets) • A list of rules are placed within the head of the document. • These styles affect all the same tags within that document. • Using the internal style, the styles can only be applied to the web page in which they are contained. • Exception: tags containing an in-line style attribute will override an internal style. • Benefit of an in-line style.

  10. Example of an Internal Style • Place the following within the HEAD tag <STYLE TYPE="text/CSS"> <!-- H1 {color: red} --> </STYLE> • As a result, all text enclosed within H1 tags will be in the color red. (See CSS.htm)

  11. Note: In-line Style overrides an Internal Style <HTML> <HEAD> <TITLE>In-line override</TITLE> <STYLE TYPE = “text/css”> <!-- H1 {FONT-SIZE: 24pt} --> </STYLE> </HEAD> <BODY> <H1 STYLE=“font-size: 36pt”>This uses 36 pt font.</H1> <H1>This uses 24 pt font.</H1> </BODY> </HTML>

  12. Note: • Purpose of the comments (<!-- -->) is to skip the contents in case a browser doesn’t handle styles. In such a case, the page will be rendered correctly just without including the styles. • text/CSS - type of styles you are including • CSS are all type text/CSS

  13. General layout of an internal style • <STYLE TYPE="text/CSS"> • <!-- • TAG1 {property1: value1; property2: value2} • TAG2 {property3: value3; property4: value4} • TAG3 {property5: value5; property6: value6} • --> • </STYLE> • The tag on the left is the tag being modified. • Enclosed in { } is a list of properties and their values. (See Internal_Styles.htm)

  14. External Style Sheets • These style sheets can be used in any web page. • Helps create a consistent layout throughout an entire web presentation.

  15. Example: Place the following: h1 {color: blue; font-style: italic} h2 {color: red; text-align: center} font {font-size: 200%; font-style: italic; color: green} in a separate file. Name the file and give it a .css extension. For example, name it styles.css

  16. Within a web page include the following in the HEAD tag: <LINK REL=stylesheet TYPE="text/css" HREF="styles.css" TITLE="a name"> • LINK -- creates a relationship between the two documents. • REL -- tells the browser that the document in the HREF attribute is a stylesheet. • TYPE -- tells the browser the type of style you are including. • TITLE -- makes it available for later reference by the browser. See Styles.css & external_styles.htm

  17. For examples of properties and some of their values, see CSS_PropertiesValues.doc

  18. Multiple Selectors H1, H2, H3, H4, H5, H6 {text-align: center} All tags separated by commas are affected by the property.

  19. Same As H1 {text-align: center} H2 {text-align: center} H3 {text-align: center} H4 {text-align: center} H5 {text-align: center} H6 {text-align: center}

  20. Contextual Selectors OL LI {list-style: upper-roman} • style applied to a LI within one OL tag OL OL LI {list-style: upper-alpha} • style applied to a LI within two nested OL tags OL OL OL LI {list-style: decimal} • style applied to a LI within three nested OL tags OL OL OL OL LI {list-style: lower-alpha} • etc,

  21. Contextual Selectors (cont) B I {color: red} • style applied to an I tag nested within a B tag B I, B H1, H2 {color: blue} • style applied to an I tag nested within a B tag • style applied to an H1 tag nested within a B tag • style applied to an H2 tag

  22. Pseudo-Elements A:link {color: red} A:active {color: green} A:visited {color: blue} A:hover {color: purple} Note: no space between A:link, A:active etc.

More Related