Introduction Introduction To CSS To CSS
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?
History of CSSHistory of CSS
► CSS was proposed in 1994 as a web styling language.
► 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.
What is CSS?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.
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?
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
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
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 ;;
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.
Declaration BlockDeclaration Block
Definition: multiple declaration lines Definition: multiple declaration lines including the curly bracesincluding the curly braces
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:
Eg For Simple CSS PageEg For Simple CSS Page
<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>
How CSS is Applied to A Web PageHow CSS is Applied to A Web Page
►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
► 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>
How CSS is Applied to A Web PageHow CSS is Applied to A Web Page
► 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>
How CSS is Applied to A Web PageHow CSS is Applied to A Web Page
► 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.
How CSS is Applied to A Web PageHow CSS is Applied to A Web Page
► 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.
How CSS is Applied to A Web PageHow CSS is Applied to A Web Page
►CSS ColorsCSS Colors► In the previous you have seen a few In the previous you have seen a few
CSS styles that included color like: <p CSS styles that included color like: <p style=“color: red;”> 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)
Colors and Formatting in CSSColors and Formatting in CSS
► 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.
Colors and Formatting in CSSColors and Formatting in CSS
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
Colors and Formatting in CSSColors and Formatting in CSS
► 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*/
Colors and Formatting in CSSColors and Formatting in CSS
►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;}
Colors and Formatting in CSSColors and Formatting in CSS