SlideShare a Scribd company logo
Css Founder.com | Cssfounder OrgCss Founder.com | Cssfounder Org
http://cssfounder.comhttp://cssfounder.com
IntroductionIntroduction
To CSSTo CSS
by: Alexandra Vlachakisby: Alexandra Vlachakis
Sandy 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 et. Al.Interact With Web Standards. Copyright 2010. Erin Anderson 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 forstands for CCascadingascading SStyletyle SSheetsheets
• Styles - defineStyles - define how to displayhow to display HTML elementsHTML elements
• Styles are normally stored inStyles 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 ofLesson 1: Examples of
CSSCSS
► Example 1: http://www.csszengarden.com/Example 1: http://www.csszengarden.com/
► Example 2: http://w3schools.com/css/demo_default.htmExample 2: http://w3schools.com/css/demo_default.htm
► If you notice each time we click on a different CSS style sheet on theIf 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 dramaticallytwo pages above the look and feel of each page changes dramatically
but the content stays the same.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 document.HTML was never intended to contain tags for formatting a 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 HTMLWhen tags like <font>, and color attributes were added to the HTML
3.2 specification, it started a nightmare for web developers.3.2 specification, it started a nightmare for web developers.
Development of large web sites, where fonts and color informationDevelopment of large web sites, where fonts and color information
were added to every single page, became a long and expensivewere added to every single page, became a long and expensive
process.process.
► To solve this problem, the World Wide Web Consortium (W3C) createdTo solve this problem, the World Wide Web Consortium (W3C) created
CSS.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 itHow do you save in a Notepad document so it
becomes a web page?becomes a web page?
► What is the tag for creating paragraphs inWhat is the tag for creating paragraphs in
HTML?HTML?
► What is the tag for creating heading tags inWhat is the tag for creating heading tags in
HTML?HTML?
► What are the tags we use to format font: family,What are the tags we use to format font: family,
color,  size, alignment in HTML?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
 declarationdeclaration
 declaration blockdeclaration 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 that theDefinition: identifies the HTML elements that the
rule will be applied to, identified by the actualrule will be applied to, identified by the actual
element name, e.g. <body>, or by other meanselement name, e.g. <body>, or by other means
such assuch as classclass attribute values.attribute 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
colonscolons ::
*Pairs are separated from each other byPairs are separated from each other by semicolonssemicolons ;;Css Founder.com
DeclarationDeclaration
 Definition: Each CSS line that includes propertyDefinition: Each CSS line that includes property
and valueand value
*Each declaration consists of a property and a value.
Css Founder.com
Declaration BlockDeclaration Block
Definition: multiple declaration lines including theDefinition: multiple declaration lines including the
curly bracescurly braces
Css Founder.com
Curly BracesCurly Braces
 Definition: the curly braces contain theDefinition: the curly braces contain the
properties of the element you want toproperties of the element you want to
manipulate, and the values that you want tomanipulate, and the values that you want to
change them to. The curly braces plus theirchange them to. The curly braces plus their
content is called a declaration block.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 canInstructor Note: You can
demonstrate how to do this bydemonstrate how to do this by
using the example given on theusing the example given on the
W3schools site. Also as you areW3schools site. Also as you are
creating this file point out tocreating this file point out to
students where they will find thestudents where they will find the
different syntax found in CSS.different syntax found in CSS.
►After creating the file haveAfter creating the file have
students manipulate the color andstudents manipulate the color and
alignment values.alignment values.
Css Founder.com
Lesson 3:Lesson 3: Class and idClass and id
SelectorsSelectors In addition to setting a style for a HTML element, CSS allowsIn addition to setting a style for a HTML element, CSS allows
you to specify your own selectors called "id" and "class".you to specify your own selectors called "id" and "class".
idid -- The id selector is used to specify a style for a single, uniqueThe id selector is used to specify a style for a single, unique
element.element.
 The id selector uses the id attribute of the HTML element,The id selector uses the id attribute of the HTML element,
and is defined with a "#".and is defined with a "#".
 The style rule below will be applied to the element withThe style rule below will be applied to the element with
