Intro to CSS Powerpoint

Transcript Intro to CSS Powerpoint

Cascading Style Sheets
CSS
CSS
• All web pages can be broken down into
content areas
• These areas can updated by changing the
code on every page (in the HTML file)
- or • By using cascading style sheets!
Advantages of Style Sheets
•
•
•
•
•
Saves time
Easy to change
Keep consistency
Give you more control over layout
Make it easy to create a common format for all
the Web pages regardless if your website is 1
page or 10,000 pages
Applying a single style sheet to
multiple documents
Basic Structure of a Style
• Each definition contains:
–
–
–
–
A property
A colon
A value
A semicolon to separate two or more
values
– Can include one or more values
• h1 {
font-size:12pt;
color:red
}
Style Precedence
1. External style sheet
2. Embedded styles
3. Inline styles
Three Style Types
• Inline styles
– Add styles to each tag within the HTML
file
– Use it when you need to format just a
single section in a web page
• Example
<h1 style=“color:red; font-family: sanssarif”>IU</h1>
Three Style Types
• Embedded or internal styles
– A style is applied to the entire HTML file
– Use it when you need to modify all
instances of particular element (e.g., h1)
in a web page
• Example
<style>
h1 {color:red; font-family:sans-serif}
</style>
Creating an Embedded Style
<head>
<title>Embedded Example</title>
<style> (default is “text/css”)
Style declarations
</style>
</head>
• A style declaration:
– Selector {attribute1:value1; attribute2:value2;
…}
– Selector = an element in a document (e.g., a
header or paragraph)
An Example of an embedded style
(p. 353 Fig 7-2)
<head>
<title>Getting Started</title>
<style type=“text/css”>
h1 {font-family: sans-serif; color: organge}
</style>
</head>
Three Style Types
• External style sheets
– An external style sheet is a text file containing
the style definition (declaration)
– Use it when you need to control the style for an
entire web site
• Example
– h1, h2, h3, h4, h5, h6 {color:red; fontfamily:sans-serif}
– Save this in a new document using a .css
extension
Creating an External Style
Sheet
• Open a new blank document in
Notepad or TextEdit
• Type style declarations
– h1 {color:red; font-family:sans-serif;}
• Do not include <style> tags
• Save the document as style.css
Linking to Style Sheets 1
• Open an HTML file
• Between <head> and </head> add
<link href=URL rel=“relation_type”
type=“link_type”>
•
•
•
URL is the style.css
Relation_type=“stylesheet”
Link_type=“text/css”
• Save this file and the .css file in the
same web server directory
An example of an external style
sheet with an original html file
<head>
<title>Getting
Started</title>
<link href=“style.css”
rel=“stylesheet”
type=“text/css” />
</head>
h1 {font-family: sansserif; color: orange}
b {color: blue}
Text file of css named “stylesheet”
html file
Standard CSS Practices
• Wherever possible, place your styles
in external style sheets
• Take advantage of the power of CSS
to have control over an entire Web
site
Style Sheet Strategies
• At the top level of your web site:
define a global cascading style sheet
• Refine styles at sublevels with a local
cascading style sheet
• Try to avoid using styles in tags
Using IDs and Classes
• Use an id to distinguish something,
like a paragraph, from the others in a
document.
– For example, to identify a paragraph as
“head”, use the code:
<p id=“head”>… </p>
Working With Ids
• To create an ID for a specific tag, use the
property:
<element id=“id_name”>
For example:
<p id=“main_content”>
• To apply a style to a specific ID, use:
#id_name { style attributes and values }
For example:
#main_content { color: red }
Classes
• 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>
Applying a style to a class
Working With Classes
• To create a class, enter the following in the
HTML tag:
<element class=class_name>
<h1 class=class_name>something</h1>
– class_name is a name to identify this class of
tags
• To apply a style to a class of tags, use:
.class_name {style attributes}
Working With Classes and Ids
• The difference between the Class
property and the ID property is that the
value of the ID property must be unique:
– you can’t have more than one tag with the
same ID value
– You can apply the same Class value to
multiple document tags
Working With DIV
• <div> tag is used for blocks of content, e.g.,
paragraphs, block quotes, headers, image
areas
• To create a container for block-level elements,
use:
– <div class=class_name>
•
Block-level elements
– </div>
– Class_name is the name of the class
– You can substitute the ID proper for the Class
property (with ID, the syntax for CSS style,
#id_name {style attributes and values}
Working With <div> (p. 372)
div.sitetitle {font-weight:bold}
style
Welcome
<div class=sitetitle>Welcome</DIV>
HTML code
Resulting
text

Intro to CSS Powerpoint

Transcript Intro to CSS Powerpoint

Directory