Bcs FWD 6 Introductiontocsspowerpoint

Introduction
To CSS
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 todays 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 and is the
most current
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 styl
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:
Lets 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;}

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;}

Selectors
In the image below what is the h1

selector an ID or a Class?
Lets Create A CSS Page that uses id
Open Notepad
<html>
<head>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
Instructor
Note: You can

CSS
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.
Lets Create A CSS Page that uses class
Open Notepad
<html>
<head>
.center
{
text-align:center;
}
</style>
</head>
Instructor
Note: You can

CSS
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;}
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*/

#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

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>

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>

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.

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)

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.

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

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;}

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

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

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%
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>
Instructor
Note: You can

students the different syntax
found in CSS.
students manipulate the color
values to discover other color
combinations.
</body>
</html>
Save Your File as css-color.html into your folder called CSS
Essential
Questions Review

Bcs FWD 6 Introductiontocsspowerpoint

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Bcs FWD 6 Introductiontocsspowerpoint

Загружено:

Авторское право:

Доступные форматы

Introduction

is HTML used for?

Lesson 1: History of CSS

was proposed in 1994 as a web

Lesson 1: What is CSS?

Cascading Style Sheets (CSS) is a rule based

HTML Formatting Review

are the starting tags in HTML?

Lesson 2: Syntax oF CSS

The CSS syntax is made up of 5 parts:

We will explore each part in the next slides.

*The selector is normally the HTML element you want to styl

Property & Value

*Properties are separated from their respective values by

*Each declaration consists of a property and a value.

Note: You can

Save Your File as css-myfirstpage.html into a new folder called CSS

Lesson 3: Class and id

id - The id selector is used to specify a style for a single,

The id selector uses the id attribute of the HTML

The style rule below will be applied to the element

Lesson 3: Class and id

This allows you to set a particular style for any HTML

The class selector uses the HTML class attribute, and

In the example below, all HTML elements with

Lesson 3: Class and id

In the image below what is the h1

Note: You can

Save Your File as css-id.html into a your folder called CSS.

Note: You can

Save Your File as css-class.html into a your folder called CSS.

You add comments by enclosing them in

/* This is a basic comment it will not appear on the page*/

Open Your CSS-ID example in Notepad

/*This is an example of how to use ID in a CSS web page*/

Save Your File as css-comment.html into a your folder called CSS.

Lesson 4: How CSS is Applied to A Web

is applied to a web page using

Lesson 4: How CSS is Applied to A Web

Lesson 4: How CSS is Applied to A Web

Lesson 4: How CSS is Applied to A Web

Lesson 4: How CSS is Applied to A Web

What style sheet is best?

Web developers rarely use inline CSS. Since they prefer

Internal and External style sheets are more popular

External style sheets are best because they allow you

Lesson 5: Colors and Formatting in

Lesson 5: Colors and Formatting in

Lesson 5: Colors and Formatting in

orange (added in CSS 2.1)

Lesson 5: Colors and Formatting in

are capable of displaying a lot

Lesson 5: Colors and Formatting in CSS

numbers - has 16 possible values

Lesson 5: Colors and Formatting in CSS

(a) can also help specify colors in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

(a) - Hue Saturation Lightness

Open Your CSS-ID example in Notepad

Note: You can

Вам также может понравиться

/This is an example of how to use ID in a CSS web page/