Cascading Style Sheets contd: Embedded Styles IT 130 – Internet and the Web Cascading Style Sheets contd: Embedded Styles
Three ways of creating a style: Inline, Embedded, External Inline style An inline style is applied to a single tag or section of the current HTML file. Inline style declarations are placed inside the tag. <h1 style="font-size: 200%; font-style: italic"> Embedded style sheet (also called “internal” style sheet) An internal style is applied to the entire current HTML file but is not applied to other files on the web site. Embedded style declarations are placed in the head section of the HTML file. External style sheet (also called linked style sheet) An external style is applied to the entire HTML file and may be applied to any or all pages on the web site. External style declarations are written in a separate text file which is then linked to the HTML file. External style sheets make it easy to give a consistent look to any number of web pages.
Inline Style The style declaration is an attribute in the opening tag of a selector. For example <h1 style="font-size:200%; font-style:italic"> Every opening tag with a style attribute has its usual closing tag. The closing tag never has a style attribute.
Example <body> <h3 style="font-style:italic; color:green"> This h3 uses an inline style </h3> <h3>Note that an inline style does not apply to subsequent h3 tags. </h3> </body>
*** Embedded (aka Internal) Style Sheets Styles that apply to every tag in the current HTML document. They will not apply to other pages on your site. Embedded (aka internal) style sheets are declared in the <head> section of the document. The style declarations are placed between <style> and </style> tags Example: <head> <style type="text/css"> h1 {font-size: 200%; font-style: italic} </style> </head> This code says that every h1 tag in the current document will use this style.
Example 1 <head> <style type="text/css"> </style> h3 {font-family:Arial; font-style:italic; color:green} </style> </head> <body> <h3>This is an h3 tag. Note how the styles from the internal style tag are applied.</h3> <h4>This is some h4 text. Note how no styles are applied.</h4> </body> * Note the inclusion of the ‘type’ property in the <style> tag. You should always include this attribute.
Example: <style type="text/css"> h1, h2, h3, h4, h5, h6 { color:#FF0000; font-family:Arial} </style> This shows that you can apply styles to several selectors (e.g. tags) at the same time. (Simply separate the selectors with commas.)
Review: Selectors, Properties, Values Recall that every style has three components: Selectors: body, div, span, td, tr, p, h2, img Properties: color, background-color, font-family, text-align, width, height Values: maroon, pink, papyrus, center, 200px
Terminology Embedded (aka internal) styles apply to the entire web page. N.b. Don’t confuse this with an inline style which applies to only a single tag on the current page. In other words, when using an embedded style sheet, properties that are defined for a given tag (e.g. <h1>) apply to all of those tags on the current page.
** External Style Sheets You can write a separate document containing all of the styles you wish to apply. Then you can link any of your HTML pages to this document. To do so, place all of your styles in a separate text file and give it the extension .css (e.g. mystyle.css ) To apply an external style sheet, write the following <link> tag inside the <head> section of your HTML document: <link rel="stylesheet" type="text/css" href= "my_style.css" /> This <link> tag’s attributes tell the browser to find an external style sheet which is a CSS file and that the name of that file is my_style.css (Specified with the appropriate path of course! – For now, assume it is in the same folder as your HTML file.) Imp: The style sheet must NOT contain any HTML or JavaScript code!
External Style Sheets A different way of doing this (i.e. instead of the link tag) is to include the following line inside the document head: <style> @import url("mystyle.css") </style> This usage has a specific context. For this course, we will use the version described on the previous slide. Ie: The <link> tag.
Examples Example 1 http://www.w3schools.com/css/showit.asp?filename=ex1 Example 2 http://www.w3schools.com/css/showit.asp?filename=ex2
An external style sheet (next slide) Notice the absence of ANY content other than styles. E.g. No HTML tags
body { background-color : silver; color : blue; } h1 { color : #000090; font-size : 150%; h2 { color : #000090; h3 { color : #000090; font-size : 115%; pre { font-family: lucida console; font-weight: bold; font-size: 120%;
Remember When using an external style sheet: The tag linking to the external style sheet is placed inside the <head> </head> tags. Imp: The .css file should not contain any HTML tags. As with other programming code (HTML, JS), the .css file is a text file and you can write it with any text editor (like Textpad or TextEdit).
Terminology An external style sheet is also called a linked style sheet because of the link tag. An external style sheet can let you maintain a consistent look and feel throughout all the pages of your web site. Most external style sheets have the extension .css but this is not a strict requirement.
Summary of the Three Style Types With inline styles: the property / value pairs are in quotes style= attribute is used within the tag. With internal styles the property / value pairs are in curly braces <style> </style> tags are used the styles are placed in the <head> section With external style sheets The property / value pairs are in curly braces <style> </style> tags are NOT used The styles are written out in a separate document.
Which Style Type? If you need to format a single and relatively small section in a web page, you should probably use an inline style. (In a sense, inline style defeats the purpose of CSS since it makes you format each HTML tag separately.) If you need to format many sections in a web page, you should probably use an internal style sheet. If you need to format many different web pages, you should probably use an external style sheet. This is a good approach to maintaining a consistent appearance across a large site.
Multiple Style Sheets A single web page can apply all three styles: an external style, an internal style, and some inline styles. You might find yourself in this situation if you use an external style sheet for several web pages, but decide you’d like to change the style on one particular page. But what if there is a conflict between the external style sheet and the internal style sheet?
Example Suppose the external style sheet has: h3 { color: red; text-align: left; font-size: 8pt } Suppose the internal style sheet has: h3 { text-align: right; font-size: 20pt } Then the h3 property will be: color: red; text-align: right; font-size: 20pt From the external style, the color is used and the font-size and text-alignment are replaced by the internal style.
Style Priorities The three styles have this priority hierarchy: Inline styles Internal style sheet External style sheet Browser default style One way to remember: The “nearer” a style is to its HTML tag, the higher the priority. higher priority
Who’s the boss? The style with higher priority overrides/overrules/replaces the style with lower priority. This explains the name “Cascading Style Sheets”. The default style of any HTML tag is decided by the browser Unless…. The tag’s style is overridden by an external style sheet. However an external style sheet can be overridden by an internal style sheet. And an internal style sheet can be overridden by an inline style.
Practice: Suppose the <h3> tag has styles written for it in all 3 style sheets: external, internal, inline. Which style will be applied to the tag? Answer: the inline style
Practice: Suppose the external style sheet has: body {background: blue; text-align: left; font-size: 16pt } …and the internal style sheet has: body { text-align: right } What will the body’s properties be? background: blue; text-align: right; font-size: 16pt Again, recall that the internal style has a higher priority (overrides) external styles. Also, note how the non-conflicting styles will continue to be applied. 24
Setting the browser’s default style You can set your web browser’s default style as follows. In Firefox, select Tools>Options and click the Content tab. In Internet Explorer, select Tools>Internet Options and click the Accessibility button.
Background Colors This is an h1 header with a purple background Background colors can be applied to almost* any individual element in a web page, not just the page itself. For example: <h1 style="background-color:#CC33FF"> This is an h1 header with a purple background</h1> produces This is an h1 header with a purple background * Background colors can be applied to any element known as a block-level element. They can not be applied to any element known as an inline element. More on this in a later lecture…
Background Images In addition to a background color, you can also apply a background image. As with background colors, you can only apply these images to a block-level element. Ie: They can not be applied to an inline element. Background images have some very useful functions, which we will discuss in a later lecture. 27
Background Images: Styles background-image : url (file.jpg) Note: No quotes are used around the filename Eg: background-image: url(images/cubs.jpg) background-repeat: [repeat, repeat-x, repeat-y, no-repeat] (controls how the image is tiled) ‘repeat’ is the default. If you want one of the others, specify it the square brackets mean that you have the option of choosing any of the following the sqare brackets are NOT included when typing your styles background-attachment: scroll, fixed (allows the image to scroll with the element or not) Experiment with this on your own…. 28
29
An aside: Some Hyperlink Styles (aka Pseudo-Classes) a:link {style for never visited links} a:visited {style for visited links} a:hover {style when the mouse cursor is hovering over the link} – this is a rollover effect a:active {style for link that is currently being clicked} a:hover {color=red; text-transform:uppercase; font-weight:bold} IMPORTANT: You must write these 4 hyperlink styles in order. (link, then visited, then hover, then active) Some people use the mnemonic: LoVe HaTe 30
Practice Take the following code, and try the following styles on it: <body> Here is a line of text and a second line of text… </body> text-transform:uppercase line-height:200% line-height:10% “With power comes responsibility…”