CSS 2012. 9 Youn-Hee Han [email protected]

CSS2012. 9

Youn-Hee [email protected]://link.koreatech.ac.kr

[email protected]

1. What is [email protected]*

[email protected]

Why Styles?Styles Solve a Common ProblemHTML were originally designed to define the content of a document. HTML Tags were supposed to say "This is a header", "This is a paragraph", "This is a table", This is a hyperlink, and This is a link by using tags like , , , , and so on. In HTML, the representational elements should be not used (X) (X) (X) (X)[email protected]*

[email protected]

Why Styles?Styles Solve a Common ProblemHTML became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout.As the two major browsers - Netscape and Internet Explorer - continued to add new (representational) HTML tags and attributes (like the tag and the color attribute) to the original HTML specificationIt became more and more difficult to create clean Web sites where the content of HTML documents was clearly separated from the document's presentation [email protected]*

[email protected]

Why Styles?Styles Solve a Common ProblemTo solve this problem, the World Wide Web Consortium (W3C) created Cascading Style Sheets in addition to HTML 4.0.All major browsers support Cascading Style Sheets.

Demohttp://www.w3schools.com/css/[email protected]*

[email protected]

What is Styles?StylesStyles are rules that modify the presentation of tags in your document.Styles define how to display HTML elements, just like the font tag and the color attributeStyles are normally stored in Style SheetsExternal Style Sheets can save you a lot of work External style sheets enable you to change the appearance and layout of all the pages in your Web, just by editing one single CSS documentExternal Style Sheets are stored in CSS files (.css)CSS is a breakthrough in Web design because it allows developers to control the style and layout of multiple Web pages all at once

[email protected]*

[email protected]

Visit CSS Demonstrationhttp://zencss-skin.considero.net/ZenCSS-Skin/(_______)/Fixed-Simple.aspxRedVioletGrayDeep-Blue

CSS Zen Garden The goal of the site is to showcase what is possible with CSS-based designhttp://www.csszengarden.com/http://www.mezzoblue.com/zengarden/alldesigns/

[Practice-1] Visit CSS Demo [email protected]*

[email protected]

What is Cascading?CSS (Cascading Style Sheets)Multiple style definitions will cascade into one Cascading orderWhat style will be used when there is more than one style specified for an HTML element?All the styles will "cascade" into a new style sheet by the following rules, where number 4 has the highest priority: 1. Browser default 2. External style sheet 3. Internal style sheet (inside the tag) 4. Inline style (inside an HTML element) So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value). [email protected]*

[email protected]

Specifying a CSS

@import url(standardstyles.css); h1, h2 { font: arial,sans-serif; }

...this block is red.

[External Style Sheet][Imported Style Sheet][Internal Style Sheet][Inline Style]How to Specify [email protected]*

[email protected]

2. Basic CSS [email protected]*

[email protected]

CSS SyntaxBasic Syntax

The selector is normally the HTML element/tagThe property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colonbody {color: black}p {font-family: "sans serif"}If you wish to specify more than one property, you must separate each property with a semicolon.p {text-align:center; color:red}Make the style definitions more readable!!!

selector { property: value; property: value; . . .}[email protected]*p { text-align: center; color: black; font-family: arial }

[email protected]

CSS SyntaxClass SelectorYou can declare a class and apply this class to all elements of which share the same styleGeneral Rule

Without tag namep.right {text-align: right} p.center {text-align: center}p.green {color:green} This paragraph will be right-aligned. This paragraph will be center-aligned. This is a paragraph. .center {text-align: center} This heading will be center-aligned This paragraph will also be center-aligned. [email protected]*

[email protected]

CSS SyntaxPseudo-Class SelectorA:link A:visited A:hover A:active Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!Note: a:active MUST come after a:hover in the CSS definition in order to be [email protected]*

[email protected]

[Practice-2] Pseudo-Class Selector Pseudo-Class Selector Example

a:link { text-decoration:underline; color:blue }a:visited { text-decoration:underline; color:red }a:hover { text-decoration:underline; color:cyan }a:active { text-decoration:underline; color:yellow }

