Css Intro

CSS
Internet Tech/ Web Development

What is CSS?
• Cascading Style Sheets

• Rules that define how HTML elements should look
• body {background:black;}
• Cascades part determines the order the rules are
applied in
What is CSS?
• Cascading: Multiple styles can overlap in order to specify a range of style

from a whole web sit-down to a unique element. Which style gets
applied pertains to the rules of CSS cascading logic.
• Style: CSS deals specifically with the presentation domain of designing a

web page (color, font, layout, etc).
• Sheet: Normally, CSS is a file separate from the HTML file – linked to the
HTML file through its <head> (exceptions apply)
Why CSS?
• • Allows for much richer document appearances

than HTML.
• • Reduce workload by centralizing commands for

visual appearance instead of scattered throughout
the HTML doc.
• • Use same style on multiple pages.
• • Reduce page download size.

What is Meant by "Cascading"?
• We use the term cascading because there is an established

order of priority to resolve these formatting conflicts:
1) Inline style (highest priority)
2) Internal style sheet (second priority)
3) External style sheet (third priority)
4) Web browser default (only if not defined elsewhere)
Where does CSS go
• Inline style="" attribute - Only good for one tag
• Embedded/internal <style> - Good for the whole page
• External <link rel="stylesheet" href="" /> - Many Pages

Inline
• Only affects a specific tag
<em style="color:red;">dog</em>
Example: Inline Style
<h2 style="font-family:georgia; color:red;">
CAUTION: Stormy Weather!
</h2>
PREVIEW:
A semicolon must follow each style declaration.
An inline style declaration like this one will affect only that particular
element. In other words, other <h2> elements on the page will not be
affected by this formatting.
Because inline styles do not properly separate content and

presentation, their use is discouraged. We will not be using inline
styles in this class.
Embedded
<style>
em {
color: green; font-size:18px;
}
</style>
• Uses the <style> tag

• Affects the current page
• Uses selectors to specify which tags to affect
Example: Internal Style Sheet
<head>
<style type="text/css">
h2 {font-family:georgia; color:red;}
</style>
</head>
For internal style sheets, all formatting declarations are placed inside
the <style> element within the <head> section of the document. An
element is listed and all the styling information follows, surrounded by
opening and closing curly brackets, { }. A semicolon must still follow
each style declaration.
Styles declared in the internal style sheet will affect all matching
elements on the page. In this example, all <h2> elements on the
page will be displayed in Georgia font and in red color.
External
<link rel="stylesheet" type="text/css" href="my.css" />
• Can affect a multitude of documents

• Uses a separate file that must be linked to
• The CSS file does NOT need <STYLE> tag
Example: External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
style.css (separate file):

h2 {font-family:georgia; color:red;}
For external style sheets, a <link> tag is placed at the beginning of the
<head> section of the document specifying the external style sheet
(with a .css extension) to be used for formatting. The external style
sheet uses the same syntax as the internal style sheet when listing
elements and their styling.
Styles declared in an external style sheet will affect all matching

elements on all web pages that link to the stylesheet. In this example,
all <h2> elements on all pages using this style sheet will be displayed
in Georgia font and in red color.
Reference CSS from HTML
<link rel=“stylesheet” type=“text/css” href=“lipstick.css” />
pig.html lipstick.css
<html>
<head>
<link rel="stylesheet"
type="text/css"
href=“lipstick.css" />
</head>
…
</
html>
CSS Syntax
Selector Style Block
h1 {
color: red; Style
Element Values
Properties background: yellow;
}
•The Selector selects elements on the HTML

page.
•The associated Style Block applies its Style
Values to the selected
Element’s Properties
Selectors
• Select elements to apply a declared style.
• Selector types:
– Element Selectors: selects all elements of a
specific type (<body>, <h1>, <p>, etc.)
– Class Selectors: selects all elements that
belong to a given class.
– ID Selectors: selects a single element that’s
been given a unique id.
– Pseudo Selectors: combines a selector with a
user activated state (:hover, :link, :visited)
Element Selectors
• Finds all HTML elements that have the specified
element type.
• Example:
h1 {
color: blue;
}
Finds all elements of type <h1> and makes the

text color blue.
Class Selectors
• Finds all elements of a given class – based on the
attribute’s class value.
• Syntax: .classname (Remember the dot means
class selector)
• Example:
.legs {
font-weight: bold; background: pink;
}
Finds all elements whose class = “legs” and makes their

font bold and their backgrounds pink.
ID Selectors
• Finds a single element that’s been given a

unique id – based on the attribute’s id value.
• Syntax: #idname (Remember the pound-
sign means id selector)
• Example:
#snout{
border: solid red;
}
Finds a single element whose id = “snout” and

gives it a solid red border.
Pseudo-Selectors
• Apply styles to a user activated state of an

