Survey
* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project
Download Introduction to CSS PowerPoint
Transcript
Introduction
To CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Content and Resources Used With Permission:
Interact With Web Standards. Copyright 2010. Erin Anderson et. Al.
W3 Schools. www.w3schools.com. 12-25-11.
HTML Review
► What
is HTML used for?
► Give some examples of formatting tags in HTML?
► HTML is the most widely used language on the
Web
► In today’s lesson we will be discussing the
second most widely used language on the web
► Does anyone know the name of the second most
widely used language?
Lesson 1: History of CSS
► CSS
was proposed in 1994 as a web styling
language. To helps solve some of the
problems HTML 4.
► There were other styling languages
proposed at this time, such as Style Sheets
for HTML and JSSS but CSS won.
► CSS2 became the recommendation in 1998
by W3C
► CSS3 was started in 1998 but it has never
been completed. Some parts are still being
developed and some components work on
some browsers.
Lesson 1: What is CSS?
• CSS stands for Cascading Style Sheets
• Styles - define how to display HTML elements
• Styles are normally stored in Style Sheets
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
We will explore each part in the next slides.
Selector
Definition: identifies the HTML elements that
the rule will be applied to, identified by the
actual element name, e.g. <body>, or by other
means such as class attribute values.
Example:
*The selector is normally the HTML element you want to style
Property & Value
Definition: The property is the style attribute
you want to change. Each property has a value.
*Properties are separated from their respective values by colons :
*Pairs are separated from each other by semicolons ;
Declaration
Definition: Each CSS line that includes property
and value
*Each declaration consists of a property and a value.
Declaration Block
Definition: multiple declaration lines including the
curly braces
Curly Braces
Definition: the curly braces contain the
properties of the element you want to
manipulate, and the values that you want to
change them to. The curly braces plus their
content is called a declaration block.
Example:
Lesson 2 Assignment:
Let’s Create Our First CSS Page
►
►
Open Notepad
Type the following Code
<html>
<head>
<style type="text/css">
p {color:red; text-align:center;}
</style>
</head>
<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
►
►Instructor
Note: You can
demonstrate how to do this by
using the example given on the
W3schools site. Also as you are
creating this file point out to
students where they will find the
different syntax found in CSS.
►After creating the file have
students manipulate the color and
alignment values.
Save Your File as css-myfirstpage.html into a new folder called CSS
Lesson 3: Class and id Selectors
In addition to setting a style for a HTML element, CSS allows
you to specify your own selectors called "id" and "class".
id - The id selector is used to specify a style for a single, unique
element.
The id selector uses the id attribute of the HTML element,
and is defined with a "#".
The style rule below will be applied to the element with
id="para1":
#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.
This allows you to set a particular style for any HTML
elements with the same class.
The class selector uses the HTML class attribute, and is
defined with a "."
In the example below, all HTML elements with class="center"
will be center-aligned:
.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:
Let’s Create A CSS Page that uses “id”
►
►
Open Notepad
Type the following Code
<html>
<head>
<style type="text/css">
#para1
{
text-align:center;
color:red;
}
</style>
</head>
►Instructor
Note: You can
demonstrate how to do this by
using the example given on the
W3schools site. Also as you are
creating this file point out to
students where they will find the
different syntax found in CSS
►After creating the file have
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>
►
Save Your File as css-id.html into a your folder called CSS.
Lesson 3 Assignment:
Let’s Create A CSS Page that uses “class”
►
►
Open Notepad
Type the following Code
<html>
<head>
<style type="text/css">
.center
{
text-align:center;
}
</style>
</head>
►Instructor
Note: You can
demonstrate how to do this by
using the example given on the
W3schools site. Also as you are
creating this file point out to
students where they will find the
different syntax found in CSS
►After creating the file have
students manipulate the name of
the “class”
<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>
►
Save Your File as css-class.html into a your folder called CSS.
Lesson 3 Comments
►
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
You add comments by enclosing them in
/* and */
►
►
Comments can span several lines, and the browser will ignore these lines.
►
Example:
/* This is a basic comment it will not appear on the page*/
/* starts the comment
*/ is the end of the comment
►
/*This is a comment*/
p{ text-align:center; color:black; font-family:arial;}
Lesson 3 Assignment:
Let’s 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>
►
Save Your File as css-comment.html into a your folder called CSS.
Lesson 4: How CSS is Applied to A Web Page
► CSS
is applied to a web page using three
different methods:
Inline style
Internal style sheet
External style sheet
Lesson 4: How CSS is Applied to A Web Page
► 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-externalstylesheet.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?
Web developers rarely use inline CSS. Since they prefer
to not mix content with presentation. And it is not
efficient since you have to declare the style individually
for every component.
►
Internal and External style sheets are more popular
because you can style multiple elements with one rule.
►
External style sheets are best because they allow you to
save all the style information on a separate file from the
content. You can then modify a style for a site and it will
update all of the pages in a site.
Lesson 5: Colors and Formatting in CSS
► 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
► Hex
numbers - has 16 possible values
► 0 to 9 then A to F. Which gives you 16
values.
► RGB (Red Green Blue) has the possibility of
256 colors for each (16x16)
► (R)256 x (G)256 x (B)256 = 16,777,216 or
16.7 million color values
► CSS example: h1{color: #000000;}
Lesson 5: Colors and Formatting in CSS
► RGB
(a) can also help specify colors in CSS RGB
stands for Red Green Blue
► You can specify RGB in either whole numbers or
percentages
► CSS example: h1{color: rgb(0,0,0) }
/*this color is equivalent to #000000 or black */
► You use numbers from 0 to 255 which covers the
256 color range.
► More examples can be found at:
http://www.w3schools.com/css/css_colors.asp
Lesson 5: Colors and Formatting in CSS
RGB (a) can also help specify colors in CSS RGB stands
for Red Green Blue. The “a” stands for alpha but we will
learn about that in another lesson.
► You can specify RGB in either whole numbers or
percentages
► CSS example: h1{color: rgb(0,0,0) }
/*this color is equivalent to #000000 or black */
► You use numbers from 0 to 255 which covers the 256
color range.
► More examples can be found at:
http://www.w3schools.com/css/css_colors.asp
►
Lesson 5: Colors and Formatting in CSS
► HSL
(a) - Hue Saturation Lightness
► Similar to RGB but based on saturation and
lightness of a color
► The “a” stands for alpha but we will learn about
that in another lesson.
► CSS example: h1{color: hsl(0,100%,40%) }
► HSL accepts a number between 0 to 360 in value
► HSL also accepts percentage between 0-100%
Lesson 5 Assignment:
CSS Using Color
►
►
Open Your CSS-ID example in Notepad
Type the following Code right above the style you had written previously.
<html>
<body>
<p style="background-color:#FFF111">
Color set by using hex value
</p>
<p style="background-color:rgb(0,255,0);">
Color set by using rgb value
</p>
<p style="background-color:red">
Color set by using color name
</p>
</body>
</html>
► Save Your File as css-color.html into your folder called CSS
►Instructor
Note: You can
demonstrate how to do this by
using the example given on the
W3schools site. Also as you are
creating this file point out to
students the different syntax found
in CSS.
►After creating the file have
students manipulate the color
values to discover other color
combinations.
► Essential
Questions Review