a.no-uline:link { text-decoration:none; color:green }a.no-uline:visited { text-decoration:none; color:green }a.no-uline:hover { text-decoration:underline; color:cyan }a.no-uline:active { text-decoration:none; color:yellow }

Google Google

[email protected]*

[email protected]

CSS SyntaxGrouping

Selectors can be contextualh1,h2,h3,h4,h5,h6 { color: pink}

h2 { font-style: italic; color:cyan} h2 i { font-style: normal }

This paragraph has ItalicsThis heading has Italics too

This paragraph is in h1 tag This paragraph is in h2 tag This paragraph is in h3 tag [email protected]*

[email protected]

CSS SyntaxSelectors can be contextual ( )

onetwo

OneTwo

OneTwo

div li.nav {font-size:2.1em;}div li {font-size:2.1em;}[email protected]*

[email protected]

CSS Syntaxid selectorWith the id selector you identify an element to be an *unique instance* in a document.

#blue {color: green}p#para1 { text-align: center; color: red}p#exampleID1 { background-color: yellow; }p#exampleID2 { text-transform: uppercase; } Good MorningHelloThis paragraph has an ID name of "exampleID1" and has a white CSS defined backgroundThis paragraph has an ID name of "exampleID2" and has had its text transformed to uppercase letters. [email protected]*

[email protected]

CSS SyntaxComments/* This is a comment */p { text-align: center; /* This is another comment */ font-family: arial}[email protected]*

[email protected]

Multiple Style SheetsThe same selector in different style sheetsIf some properties have been set for the same selector in different style sheets, the values will beoverridden by the same selector of the following () style sheet if the values has been already definedinherited from the same selector of the proceeding () style sheet if the values has not defined before

h3 { color: yellow; text-align: right; font-size: 20pt; text-decoration:underline}a.css ()h3 { color: green; text-align: left; font-size: 30pt;}

b.css ()[email protected]*

[email protected]

Multiple Style SheetsThe same selector in different style sheets

h3 { color: green; text-align: right; font-size: 30pt; }

This is Tom

[email protected]*

[email protected]

CSS InheritanceCSS inheritance also works contextually

.foo { background-color: yellow; color: green; } .bar { text-decoration: underline; }

Hello, world. This is a very short paragraph!

[email protected]*

[email protected]

CSS InheritanceCSS inheritance also works contextually example3.html

.foo { background-color: yellow; color: green; } .bar { text-decoration: underline; }

Hello, world. This is a very short paragraph!

example2.html ., bar [email protected]*

[email protected]

CSS InheritanceUtilizing OOP (Object Oriented Programming)s Inheritance concept.oddBoxOut { width: 12em; float: left; padding: 0.5em; margin: 0.5em; border: solid 1px black;}

.evenBoxOut { width: 12em; float: right; padding: 0.5em; margin: 0.5em; border: solid 1px black;}.boxOut { width: 12em; padding: 0.5em; margin: 0.5em; border: solid 1px black;}

.oddBoxOut { float: left;}

.evenBoxOut { float: right;}

[email protected]*

[email protected]

class vs. [email protected]*

[email protected]

CSS & [email protected]*

[email protected]

CSS [email protected]*

[email protected]

CSS em : 1 ex : x 1 px : (pixel) %: in : inches, 1in = 2.54cmcm : centimetersmm : millimeterspt : points, 1pt = 1/72 inpc : picas, 1pc = 12ptxx-small, x-small, small (12px), medium, large, x-large, xx-large 12 pt == 16 px == 1em == 100%- http://pxtoem.com: px em [email protected]*

[email protected]

font [email protected]*

[email protected]

CSS file

[Practice-3] Putting all togetherp.right {text-align: right} p.center {text-align: center}p.green {color:green}

.center {text-align: center}

#blue {color: blue}p#para1 { text-align: center; color: red}p#exampleID1 { background-color: yellow; }p#exampleID2 { text-transform: uppercase; }

h1,h2,h3,h4,h5,h6 { color: pink}

h2 { font-style: italic; color:cyan}h2 i { font-style: normal }htdocs\[email protected]*

[email protected]

HTML file (1/2)

[Pra