CSS – Embedded and External Styles
Download
Report
Transcript CSS – Embedded and External Styles
IT 130 – Internet and the Web
Cascading Style Sheets contd:
Embedded Styles
1
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.
2
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.
3
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>
4
*** 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.
5
Example 1
<head>
<style type="text/css">
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.
6
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.)
7
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, textalign, width, height
Values: maroon, pink, papyrus, center, 200px
8
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.
9
** 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
1.
2.
3.
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!
10
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.
11
Examples
Example 1
http://www.w3schools.com/css/showit.asp?filename=ex1
Example 2
http://www.w3schools.com/css/showit.asp?filename=ex2
12
An external style sheet (next slide)
• Notice the absence of ANY content other than
styles.
– E.g. No HTML tags
13
body {
background-color : silver;
color : blue;
}
h1
{
color : #000090;
font-size : 150%;
}
h2
{
color : #000090;
font-size : 150%;
}
h3
{
color : #000090;
font-size : 115%;
}
pre {
font-family: lucida console; font-weight: bold;
font-size: 120%;
}
14
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).
15
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.
16
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.
17
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.
18
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?
19
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.
20
Style Priorities
The three styles have this priority hierarchy:
Inline styles
Internal style sheet
External style sheet
Browser default style
higher
priority
One way to remember: The “nearer” a style is to its HTML tag,
the higher the priority.
21
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.
22
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.
25
Background Colors
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…
26
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
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, norepeat]
(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
28
29
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
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…”