230 likes | 338 Views
Cascading Style Sheets (CSS). “Styles” for short. Pg. 418. 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. CSS is used to:.
E N D
Cascading Style Sheets (CSS) “Styles” for short. Pg. 418
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.
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).
Three types of CSS • In-line • Internal • External
In-line Styles • The style affects just a particular tag. • The change from the in-line style is a local one.
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>
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 ;
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.
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)
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>
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
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)
External Style Sheets • These style sheets can be used in any web page. • Helps create a consistent layout throughout an entire web presentation.
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
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
For examples of properties and some of their values, see CSS_PropertiesValues.doc
Multiple Selectors H1, H2, H3, H4, H5, H6 {text-align: center} All tags separated by commas are affected by the property.
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}
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,
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
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.