Css Founder.com | Cssfounder org

Css Founder.com | Cssfounder Css Founder.com | Cssfounder OrgOrg

http://cssfounder.comhttp://cssfounder.com

Introduction Introduction To CSSTo CSS

by: Alexandra Vlachakisby: Alexandra VlachakisSandy Creek High School, Fayette County SchoolsSandy Creek High School, Fayette County Schools

Content and Resources Used With Permission: Content and Resources Used With Permission: Interact With Web Standards. Copyright 2010. Erin Anderson Interact With Web Standards. Copyright 2010. Erin Anderson

et. Al.et. Al.W3 Schools. www.w3schools.com. 12-25-11. W3 Schools. www.w3schools.com. 12-25-11.

Css Founder.com

HTML ReviewHTML 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?

Css Founder.com

Lesson 1: History of CSSLesson 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.

Css Founder.com

Lesson 1: What is CSS?Lesson 1: What is CSS?

• CSSCSS stands for stands for CCascading ascading SStyle tyle SSheets heets • Styles - define Styles - define how to displayhow to display HTML elements HTML elements • Styles are normally stored in Styles are normally stored in Style SheetsStyle Sheets

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

Css Founder.com

Lesson 1: Examples of Lesson 1: Examples of CSSCSS

► Example 1: http://www.csszengarden.com/Example 1: http://www.csszengarden.com/► Example 2: http://w3schools.com/css/demo_default.htm Example 2: http://w3schools.com/css/demo_default.htm ► If you notice each time we click on a different CSS style sheet 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 on the two pages above the look and feel of each page changes dramatically but the content stays the same.changes dramatically but the content stays the same.

► HTML did not offer us this option.HTML did not offer us this option.► HTML was never intended to contain tags for formatting a HTML was never intended to contain tags for formatting a

document.document.► HTML was intended to define the content of a document, like:HTML was intended to define the content of a document, like:► <h1>This is a heading</h1><h1>This is a heading</h1>► <p>This is a paragraph.</p><p>This is a paragraph.</p>► When tags like <font>, and color attributes were added to the When tags like <font>, and color attributes were added to the

HTML 3.2 specification, it started a nightmare for web HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and developers. Development of large web sites, where fonts and color information were added to every single page, became a color information were added to every single page, became a long and expensive process.long and expensive process.

► To solve this problem, the World Wide Web Consortium (W3C) To solve this problem, the World Wide Web Consortium (W3C) created CSS.created CSS.Css Founder.com

HTML Formatting ReviewHTML Formatting Review

► What are the starting tags in HTML?What are the starting tags in HTML?► What are the ending tags in HTML?What are the ending tags in HTML?► How do you save in a Notepad document so it How do you save in a Notepad document so it

becomes a web page?becomes a web page?► What is the tag for creating paragraphs in What is the tag for creating paragraphs in

HTML?HTML?► What is the tag for creating heading tags in What is the tag for creating heading tags in

HTML?HTML?► What are the tags we use to format font: What are the tags we use to format font:

family, color, size, alignment in HTML?family, color, size, alignment in HTML?Css Founder.com

Lesson 2: Lesson 2: Syntax oF CSSSyntax oF CSS

The CSS syntax is made up of 5 parts: The CSS syntax is made up of 5 parts:

selectorselector property/valueproperty/value declaration declaration declaration block declaration block curly bracescurly braces

We will explore each part in the next slides.We will explore each part in the next slides.

Css Founder.com

SelectorSelector

Definition: identifies the HTML elements Definition: identifies the HTML elements that the rule will be applied to, identified that the rule will be applied to, identified by the actual element name, e.g. <body>, by the actual element name, e.g. <body>, or by other means such as or by other means such as classclass attribute attribute values. values.

Example:Example:

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

Css Founder.com

Property & ValueProperty & Value

Definition: Definition: The property is the style attribute you want to change. Each property has a value.

*Properties are separated from their respective values by *Properties are separated from their respective values by colons colons ::*Pairs are separated from each other by Pairs are separated from each other by semicolons semicolons ;; Css Founder.com

DeclarationDeclaration

Definition: Each CSS line that includes Definition: Each CSS line that includes property and valueproperty and value

*Each declaration consists of a property and a value.

Css Founder.com

Declaration BlockDeclaration Block

Definition: multiple declaration lines Definition: multiple declaration lines including the curly bracesincluding the curly braces

Css Founder.com

