23
Introduction Introduction To CSS To CSS

Cascaded styling sheets Intro

Embed Size (px)

Citation preview

Introduction Introduction To CSSTo 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

Thank You !Thank You !