id="para1":id="para1":
 #para1 {text-align:center;color:red;}#para1 {text-align:center;color:red;}
Css Founder.com
Lesson 3:Lesson 3: Class and idClass and id
SelectorsSelectorsClassClass -- The class selector is used to specify a style for a groupThe class selector is used to specify a style for a group
of elements. Unlike the id selector, the class selector is mostof elements. Unlike the id selector, the class selector is most
often used on several elements.often used on several elements.
 This allows you to set a particular style for any HTMLThis 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 isThe class selector uses the HTML class attribute, and is
defined with a "."defined with a "."
 In the example below, all HTML elements with class="center"In the example below, all HTML elements with class="center"
will be center-aligned:will be center-aligned:
 .center {text-align:center;}.center {text-align:center;}
Css Founder.com
Lesson 3:Lesson 3: Class and idClass and id
SelectorsSelectors
 In the image below what is the h1 selectorIn the image below what is the h1 selector
an ID or a Class?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”
► Open NotepadOpen Notepad
► Type the following CodeType the following Code
<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 canInstructor Note: You can
demonstrate how to do this bydemonstrate how to do this by
using the example given on theusing the example given on the
W3schools site. Also as you areW3schools site. Also as you are
creating this file point out tocreating this file point out to
students where they will find thestudents where they will find the
different syntax found in CSSdifferent syntax found in CSS
►After creating the file haveAfter creating the file have
students manipulate the name ofstudents manipulate the name of
the “id”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”
► Open NotepadOpen Notepad
► Type the following CodeType the following Code
<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 canInstructor Note: You can
demonstrate how to do this bydemonstrate how to do this by
using the example given on theusing the example given on the
W3schools site. Also as you areW3schools site. Also as you are
creating this file point out tocreating this file point out to
students where they will find thestudents where they will find the
different syntax found in CSSdifferent syntax found in CSS
►After creating the file haveAfter creating the file have
students manipulate the name ofstudents manipulate the name of
the “class”the “class”
Css Founder.com
Lesson 3 CommentsLesson 3 Comments
► Comments are used to explain your code, and may help you when you editComments 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.the source code at a later date. Comments are ignored by 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 lines.Comments can span several lines, and the browser will ignore these 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 WebHow CSS is Applied to A Web
PagePage
►CSS is applied to a web page using threeCSS is applied to a web page using three
different methods:different methods:
 Inline styleInline style
 Internal style sheetInternal style sheet
 External style sheetExternal style sheet