element.
• If used, must be declared in a specific order in
the style sheet.
• General Purpose Pseudo-Selector:
– :hover Element with mouse over
• Specific to hyperlinks (and/or buttons)
– a:active A link or button that is currently being
clicked on.
– a:link A link that has NOT been visited yet.
– a:visited A link that HAS been visited.
Grouping Selectors
• Lets say you want to apply the same style to several

different selectors. Don’t repeat the style – use a
comma!!
• Syntax: sel1, sel2, sel3 (Remember the comma to
group several different selectors)
• Example:
h1, .legs, #snout{ font-size: 20pt;

}
Finds all elements of type <h1>, all elements with

class=“legs” and the single element whose id = “snout”
then makes their font-size 20pt.
Firebug – Firefox Addon
• Tool for figuring out what styles are being

applied to which element (and which are being
overwritten due to conflict resolution).
• http://getfirebug.com/
• Right-click on an element,
then select “Inspect Element” from the dropdown
menu.
<span> Element tag
• Useful for applying style to text within

another HTML element.
• Use SPARINGLY – unlike <h1> or <p>,
<span> has no semantic meaning.
• Remember, HTML is for content and
HTML tags are for describing that content
to non-human or visually-impaired
readers. <span> is just used to make
things “pretty.”
<div> Element tag
• Useful for dividing parts of the page into sections.

• Creates a “box” with the following attributes:
– margin
– padding
– border
– height
– width
– (..and lots more)
• Primary element used for CSS Layouts (more

information in CSS Layouts tutorial)
Color Properties
• color: specifies the text color.

background-color:
• specifies the background color.
black; or #000000; red; or

#FF0000; lime; or #00FF00; blue;
or #0000FF; white; or #000000;
…
Colorzilla – Firefox Addon
• Easily find color values for elements in a
document.
• http://www.iosart.com/firefox/colorzilla/
• Click on the eyedropper icon in the
bottom-left of the browser and select any
color in your browser window.
• Right-click on the eyedropper for more
options.
Background Image Properties
• background-image: url(../location/of/image.jpg)
• background-repeat: tile image in
background
• background-position: vertical (top,
center, bottom, or size) horizontal (left,
center, right, or size)
• background-attachment: (scroll or fixed)
Font Properties
• font-family: times, arial, serif, sans-serif,
• monospace;
• font-style: italic;
• font-weight: (bold, bolder, lighter, or 100 – 900;)
• font-size: size;
• …or shorthand
• font: style weight size family;
Text Properties
• text-indent: indents first line of a

paragraph according to size
• text-align: right; or left; or center; or
justify;
• text-decoration: none; or underline;
• text-transform: Capitalize;
• Line-height: added vertical space to each
line of text according to size
List Properties <ul>
• list-style-type: none, disc, circle, square,

• (other types available)
• list-style-position: inside or outside
• list-style-image: url(../path/to/image.jpg)
…or shorthand
•list-style: position image
type
Border Properties
• border-width: (thin, medium, thick, or size)

• border-style: (none, hidden, dotted, dashed,
solid, double, groove, ridge, inset, or outset)
• border-color: color
…or shorthand
• border(-top, -right, -left, -bottom): width
style color

Css Intro

Uploaded by

Copyright:

Available Formats

Css Intro

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Intro

Uploaded by

Copyright:

Available Formats

CSS

Internet Tech/ Web Development

• Cascading Style Sheets

• Cascading: Multiple styles can overlap in order to specify a range of style

• Style: CSS deals specifically with the presentation domain of designing a

• • Allows for much richer document appearances

• • Reduce workload by centralizing commands for

• • Use same style on multiple pages.

• • Reduce page download size.

• We use the term cascading because there is an established

• Inline style="" attribute - Only good for one tag

• Embedded/internal <style> - Good for the whole page

• External <link rel="stylesheet" href="" /> - Many Pages

• Only affects a specific tag

A semicolon must follow each style declaration.

Because inline styles do not properly separate content and

• Uses the <style> tag

<link rel="stylesheet" type="text/css" href="my.css" />

• Can affect a multitude of documents

style.css (separate file):

Styles declared in an external style sheet will affect all matching

<link rel=“stylesheet” type=“text/css” href=“lipstick.css” />

•The Selector selects elements on the HTML

Finds all elements of type <h1> and makes the

Finds all elements whose class = “legs” and makes their

• Finds a single element that’s been given a

Finds a single element whose id = “snout” and

• Apply styles to a user activated state of an

• Lets say you want to apply the same style to several

h1, .legs, #snout{ font-size: 20pt;

Finds all elements of type <h1>, all elements with

• Tool for figuring out what styles are being

• Useful for applying style to text within

• Useful for dividing parts of the page into sections.

• Primary element used for CSS Layouts (more

• color: specifies the text color.

black; or #000000; red; or

• font-family: times, arial, serif, sans-serif,

• text-indent: indents first line of a

• list-style-type: none, disc, circle, square,

• border-width: (thin, medium, thick, or size)

You might also like