Curly BracesCurly Braces

Definition: the curly braces contain the Definition: the curly braces contain the properties of the element you want to properties of the element you want to manipulate, and the values that you want manipulate, and the values that you want to change them to. The curly braces plus to change them to. The curly braces plus their content is called a declaration block. their content is called a declaration block.

Example:Example:

Css Founder.com

Lesson 2 Assignment:Lesson 2 Assignment:Let’s Create Our First CSS PageLet’s Create Our First CSS Page

► Open NotepadOpen Notepad► Type the following CodeType the following Code

<html><html><head><head><style type="text/css"><style type="text/css">p {color:red; text-align:center;} p {color:red; text-align:center;}

</style></style></head></head>

<body><body><p>Hello World!</p><p>Hello World!</p><p>This paragraph is styled with CSS.</p><p>This paragraph is styled with CSS.</p></body></body></html></html>

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

►Instructor Note: You can Instructor Note: You can demonstrate how to do this by demonstrate how to do this by using the example given on using the example given on the W3schools site. Also as you the W3schools site. Also as you are creating this file point out are creating this file point out to students where they will find to students where they will find the different syntax found in the different syntax found in CSS.CSS.►After creating the file have After creating the file have students manipulate the color students manipulate the color and alignment values.and alignment values.

Css Founder.com

Lesson 3: Lesson 3: Class and id Class and id SelectorsSelectors In addition to setting a style for a HTML element, CSS In addition to setting a style for a HTML element, CSS

allows you to specify your own selectors called "id" allows you to specify your own selectors called "id" and "class".and "class".

idid - - The id selector is used to specify a style for a single, The id selector is used to specify a style for a single, unique element. unique element.

The id selector uses the id attribute of the HTML The id selector uses the id attribute of the HTML element, and is defined with a "#". element, and is defined with a "#".

The style rule below will be applied to the element The style rule below will be applied to the element with id="para1": with id="para1":

#para1 {text-align:center;color:red;}#para1 {text-align:center;color:red;}

Css Founder.com

Lesson 3: Lesson 3: Class and id Class and id SelectorsSelectorsClass Class -- The class selector is used to specify a style for a The class selector is used to specify a style for a

group of elements. Unlike the id selector, the class group of elements. Unlike the id selector, the class selector is most often used on several elements. selector is most often used on several elements.

This allows you to set a particular style for any HTML This allows you to set a particular style for any HTML elements with the same class. elements with the same class.

The class selector uses the HTML class attribute, and The class selector uses the HTML class attribute, and is defined with a "." is defined with a "."

In the example below, all HTML elements with In the example below, all HTML elements with class="center" will be center-aligned:class="center" will be center-aligned:

.center {text-align:center;}.center {text-align:center;}

Css Founder.com

Lesson 3: Lesson 3: Class and id Class and id SelectorsSelectors

In the image below what is the h1 In the image below what is the h1 selector an ID or a Class?selector an ID or a Class?

#

.

Css Founder.com

Lesson 3 Assignment:Lesson 3 Assignment:Let’s Create A CSS Page that uses “id”Let’s Create A CSS Page that uses “id”


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

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

►Instructor Note: You can Instructor Note: You can demonstrate how to do this by demonstrate how to do this by using the example given on using the example given on the W3schools site. Also as you the W3schools site. Also as you are creating this file point out are creating this file point out to students where they will find to students where they will find the different syntax found in the different syntax found in CSSCSS►After creating the file have After creating the file have students manipulate the name students manipulate the name of the “id”of the “id”

Css Founder.com

Lesson 3 Assignment:Lesson 3 Assignment:Let’s Create A CSS Page that uses “class”Let’s Create A CSS Page that uses “class”


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

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

►Instructor Note: You can Instructor Note: You can demonstrate how to do this by demonstrate how to do this by using the example given on using the example given on the W3schools site. Also as you the W3schools site. Also as you are creating this file point out are creating this file point out to students where they will find to students where they will find the different syntax found in the different syntax found in CSSCSS►After creating the file have After creating the file have students manipulate the name students manipulate the name of the “class”of the “class”

Css Founder.com

Lesson 3 CommentsLesson 3 Comments► Comments are used to explain your code, and may help you when 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 you edit the source code at a later date. Comments are ignored by browsers.browsers.

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

► Comments can span several lines, and the browser will ignore these Comments can span several lines, and the browser will ignore these lines.lines.