Css Founder.com
►Inline CSSInline CSS
►Applies styles directly to the elements byApplies styles directly to the elements by
adding declarations into the styleadding 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 itparagraph and the inline style makes it
red.</p>red.</p>
Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web
PagePage
Css Founder.com
► Internal Style SheetInternal Style Sheet
► Applies styles to HTML by placing the CSS rules inside the tagApplies styles to HTML by placing the CSS rules inside the tag
<style> inside the document tag <head>.<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>
Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web
PagePage
Css Founder.com
► External CSSExternal CSS
► Applies styles as a separate file with a .css extension. The file isApplies styles as a separate file with a .css extension. The file is
then referenced from inside the <head> element by a link to thethen referenced from inside the <head> element by a link to the
file.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 editor.You can create an external style sheet in your text editor.
Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web
PagePage
Css Founder.com
► What style sheet is best?What style sheet is best?
► Web developers rarely use inline CSS. Since they preferWeb developers rarely use inline CSS. Since they prefer
to not mix content with presentation. And it is notto not mix content with presentation. And it is not
efficient since you have to declare the style individuallyefficient since you have to declare the style individually
for every component.for every component.
► Internal and External style sheets are more popularInternal and External style sheets are more popular
because you can style multiple elements with one rule.because you can style multiple elements with one rule.
► External style sheets are best because they allow you toExternal style sheets are best because they allow you to
save all the style information on a separate file from thesave all the style information on a separate file from the
content. You can then modify a style for a site and it willcontent. You can then modify a style for a site and it will
update all of the pages in a site.update all of the pages in a site.
Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web
PagePage
Css Founder.com
►CSS ColorsCSS Colors
►In the previous lesson you have seen a fewIn the previous lesson you have seen a few
CSS styles that included color like: <pCSS styles that included color like: <p
style=“color: red;”>style=“color: red;”>
►There are a few ways that you can setThere 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 CSSColors and Formatting in CSS
Css Founder.com
► CSS Colors: KeywordsCSS Colors: Keywords
► Using the keywords like: red, fuchsia, yellow,Using the keywords like: red, fuchsia, yellow,
blue, green you can specify what color you wouldblue, green you can specify what color you would
like the CSS rule to display.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 canThere are 17 of these keyword colors you can
use in CSS.use in CSS.
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting 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
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS
Css Founder.com
► Computers are capable of displaying a lot moreComputers are capable of displaying a lot more
than 17 colors.than 17 colors.
► In fact they can display approximately 16.7In fact they can display approximately 16.7
million colors!million colors!
► Hex Values (hex is short for hexadecimal) areHex Values (hex is short for hexadecimal) are
the most common way of specifying colors forthe 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*/
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS
Css Founder.com
►Hex numbersHex numbers - has 16 possible values- has 16 possible values
►0 to 9 then A to F. Which gives you 160 to 9 then A to F. Which gives you 16
values.values.
►RGB (Red Green Blue) has the possibilityRGB (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 or(R)256 x (G)256 x (B)256 = 16,777,216 or
16.7 million color values16.7 million color values
►CSS example: h1{color: #000000;}CSS example: h1{color: #000000;}
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS
Css Founder.com
► RGB (a)RGB (a) can also help specify colors in CSScan 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 orYou 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 theYou 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
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS
Css Founder.com
► RGB (a)RGB (a) can also help specify colors in CSS RGBcan also help specify colors in CSS RGB
stands for Red Green Blue. The “a” stands for alpha butstands for Red Green Blue. The “a” stands for alpha but
we will learn about that in another lesson.we will learn about that in another lesson.
► You can specify RGB in either whole numbers orYou 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 256You use numbers from 0 to 255 which covers the 256
color range.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
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS
Css Founder.com
► HSL (a)HSL (a) - Hue Saturation Lightness- Hue Saturation Lightness
► Similar to RGB but based on saturation andSimilar to RGB but based on saturation and
lightness of a colorlightness of a color
► The “a” stands for alpha but we will learn aboutThe “a” stands for alpha but we will learn about
that in another lesson.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 valueHSL accepts a number between 0 to 360 in value
► HSL also accepts percentage between 0-100%HSL also accepts percentage between 0-100%
Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS
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 canInstructor Note: You can
demonstrate how to do this bydemonstrate how to do this by
using the example given on theusing the example given on the
W3schools site. Also as you areW3schools site. Also as you are
creating this file point out tocreating this file point out to
students the different syntax foundstudents the different syntax found
in CSS.in CSS.
►After creating the file haveAfter creating the file have
students manipulate the colorstudents manipulate the color
values to discover other colorvalues to discover other color
combinations.combinations.
Css Founder.com
►Essential Questions ReviewEssential Questions Review
Css Founder.com

More Related Content

What's hot (18)

PPT
CSS Part I
Doncho Minkov
 
PDF
CSS3 - is everything we used to do wrong?
Russ Weakley
 
PPTX
Css ppt
Nidhi mishra
 
PPTX
Complete Lecture on Css presentation
Salman Memon
 
PPT
CSS
Sunil OS
 
PPTX
About Best friends - HTML, CSS and JS
Naga Harish M
 
PDF
TIBCO General Interface - CSS Guide
Rohan Chandane
 
PPT
Css lecture notes
Santhiya Grace
 
PDF
4. Web Technology CSS Basics-1
Jyoti Yadav
 
PDF
Css tutorial
Sohail Christoper
 
PPTX
CSS Basics
Nitin Bhide
 
PPT
Cascading Style Sheets (CSS) help
casestudyhelp
 
PPTX
Css Basics
Jay Patel
 
PDF
Web Typography
Shawn Calvert
 
CSS Part I
Doncho Minkov
 
CSS3 - is everything we used to do wrong?
Russ Weakley
 
Css ppt
Nidhi mishra
 
Complete Lecture on Css presentation
Salman Memon
 
CSS
Sunil OS
 
About Best friends - HTML, CSS and JS
Naga Harish M
 
TIBCO General Interface - CSS Guide
Rohan Chandane
 
Css lecture notes
Santhiya Grace
 
4. Web Technology CSS Basics-1
Jyoti Yadav
 
Css tutorial
Sohail Christoper
 
CSS Basics
Nitin Bhide
 
Cascading Style Sheets (CSS) help
casestudyhelp
 
Css Basics
Jay Patel
 
Web Typography
Shawn Calvert
 

Similar to Css Founder.com | Cssfounder org (20)

PPT
Shyam sunder Rajasthan Computer
shyamverma305
 
DOCX
CSS Tutorial For Basic Students Studying
nirmala119429
 
PPTX
uptu web technology unit 2 Css
Abhishek Kesharwani
 
PPTX
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
PDF
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
PPTX
Cascading Style Sheets for web browser.pptx
alvindalejoyosa1
 
PPT
CSS Training in Bangalore
rajkamal560066
 
PPTX
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 
PPTX
chitra
sweet chitra
 
PPTX
Web technologies-course 03.pptx
Stefan Oprea
 
PDF
Css - Tutorial
adelaticleanu
 
PPT
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
PPTX
Internet tech &amp; web prog. p4,5
Taymoor Nazmy
 
PPTX
Web Development - Lecture 5
Syed Shahzaib Sohail
 
PDF
Css tutorial
vedaste
 
PDF
The CSS Handbook
jackchenvlo
 
PPT
Learning CSS for beginners.ppt all that are but
DangyiGodSees
 
Shyam sunder Rajasthan Computer
shyamverma305
 
CSS Tutorial For Basic Students Studying
nirmala119429
 
uptu web technology unit 2 Css
Abhishek Kesharwani
 
Cascading Styling Sheets(CSS) simple design language intended to transform th...
JebaRaj26
 
Intro to HTML and CSS - Class 2 Slides
Heather Rock
 
Cascading Style Sheets for web browser.pptx
alvindalejoyosa1
 
CSS Training in Bangalore
rajkamal560066
 
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 
chitra
sweet chitra
 
Web technologies-course 03.pptx
Stefan Oprea
 
Css - Tutorial
adelaticleanu
 
Unit 2-CSS & Bootstrap.ppt
TusharTikia
 
Internet tech &amp; web prog. p4,5
Taymoor Nazmy
 
Web Development - Lecture 5
Syed Shahzaib Sohail
 
Css tutorial
vedaste
 
The CSS Handbook
jackchenvlo
 
Learning CSS for beginners.ppt all that are but
DangyiGodSees
 
Ad

More from Css Founder (20)

PPT
Cssfounder.com website designing company in delhi
Css Founder
 
PDF
Internet technology and web designing
Css Founder
 
PPT
Web page design-cssfounder
Css Founder
 
PPT
Tech dev cssfounder.com
Css Founder
 
PPT
Digital india-cssfounder.com
Css Founder
 
PPT
Poverty inindia CssFounder.com
Css Founder
 
PPT
Poverty in india Cssfounder.com
Css Founder
 
PPT
Website designing company in delhi e commerce
Css Founder
 
PPT
Website designing company_in_delhi blogging
Css Founder
 
PPT
Website designing company in delhi blog powerpoint
Css Founder
 
PPT
Website designing company_in_delhi e-business
Css Founder
 
PPTX
Website designing company_in_mumbai_digital india
Css Founder
 
PPT
Website designing company_in_delhi_digitization practices
Css Founder
 
PPT
Website designing company_in_delhi_education
Css Founder
 
PPT
Website designing company_in_delhi_education system
Css Founder
 
PPT
Website designing company_in_delhi_phpwebdevelopment
Css Founder
 
PPT
Website development process
Css Founder
 
PPT
Webdesign website development_company_surat
Css Founder
 
PPT
Internet website designing_company_in_delhi
Css Founder
 
PPT
Website designing company in delhi
Css Founder
 
Cssfounder.com website designing company in delhi
Css Founder
 
Internet technology and web designing
Css Founder
 
Web page design-cssfounder
Css Founder
 
Tech dev cssfounder.com
Css Founder
 
Digital india-cssfounder.com
Css Founder
 
Poverty inindia CssFounder.com
Css Founder
 
Poverty in india Cssfounder.com
Css Founder
 
Website designing company in delhi e commerce
Css Founder
 
Website designing company_in_delhi blogging
Css Founder
 
Website designing company in delhi blog powerpoint
Css Founder
 
Website designing company_in_delhi e-business
Css Founder
 
Website designing company_in_mumbai_digital india
Css Founder
 
Website designing company_in_delhi_digitization practices
Css Founder
 
Website designing company_in_delhi_education
Css Founder
 
Website designing company_in_delhi_education system
Css Founder
 
Website designing company_in_delhi_phpwebdevelopment
Css Founder
 
Website development process
Css Founder
 
Webdesign website development_company_surat
Css Founder
 
Internet website designing_company_in_delhi
Css Founder
 
Website designing company in delhi
Css Founder
 
Ad

Recently uploaded (20)

PDF
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
PDF
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
PDF
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
PPTX
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
PPTX
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
PDF
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
PDF
Why aren't you using FME Flow's CPU Time?
Safe Software
 
PDF
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
PDF
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
PDF
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
PDF
From Chatbot to Destroyer of Endpoints - Can ChatGPT Automate EDR Bypasses (1...
Priyanka Aash
 
PDF
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
PDF
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
PPTX
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
PPTX
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
PDF
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
PPTX
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
PPTX
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
PDF
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
PDF
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 
EIS-Webinar-Engineering-Retail-Infrastructure-06-16-2025.pdf
Earley Information Science
 
Salesforce Summer '25 Release Frenchgathering.pptx.pdf
yosra Saidani
 
Quantum AI Discoveries: Fractal Patterns Consciousness and Cyclical Universes
Saikat Basu
 
UserCon Belgium: Honey, VMware increased my bill
stijn40
 
MARTSIA: A Tool for Confidential Data Exchange via Public Blockchain - Poster...
Michele Kryston
 
ArcGIS Utility Network Migration - The Hunter Water Story
Safe Software
 
Why aren't you using FME Flow's CPU Time?
Safe Software
 
2025_06_18 - OpenMetadata Community Meeting.pdf
OpenMetadata
 
Redefining Work in the Age of AI - What to expect? How to prepare? Why it mat...
Malinda Kapuruge
 
Darley - FIRST Copenhagen Lightning Talk (2025-06-26) Epochalypse 2038 - Time...
treyka
 
From Chatbot to Destroyer of Endpoints - Can ChatGPT Automate EDR Bypasses (1...
Priyanka Aash
 
Hyderabad MuleSoft In-Person Meetup (June 21, 2025) Slides
Ravi Tamada
 
Cracking the Code - Unveiling Synergies Between Open Source Security and AI.pdf
Priyanka Aash
 
Paycifi - Programmable Trust_Breakfast_PPTXT
FinTech Belgium
 
Smarter Governance with AI: What Every Board Needs to Know
OnBoard
 
Automating the Geo-Referencing of Historic Aerial Photography in Flanders
Safe Software
 
Enabling the Digital Artisan – keynote at ICOCI 2025
Alan Dix
 
Curietech AI in action - Accelerate MuleSoft development
shyamraj55
 
“Scaling i.MX Applications Processors’ Native Edge AI with Discrete AI Accele...
Edge AI and Vision Alliance
 
“MPU+: A Transformative Solution for Next-Gen AI at the Edge,” a Presentation...
Edge AI and Vision Alliance
 

Css Founder.com | Cssfounder org

  • 1. Css Founder.com | Cssfounder OrgCss Founder.com | Cssfounder Org http://cssfounder.comhttp://cssfounder.com
  • 2. IntroductionIntroduction To CSSTo CSS by: Alexandra Vlachakisby: Alexandra Vlachakis Sandy 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 et. Al.Interact With Web Standards. Copyright 2010. Erin Anderson et. Al. W3 Schools. www.w3schools.com. 12-25-11.W3 Schools. www.w3schools.com. 12-25-11. Css Founder.com
  • 3. 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
  • 4. 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
  • 5. Lesson 1: What is CSS?Lesson 1: What is CSS? • CSSCSS stands forstands for CCascadingascading SStyletyle SSheetsheets • Styles - defineStyles - define how to displayhow to display HTML elementsHTML elements • Styles are normally stored inStyles 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
  • 6. Lesson 1: Examples ofLesson 1: Examples of CSSCSS ► Example 1: http://www.csszengarden.com/Example 1: http://www.csszengarden.com/ ► Example 2: http://w3schools.com/css/demo_default.htmExample 2: http://w3schools.com/css/demo_default.htm ► If you notice each time we click on a different CSS style sheet on theIf 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 dramaticallytwo pages above the look and feel of each page changes dramatically but the content stays the same.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 document.HTML was never intended to contain tags for formatting a 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 HTMLWhen tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers.3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color informationDevelopment of large web sites, where fonts and color information were added to every single page, became a long and expensivewere added to every single page, became a long and expensive process.process. ► To solve this problem, the World Wide Web Consortium (W3C) createdTo solve this problem, the World Wide Web Consortium (W3C) created CSS.CSS. Css Founder.com
  • 7. 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 itHow do you save in a Notepad document so it becomes a web page?becomes a web page? ► What is the tag for creating paragraphs inWhat is the tag for creating paragraphs in HTML?HTML? ► What is the tag for creating heading tags inWhat is the tag for creating heading tags in HTML?HTML? ► What are the tags we use to format font: family,What are the tags we use to format font: family, color,  size, alignment in HTML?color,  size, alignment in HTML?Css Founder.com
  • 8. 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  declarationdeclaration  declaration blockdeclaration 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
  • 9. SelectorSelector  Definition: identifies the HTML elements that theDefinition: identifies the HTML elements that the rule will be applied to, identified by the actualrule will be applied to, identified by the actual element name, e.g. <body>, or by other meanselement name, e.g. <body>, or by other means such assuch as classclass attribute values.attribute values.  Example:Example: *The selector is normally the HTML element you want to style Css Founder.com
  • 10. 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 colonscolons :: *Pairs are separated from each other byPairs are separated from each other by semicolonssemicolons ;;Css Founder.com
  • 11. DeclarationDeclaration  Definition: Each CSS line that includes propertyDefinition: Each CSS line that includes property and valueand value *Each declaration consists of a property and a value. Css Founder.com
  • 12. Declaration BlockDeclaration Block Definition: multiple declaration lines including theDefinition: multiple declaration lines including the curly bracescurly braces Css Founder.com
  • 13. Curly BracesCurly Braces  Definition: the curly braces contain theDefinition: the curly braces contain the properties of the element you want toproperties of the element you want to manipulate, and the values that you want tomanipulate, and the values that you want to change them to. The curly braces plus theirchange them to. The curly braces plus their content is called a declaration block.content is called a declaration block.  Example:Example: Css Founder.com
  • 14. 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 canInstructor Note: You can demonstrate how to do this bydemonstrate how to do this by using the example given on theusing the example given on the W3schools site. Also as you areW3schools site. Also as you are creating this file point out tocreating this file point out to students where they will find thestudents where they will find the different syntax found in CSS.different syntax found in CSS. ►After creating the file haveAfter creating the file have students manipulate the color andstudents manipulate the color and alignment values.alignment values. Css Founder.com
  • 15. Lesson 3:Lesson 3: Class and idClass and id SelectorsSelectors In addition to setting a style for a HTML element, CSS allowsIn addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".you to specify your own selectors called "id" and "class". idid -- The id selector is used to specify a style for a single, uniqueThe id selector is used to specify a style for a single, unique element.element.  The id selector uses the id attribute of the HTML element,The id selector uses the id attribute of the HTML element, and is defined with a "#".and is defined with a "#".  The style rule below will be applied to the element withThe style rule below will be applied to the element with id="para1":id="para1":  #para1 {text-align:center;color:red;}#para1 {text-align:center;color:red;} Css Founder.com
  • 16. Lesson 3:Lesson 3: Class and idClass and id SelectorsSelectorsClassClass -- The class selector is used to specify a style for a groupThe class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is mostof elements. Unlike the id selector, the class selector is most often used on several elements.often used on several elements.  This allows you to set a particular style for any HTMLThis 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 isThe class selector uses the HTML class attribute, and is defined with a "."defined with a "."  In the example below, all HTML elements with class="center"In the example below, all HTML elements with class="center" will be center-aligned:will be center-aligned:  .center {text-align:center;}.center {text-align:center;} Css Founder.com
  • 17. Lesson 3:Lesson 3: Class and idClass and id SelectorsSelectors  In the image below what is the h1 selectorIn the image below what is the h1 selector an ID or a Class?an ID or a Class? # . Css Founder.com
  • 18. Lesson 3 Assignment:Lesson 3 Assignment: Let’s Create A CSS Page that uses “id”Let’s Create A CSS Page that uses “id” ► Open NotepadOpen Notepad ► Type the following CodeType the following Code <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 canInstructor Note: You can demonstrate how to do this bydemonstrate how to do this by using the example given on theusing the example given on the W3schools site. Also as you areW3schools site. Also as you are creating this file point out tocreating this file point out to students where they will find thestudents where they will find the different syntax found in CSSdifferent syntax found in CSS ►After creating the file haveAfter creating the file have students manipulate the name ofstudents manipulate the name of the “id”the “id” Css Founder.com
  • 19. Lesson 3 Assignment:Lesson 3 Assignment: Let’s Create A CSS Page that uses “class”Let’s Create A CSS Page that uses “class” ► Open NotepadOpen Notepad ► Type the following CodeType the following Code <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 canInstructor Note: You can demonstrate how to do this bydemonstrate how to do this by using the example given on theusing the example given on the W3schools site. Also as you areW3schools site. Also as you are creating this file point out tocreating this file point out to students where they will find thestudents where they will find the different syntax found in CSSdifferent syntax found in CSS ►After creating the file haveAfter creating the file have students manipulate the name ofstudents manipulate the name of the “class”the “class” Css Founder.com
  • 20. Lesson 3 CommentsLesson 3 Comments ► Comments are used to explain your code, and may help you when you editComments 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.the source code at a later date. Comments are ignored by 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 lines.Comments can span several lines, and the browser will ignore these 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
  • 21. 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
  • 22. Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web PagePage ►CSS is applied to a web page using threeCSS is applied to a web page using three different methods:different methods:  Inline styleInline style  Internal style sheetInternal style sheet  External style sheetExternal style sheet Css Founder.com
  • 23. ►Inline CSSInline CSS ►Applies styles directly to the elements byApplies styles directly to the elements by adding declarations into the styleadding 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 itparagraph and the inline style makes it red.</p>red.</p> Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web PagePage Css Founder.com
  • 24. ► Internal Style SheetInternal Style Sheet ► Applies styles to HTML by placing the CSS rules inside the tagApplies styles to HTML by placing the CSS rules inside the tag <style> inside the document tag <head>.<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> Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web PagePage Css Founder.com
  • 25. ► External CSSExternal CSS ► Applies styles as a separate file with a .css extension. The file isApplies styles as a separate file with a .css extension. The file is then referenced from inside the <head> element by a link to thethen referenced from inside the <head> element by a link to the file.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 editor.You can create an external style sheet in your text editor. Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web PagePage Css Founder.com
  • 26. ► What style sheet is best?What style sheet is best? ► Web developers rarely use inline CSS. Since they preferWeb developers rarely use inline CSS. Since they prefer to not mix content with presentation. And it is notto not mix content with presentation. And it is not efficient since you have to declare the style individuallyefficient since you have to declare the style individually for every component.for every component. ► Internal and External style sheets are more popularInternal and External style sheets are more popular because you can style multiple elements with one rule.because you can style multiple elements with one rule. ► External style sheets are best because they allow you toExternal style sheets are best because they allow you to save all the style information on a separate file from thesave all the style information on a separate file from the content. You can then modify a style for a site and it willcontent. You can then modify a style for a site and it will update all of the pages in a site.update all of the pages in a site. Lesson 4:Lesson 4: How CSS is Applied to A WebHow CSS is Applied to A Web PagePage Css Founder.com
  • 27. ►CSS ColorsCSS Colors ►In the previous lesson you have seen a fewIn the previous lesson you have seen a few CSS styles that included color like: <pCSS styles that included color like: <p style=“color: red;”>style=“color: red;”> ►There are a few ways that you can setThere 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 CSSColors and Formatting in CSS Css Founder.com
  • 28. ► CSS Colors: KeywordsCSS Colors: Keywords ► Using the keywords like: red, fuchsia, yellow,Using the keywords like: red, fuchsia, yellow, blue, green you can specify what color you wouldblue, green you can specify what color you would like the CSS rule to display.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 canThere are 17 of these keyword colors you can use in CSS.use in CSS. Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 29. 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 Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 30. ► Computers are capable of displaying a lot moreComputers are capable of displaying a lot more than 17 colors.than 17 colors. ► In fact they can display approximately 16.7In fact they can display approximately 16.7 million colors!million colors! ► Hex Values (hex is short for hexadecimal) areHex Values (hex is short for hexadecimal) are the most common way of specifying colors forthe 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*/ Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 31. ►Hex numbersHex numbers - has 16 possible values- has 16 possible values ►0 to 9 then A to F. Which gives you 160 to 9 then A to F. Which gives you 16 values.values. ►RGB (Red Green Blue) has the possibilityRGB (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 or(R)256 x (G)256 x (B)256 = 16,777,216 or 16.7 million color values16.7 million color values ►CSS example: h1{color: #000000;}CSS example: h1{color: #000000;} Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 32. ► RGB (a)RGB (a) can also help specify colors in CSScan 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 orYou 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 theYou 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 Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 33. ► RGB (a)RGB (a) can also help specify colors in CSS RGBcan also help specify colors in CSS RGB stands for Red Green Blue. The “a” stands for alpha butstands for Red Green Blue. The “a” stands for alpha but we will learn about that in another lesson.we will learn about that in another lesson. ► You can specify RGB in either whole numbers orYou 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 256You use numbers from 0 to 255 which covers the 256 color range.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 Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 34. ► HSL (a)HSL (a) - Hue Saturation Lightness- Hue Saturation Lightness ► Similar to RGB but based on saturation andSimilar to RGB but based on saturation and lightness of a colorlightness of a color ► The “a” stands for alpha but we will learn aboutThe “a” stands for alpha but we will learn about that in another lesson.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 valueHSL accepts a number between 0 to 360 in value ► HSL also accepts percentage between 0-100%HSL also accepts percentage between 0-100% Lesson 5:Lesson 5: Colors and Formatting in CSSColors and Formatting in CSS Css Founder.com
  • 35. 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 canInstructor Note: You can demonstrate how to do this bydemonstrate how to do this by using the example given on theusing the example given on the W3schools site. Also as you areW3schools site. Also as you are creating this file point out tocreating this file point out to students the different syntax foundstudents the different syntax found in CSS.in CSS. ►After creating the file haveAfter creating the file have students manipulate the colorstudents manipulate the color values to discover other colorvalues to discover other color combinations.combinations. Css Founder.com
  • 36. ►Essential Questions ReviewEssential Questions Review Css Founder.com