Beruflich Dokumente
Kultur Dokumente
To CSS
Definition:
Cascading Style Sheets (CSS) is a rule based
language that applies styling to your HTML
elements. You write CSS rules in elements, and
modify properties of those elements such as color,
background color, width, border thickness, font
size, etc.
Lesson 1: Examples of
CSS
Example 1: http://www.csszengarden.com/
Example 2: http://w3schools.com/css/demo_default.htm
If you notice each time we click on a different CSS style sheet
on the two pages above the look and feel of each page
changes dramatically but the content stays the same.
HTML did not offer us this option.
HTML was never intended to contain tags for formatting a
document.
HTML was intended to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the
HTML 3.2 specification, it started a nightmare for web
developers. Development of large web sites, where fonts and
color information were added to every single page, became a
long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C)
created CSS.
HTML Formatting Review
What are the starting tags in HTML?
What are the ending tags in HTML?
How do you save in a Notepad document so it
becomes a web page?
What is the tag for creating paragraphs in
HTML?
What is the tag for creating heading tags in
HTML?
What are the tags we use to format font: family,
color, size, alignment in HTML?
Lesson 2: Syntax oF CSS
The CSS syntax is made up of 5 parts:
selector
property/value
declaration
declaration block
curly braces
Example:
Lesson 2 Assignment:
Lets Create Our First CSS Page
Open Notepad
Type the following Code
Instructor Note: You can
<html> demonstrate how to do this by
<head> using the example given on the
<style type="text/css"> W3schools site. Also as you are
p {color:red; text-align:center;} creating this file point out to
students where they will find
</style> the different syntax found in
</head> CSS.
After creating the file have
<body>
students manipulate the color
<p>Hello World!</p>
and alignment values.
<p>This paragraph is styled with CSS.</p>
</body>
</html>
#para1 {text-align:center;color:red;}
Lesson 3: Class and id
Selectors
Class - The class selector is used to specify a style for a
group of elements. Unlike the id selector, the class
selector is most often used on several elements.
.center {text-align:center;}
Lesson 3: Class and id
Selectors
In the image below what is the h1
selector an ID or a Class?
.
Lesson 3 Assignment:
Lets Create A CSS Page that uses id
Open Notepad
Type the following Code
Instructor Note: You can
<html> demonstrate how to do this by
<head> using the example given on the
<style type="text/css"> W3schools site. Also as you are
#para1 creating this file point out to
{ students where they will find
text-align:center; the different syntax found in
color:red;
CSS
}
After creating the file have
</style>
</head> students manipulate the name
of the id
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Comments can span several lines, and the browser will ignore these
lines.
Example:
/*This is a comment*/
p{ text-align:center; color:black; font-family:arial;}
Lesson 3 Assignment:
Lets Add A Comment
Open Your CSS-ID example in Notepad
Type the following Code right above the style you had written previously.
<html>
<head>
/*This is an example of how to use ID in a CSS web page*/
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Inline CSS
Applies styles directly to the elements
by adding declarations into the style
For Example:
<p style=color: red;> This is a simple
paragraph and the inline style makes
it red.</p>
Lesson 4: How CSS is Applied to A Web
Page
Internal Style Sheet
Applies styles to HTML by placing the CSS rules inside the
tag <style> inside the document tag <head>.
For Example:
<head>
<title>my page</title>
<style type=text/css>
p{color:red}</style>
</head>
<body>
<p>this is a simple paragraph
</p>
</body>
Lesson 4: How CSS is Applied to A Web
Page
External CSS
Applies styles as a separate file with a .css extension. The
file is then referenced from inside the <head> element
by a link to the file.
For Example:
<head>
<title>my external style sheet page</title>
<link rel=style sheet type=text/css href=my-external-
stylesheet.css>
<body>
<p>this is a simple paragraph</p>
</body>
You can create an external style sheet in your text editor.
Lesson 4: How CSS is Applied to A Web
Page
What style sheet is best?
CSS Colors
In the previous lesson you have seen
a few CSS styles that included color
like: <p style=color: red;>
There are a few ways that you can set
colors in CSS:
Keywords, Hex values, RGB, HSL(a)
Lesson 5: Colors and Formatting in
CSS
CSS Colors: Keywords
Using the keywords like: red, fuchsia,
yellow, blue, green you can specify what
color you would like the CSS rule to display.
For example:
p{color:red}
h2{color:yellow}
There are 17 of these keyword colors you
can use in CSS.
Lesson 5: Colors and Formatting in
CSS
Keyword Color Hex
aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008000
lime #00ff00
maroon #800000
navy #000080
olive #808000
orange (added in CSS 2.1) #ffa500
purple #800080
red #ff0000
silver #c0c0c0
teal #008080
white #ffffff
yellow #ffff00
Lesson 5: Colors and Formatting in
CSS
Computers are capable of displaying a lot
more than 17 colors.
In fact they can display approximately 16.7
million colors!
Hex Values (hex is short for hexadecimal) are
the most common way of specifying colors for
web pages. (see hex# in the previous chart)
For example:
p{color: #000000;}
/*This is equivalent to the keyword black*/
Lesson 5: Colors and Formatting in CSS
</body>
</html>
Save Your File as css-color.html into your folder called CSS
Essential Questions Review