► Example:Example:

► /* This is a basic comment it will not appear on the page*/ /* This is a basic comment it will not appear on the page*/ /* starts the comment /* starts the comment */ is the end of the comment*/ is the end of the comment

/*This is a comment*//*This is a comment*/p{ text-align:center; color:black; font-family:arial;}p{ text-align:center; color:black; font-family:arial;}

Css Founder.com

Lesson 3 Assignment:Lesson 3 Assignment:Let’s Add A CommentLet’s Add A Comment

► Open Your CSS-ID example in NotepadOpen Your CSS-ID example in Notepad► Type the following Code right above the style you had written previously.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*//*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.Save Your File as css-comment.html into a your folder called CSS.

Css Founder.com

Lesson 4:Lesson 4: How CSS is Applied to A Web How CSS is Applied to A Web PagePage

►CSS is applied to a web page using CSS is applied to a web page using three different methods:three different methods: Inline styleInline style Internal style sheetInternal style sheet External style sheet External style sheet

Css Founder.com

► Inline CSSInline CSS►Applies styles directly to the elements Applies styles directly to the elements

by adding declarations into the styleby adding declarations into the style►For Example:For Example:

<p style=“color: red;”> This is a simple <p style=“color: red;”> This is a simple paragraph and the inline style makes paragraph and the inline style makes it red.</p>it red.</p>


Css Founder.com

► Internal Style SheetInternal Style Sheet► Applies styles to HTML by placing the CSS rules inside the Applies styles to HTML by placing the CSS rules inside the

tag <style> inside the document tag <head>.tag <style> inside the document tag <head>.► For Example:For Example:<head><head><title>my page</title><title>my page</title><style type=“text/css”><style type=“text/css”>p{color:red}</style>p{color:red}</style></head></head><body><body><p>this is a simple paragraph<p>this is a simple paragraph</p></p></body></body>


Css Founder.com

► External CSSExternal CSS► Applies styles as a separate file with a .css extension. The Applies styles as a separate file with a .css extension. The

file is then referenced from inside the <head> element file is then referenced from inside the <head> element by a link to the file.by a link to the file.

► For Example:For Example:<head><head><title>my external style sheet page</title><title>my external style sheet page</title><link rel=“style sheet” type=“text/css” href=“my-external-<link rel=“style sheet” type=“text/css” href=“my-external-

stylesheet.css”>stylesheet.css”><body><body><p>this is a simple paragraph</p><p>this is a simple paragraph</p></body></body>► You can create an external style sheet in your text You can create an external style sheet in your text

editor.editor.


Css Founder.com

► What style sheet is best?What style sheet is best?► Web developers rarely use inline CSS. Since they Web developers rarely use inline CSS. Since they

prefer to not mix content with presentation. And it prefer to not mix content with presentation. And it is not efficient since you have to declare the style is not efficient since you have to declare the style individually for every component.individually for every component.

► Internal and External style sheets are more popular Internal and External style sheets are more popular because you can style multiple elements with one because you can style multiple elements with one rule.rule.

► External style sheets are best because they allow External style sheets are best because they allow you to save all the style information on a separate you to save all the style information on a separate file from the content. You can then modify a style file from the content. You can then modify a style for a site and it will update all of the pages in a site.for a site and it will update all of the pages in a site.


Css Founder.com

►CSS ColorsCSS Colors► In the previous lesson you have seen In the previous lesson you have seen

a few CSS styles that included color a few CSS styles that included color like: <p style=“color: red;”> like: <p style=“color: red;”>

►There are a few ways that you can set There are a few ways that you can set colors in CSS:colors in CSS:

Keywords, Hex values, RGB, HSL(a)Keywords, Hex values, RGB, HSL(a)

Lesson 5:Lesson 5: Colors and Formatting in Colors and Formatting in CSSCSS

Css Founder.com

► CSS Colors: KeywordsCSS Colors: Keywords► Using the keywords like: red, fuchsia, Using the keywords like: red, fuchsia,

yellow, blue, green you can specify what yellow, blue, green you can specify what color you would like the CSS rule to display.color you would like the CSS rule to display.

► For example:For example:► p{color:red}p{color:red}► h2{color:yellow}h2{color:yellow}► There are 17 of these keyword colors you There are 17 of these keyword colors you

can use in CSS. can use in CSS.


Css Founder.com

Keyword ColorKeyword Color HexHex

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

