|
1
|
|
|
2
|
- Using Inline Styles
- Working with Selectors
- Using Embedded Styles
- Using an External Style Sheet
- Applying a Style to a Web Site
- Understanding Cascading Order
|
|
3
|
|
|
4
|
- In HTML, want the content of the documents clearly separated from the
document's presentation layout.
- Styles sheets define how HTML elements are to be displayed
|
|
5
|
- Like HTML, style sheets must use a common language and follow common
rules. This language is known as
Cascading Style Sheets, CSS.
- CSS has been developed by the WWW Consortium (www.w3c.org organization that develops standards
for HTML).
- CSS is designed to augment (not replace) HTML.
|
|
6
|
- Styles can be specified
- inside a single HTML element (Inline)
- inside the <head> element of an HTML page (Internal)
- or in an external CSS file. (External)
|
|
7
|
- An inline style loses many of the advantages of style sheets by mixing
content with presentation. Use this method sparingly. Inline styles are
easy to use and interpret because they are applied directly to the
elements they affect.
|
|
8
|
- To use an inline style you use the style attribute in the relevant tag.
The style attribute can contain any CSS property.
- <element style=“property1:
- value1; property2:value2; …>
|
|
9
|
- Enclose the properties and values in quotes.
- Separate properties with a semicolon.
- <p style="color: red; margin-left: 20px "> paragraph
</p>
|
|
10
|
- <body>
<h3 style=“font-family:Arial, font-style:italic;
color:green”>
- This is H3, Arial, italic and green
- </h3>
- <h3>This is simply H3</h3>
- </body>
|
|
11
|
- The CSS syntax for internal and external styles is made up of three
parts:
- selector {property: value}
- The selector is normally the HTML element/tag you wish to define, the
property is the attribute you wish to change, and each property takes a
value.
|
|
12
|
- The property and value are separated by a colon and surrounded by curly
braces: body {color: black}
- If the value is multiple words, put quotes around the value.
- Separate properties with a semi-colon.
- p {font-family: “sans
serif”; color: red}
|
|
13
|
- Background colors can be applied to almost any element in a Web page not
just the page itself.
|
|
14
|
- background-image : url(file.jpg)
- examples\css\style-background.html
- http://www.w3schools.com/css/css_background.asp
|
|
15
|
- /* This is a CSS comment. */
- Same as JavaScript multi-line comment.
|
|
16
|
- Separate selectors with a comma:
- h1,h2,h3,h4,h5,h6 { color: green }
- All header elements will be green.
|
|
17
|
- Software that generates correct syntax.
- It’s on the machines in the lab.
- It can be downloaded for free.
- Go see it.
|
|
18
|
- Applies to a single document (HTML file)
- Internal styles are embedded in the head section :
- <head>
- <style type="text/css">
- hr {color: sienna}
- p {margin-left: 20px}
- </style>
- </head>
|
|
19
|
- <head>
<style>
h3 {font-family:Arial;
font-style:italic; color:green}
</style>
- </head>
- <body>
- <h3>This is H3, Arial, italic and green</h3>
- <h3>And so is this H3</h3>
- </body>
|
|
20
|
- An external style sheet is a text file that contains style declarations
- It can be linked to any page in the site, allowing the same style
declaration to be applied to the entire site
- An external style sheet can be written in any text editor. The file
should not contain any html tags. It should be saved with a .css
extension.
|
|
21
|
- Example:
- hr {color: sienna}
- p {margin-left: 20px}
- Notes:
- No spaces between the property value and the units: 20px
- This is the entire file. Within a style sheet, you don’t need
<style> tags, just the style declarations.
|
|
22
|
- An external style sheet can control the appearance of many web pages.
- Each page must link to the style sheet using the <link> tag inside
the head section:
- <head>
- <link rel="stylesheet" type="text/css"
href=“site_style.css" />
- </head>
- See style_sheets.html
|
|
23
|
- External style sheets enable you to change the appearance and layout of
all the pages in your site by editing just one single CSS document.
- They give a consistent look to the entire site.
- Multiple external style sheets may be referenced inside a single HTML
document.
|
|
24
|
- Create a text file containing the style declarations.
- File should have extension “.css” such as: mystyle.css
- Link, or import that file to the HTML file using special tags in the
header.
|
|
25
|
- If a property has been set for the same selector in different style
sheets, the value will be inherited from the more specific (innermost)
style sheet.
- (next slide)
|
|
26
|
- We say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number
four has the highest priority:
- Browser default
- External style sheet (.css file)
- Internal style sheet (inside the <head>)
- Inline style (inside an HTML element)
|
|
27
|
- If a style is not specified for an element, it inherits the style of its
parent element; This is called style
inheritance.
|
|
28
|
- http://www.w3schools.com/css/css_border.asp
- http://www.w3schools.com/css/css_text.asp
- http://www.w3schools.com/css/css_text.asp
|
|
29
|
- The style rule below will match any element that has an id attribute
with a value of "green":
- #green {color: green}
- <h1 id="green">Some text</h1>
|
|
30
|
- The style rule below will match any p element that has an id attribute
with a value of "green":
- p#green {color: green}
|
|
31
|
- HTML and XHTML require each id be unique– therefore an id value can only
be used once in a document
- You can mark a group of elements with a common identifier using the
class attribute
- <element class=“class”> … </element>
|
|
32
|
- Omit the tag name in the selector to define a style that will be used by
all elements that have that class:
- .center {text-align: center}
- Both h1 and p have class="center".
- <h1 class="center"> center-aligned </h1>
- <p class="center"> also center-aligned. </p>
|
|
33
|
- Define a class (in the header) by
- giving it a name preceded by a period
- adding the standard style definitions inside {}
|
|
34
|
- With the class selector you can define different styles for the same
type of HTML element:
- p.right {text-align: right}
- p.center {text-align: center}
|
|
35
|
- Use the class attribute in your HTML document:
- <p class="right"> This paragraph will be right-aligned.
</p>
- <p class="center"> This paragraph will be
center-aligned. </p>
|
|
36
|
- a: link {style for never visited links}
- a: visited {style for visited links}
- a: active {style for link that is currently being clicked}
- a: hover {style when the mouse cursor is hovering over the link} – rollover
effect.
- examples/css/link_rollover.html
|
|
37
|
- The <div> tag defines a division/section in a document.
- <div> is an HTML tag (not CSS)
- It does not format content
- Browsers usually place a line break before and after the div element
|
|
38
|
- It is like a generic block level tag
- Use the <div> tag to group block elements.
- You can assign a CLASS (or ID or STYLE
or ONCLICK or ONMOUSEOVER
etc).
|
|
39
|
- This is some text
- <div style="color:#FF0000;">
- <h4>This is a header in a
div section</h4>
- <p>This is a paragraph in
a div section</p>
- </div>
|
|
40
|
- The <span> tag is used to mark (or group) inline elements like
letters, words or phrases.
|
|
41
|
- <p> text1 <span style="color:#0000FF;">
text2</span> text3
- </p>
- <p><span style="color:#00DD45;">4</span>
- </p>
- output????
|
|
42
|
- <p> text1 <span style="color:#0000FF;">
text2</span> text3</p>
- <p style="color:#00DD45;">4</p>
- styles.html
|
Notes
