BCS FWD 6 IntroductionToCSSPowerPoint

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 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 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
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.
Definition:
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: Lets Create Our First CSS Page
Open Notepad Type the following Code

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

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

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


Instructor
<html> <head> <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>
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
Save Your File as css-id.html into a your folder called CSS.
Lesson 3 Assignment: Lets Create A CSS Page that uses class


Instructor
<html> <head> <style type="text/css"> .center { text-align:center; } </style> </head> <body> <h1 class="center">Center-aligned heading</h1> <p class="center">Center-aligned paragraph.</p> </body> </html>
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
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: 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>
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

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>

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>

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.

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
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.

Keyword Color
aqua black
Hex
#00ffff #000000
blue
fuchsia gray green lime maroon navy olive orange (added in CSS 2.1) purple red silver teal white yellow
#0000ff
#ff00ff #808080 #008000 #00ff00 #800000 #000080 #808000 #ffa500 #800080 #ff0000 #c0c0c0 #008080 #ffffff #ffff00

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*/

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%
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.
Instructor
<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>
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.
</body> </html> Save Your File as css-color.html into your folder called CSS
Essential
Questions Review

BCS FWD 6 IntroductionToCSSPowerPoint

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

BCS FWD 6 IntroductionToCSSPowerPoint

Uploaded by

Copyright:

Available Formats

Introduction To CSS

Lesson 1: History of CSS

Lesson 1: What is CSS?

Lesson 1: Examples of CSS

HTML Formatting Review

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 style

Property & Value

*Each declaration consists of a property and a value.

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>

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

Lesson 3: Class and id Selectors

Lesson 3: Class and id Selectors

Lesson 3: Class and id Selectors

Lesson 3 Assignment: Lets Create A CSS Page that uses id

Open Notepad Type the following Code

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

Lesson 3 Assignment: Lets Create A CSS Page that uses class

Open Notepad Type the following Code

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

You add comments by enclosing them in /* and */

Lesson 3 Assignment: Lets Add A Comment

/*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 Page

is applied to a web page using three different methods:

Lesson 4: How CSS is Applied to A Web Page

Lesson 4: How CSS is Applied to A Web Page

Lesson 4: How CSS is Applied to A Web Page

Lesson 4: How CSS is Applied to A Web Page

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5: Colors and Formatting in CSS

Lesson 5 Assignment: CSS Using Color

You might also like

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