► Computers are capable of displaying a lot Computers are capable of displaying a lot more than 17 colors.more than 17 colors.

► In fact they can display approximately 16.7 In fact they can display approximately 16.7 million colors!million colors!

► Hex Values (hex is short for hexadecimal) are Hex Values (hex is short for hexadecimal) are the most common way of specifying colors for the most common way of specifying colors for web pages. (see hex# in the previous chart)web pages. (see hex# in the previous chart)

► For example: For example: p{color: #000000;}p{color: #000000;}/*This is equivalent to the keyword black*//*This is equivalent to the keyword black*/


Css Founder.com

►Hex numbersHex numbers - has 16 possible values - has 16 possible values►0 to 9 then A to F. Which gives you 16 0 to 9 then A to F. Which gives you 16

values.values.►RGB (Red Green Blue) has the possibility RGB (Red Green Blue) has the possibility

of 256 colors for each (16x16)of 256 colors for each (16x16)►(R)256 x (G)256 x (B)256 = 16,777,216 (R)256 x (G)256 x (B)256 = 16,777,216

or 16.7 million color valuesor 16.7 million color values►CSS example: h1{color: #000000;}CSS example: h1{color: #000000;}

Lesson 5:Lesson 5: Colors and Formatting in CSS Colors and Formatting in CSS

Css Founder.com

► RGB (a)RGB (a) can also help specify colors in CSS can also help specify colors in CSS RGB stands for Red Green BlueRGB stands for Red Green Blue

► You can specify RGB in either whole numbers You can specify RGB in either whole numbers or percentagesor percentages

► CSS example: h1{color: rgb(0,0,0) }CSS example: h1{color: rgb(0,0,0) }/*this color is equivalent to #000000 or black /*this color is equivalent to #000000 or black

*/*/► You use numbers from 0 to 255 which covers You use numbers from 0 to 255 which covers

the 256 color range.the 256 color range.► More examples can be found at: More examples can be found at:

http://www.w3schools.com/css/css_colors.asphttp://www.w3schools.com/css/css_colors.asp


Css Founder.com

► RGB (a)RGB (a) can also help specify colors in CSS RGB can also help specify colors in CSS RGB stands for Red Green Blue. The “a” stands for stands for Red Green Blue. The “a” stands for alpha but we will learn about that in another alpha but we will learn about that in another lesson.lesson.

► You can specify RGB in either whole numbers or You can specify RGB in either whole numbers or percentagespercentages

► CSS example: h1{color: rgb(0,0,0) }CSS example: h1{color: rgb(0,0,0) }/*this color is equivalent to #000000 or black *//*this color is equivalent to #000000 or black */► You use numbers from 0 to 255 which covers the You use numbers from 0 to 255 which covers the

256 color range.256 color range.► More examples can be found at: More examples can be found at:

http://www.w3schools.com/css/css_colors.asphttp://www.w3schools.com/css/css_colors.asp


Css Founder.com

► HSL (a)HSL (a) - Hue Saturation Lightness - Hue Saturation Lightness► Similar to RGB but based on saturation and Similar to RGB but based on saturation and

lightness of a colorlightness of a color► The “a” stands for alpha but we will learn The “a” stands for alpha but we will learn

about that in another lesson.about that in another lesson.► CSS example: h1{color: hsl(0,100%,40%) }CSS example: h1{color: hsl(0,100%,40%) }► HSL accepts a number between 0 to 360 in HSL accepts a number between 0 to 360 in

valuevalue► HSL also accepts percentage between 0-100%HSL also accepts percentage between 0-100%


Css Founder.com

Lesson 5 Assignment:Lesson 5 Assignment:CSS Using ColorCSS Using Color

► Open Your CSS-ID example in NotepadOpen Your CSS-ID example in Notepad► Type the following Code right above the style you had written previously.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 CSSSave Your File as css-color.html into your folder called CSS

►Instructor Note: You can Instructor Note: You can demonstrate how to do this by demonstrate how to do this by using the example given on using the example given on the W3schools site. Also as you the W3schools site. Also as you are creating this file point out are creating this file point out to students the different syntax to students the different syntax found in CSS.found in CSS.►After creating the file have After creating the file have students manipulate the color students manipulate the color values to discover other color values to discover other color combinations.combinations.

Css Founder.com

►Essential Questions ReviewEssential Questions Review

Css Founder.com

Technology

Css Founder.com | Cssfounder org