logging in or signing up CSS ankush85 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 934 Category: Education License: All Rights Reserved Like it (0) Dislike it (0) Added: July 26, 2009 This Presentation is Public Favorites: 0 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript CSS & Designing for the web : CSS & Designing for the web Readings and References : Readings and References CSS Wikipedia http://en.wikipedia.org/wiki/Cascading_Style_Sheets W3 http://www.w3.org/Style/CSS/learning SACG http://depts.washington.edu/sacg/services/workshops/web/css/index.shtml Useit (Jacob Nielsen) http://www.useit.com/alertbox/9707a.html Introduction : 7/26/2009 Introduction CSS stands for “Cascading Style Sheets” consists of rules (styles) for how HTML elements should behave Styles define how to display HTML elements Styles are normally stored in Style Sheets Style sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple styles will cascade into one The cascading concept for style sheets refers to the precedence of (in increasing importance) external, internal, and inline styles. Basic CSS Syntax : 7/26/2009 Basic CSS Syntax The CSS syntax is made up of three parts: selector {property: value} Examples: Basic syntax: body {color: black} Multiple-word value: p {font-family: "sans serif"} Multiple properties: h2 {font-size: 12pt; font-style: italic; color: red} Grouping: h1,h2,h3,h4,h5,h6 { color: green } Selector = HTML element/tag Property = Attribute Value = Value Basic CSS Syntax : 7/26/2009 Basic CSS Syntax The class selector define different styles for the same type of HTML element only one class attribute can be specified per HTML element the tag name in the selector can be omitted when defining a style that will be used by all HTML elements that have a certain class Examples: p.right {text-align: right} p.center {text-align: center} <p class="right"> text </p> .center {text-align: center} <h2 class="center"> Heading2</h2> <p class="center"> text </p> Basic CSS Syntax : 7/26/2009 Basic CSS Syntax The ID selector define the same style for different types of HTML element only one of each ID in a single Web page Examples: Comments /* This is a CSS comment */ #style1{text-align: center; color: green} <p id=“style1”> centered, green </p> <h1 id=“style1”> also centered green </h1> Where does CSS go? : 7/26/2009 Where does CSS go? There are really three ways of doing it: The Master-Page-Has-All-Rules Way. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. The One-Page-Has-Its-Own-Style Way. An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag The Just-Do-It-This-One-Time Way. An inline style should be used when a style is to be applied to a single occurrence of an element External Style Sheet : 7/26/2009 External Style Sheet There are four main parts to the syntax for external style sheet: link - This HTML tag tells the browser that is linked to the current page rel="stylesheet" - This code tells the browser that what is linked is a stylesheet href="location/filename.css" - This location is where the browser will find the stylesheet type="text/css" - Because the linked style sheet has an extension of .css, this code tells the browser that what its reading is text that contains CSS rules <head> <link rel="stylesheet" href="mystylesheet.css" type="text/css"> </head> Internal Style Sheet : 7/26/2009 Internal Style Sheet To define internal styles, simply use the HTML style element in the head section To prevent an old browser from displaying the content, hide it in the HTML comment element <head> <style type="text/css"> <--hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head> Inline Style : 7/26/2009 Inline Style Define a style directly within an HTML tag The rule overrides any other rules that try to affect the element (Cascading) <body> <p style="background-color: red;">The background of this text would be red</p></body> Cascade : 7/26/2009 Cascade Multiple Styles Will Cascade Into One Cascading Order When there is more than one style specified for an HTML element, all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority: Browser default External Style Sheet Internal Style Sheet (inside the <head> tag) Inline Style (inside HTML element) You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
CSS ankush85 Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 934 Category: Education License: All Rights Reserved Like it (0) Dislike it (0) Added: July 26, 2009 This Presentation is Public Favorites: 0 Presentation Description No description available. Comments Posting comment... Premium member Presentation Transcript CSS & Designing for the web : CSS & Designing for the web Readings and References : Readings and References CSS Wikipedia http://en.wikipedia.org/wiki/Cascading_Style_Sheets W3 http://www.w3.org/Style/CSS/learning SACG http://depts.washington.edu/sacg/services/workshops/web/css/index.shtml Useit (Jacob Nielsen) http://www.useit.com/alertbox/9707a.html Introduction : 7/26/2009 Introduction CSS stands for “Cascading Style Sheets” consists of rules (styles) for how HTML elements should behave Styles define how to display HTML elements Styles are normally stored in Style Sheets Style sheets can save you a lot of work External Style Sheets are stored in CSS files Multiple styles will cascade into one The cascading concept for style sheets refers to the precedence of (in increasing importance) external, internal, and inline styles. Basic CSS Syntax : 7/26/2009 Basic CSS Syntax The CSS syntax is made up of three parts: selector {property: value} Examples: Basic syntax: body {color: black} Multiple-word value: p {font-family: "sans serif"} Multiple properties: h2 {font-size: 12pt; font-style: italic; color: red} Grouping: h1,h2,h3,h4,h5,h6 { color: green } Selector = HTML element/tag Property = Attribute Value = Value Basic CSS Syntax : 7/26/2009 Basic CSS Syntax The class selector define different styles for the same type of HTML element only one class attribute can be specified per HTML element the tag name in the selector can be omitted when defining a style that will be used by all HTML elements that have a certain class Examples: p.right {text-align: right} p.center {text-align: center} <p class="right"> text </p> .center {text-align: center} <h2 class="center"> Heading2</h2> <p class="center"> text </p> Basic CSS Syntax : 7/26/2009 Basic CSS Syntax The ID selector define the same style for different types of HTML element only one of each ID in a single Web page Examples: Comments /* This is a CSS comment */ #style1{text-align: center; color: green} <p id=“style1”> centered, green </p> <h1 id=“style1”> also centered green </h1> Where does CSS go? : 7/26/2009 Where does CSS go? There are really three ways of doing it: The Master-Page-Has-All-Rules Way. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. The One-Page-Has-Its-Own-Style Way. An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section by using the <style> tag The Just-Do-It-This-One-Time Way. An inline style should be used when a style is to be applied to a single occurrence of an element External Style Sheet : 7/26/2009 External Style Sheet There are four main parts to the syntax for external style sheet: link - This HTML tag tells the browser that is linked to the current page rel="stylesheet" - This code tells the browser that what is linked is a stylesheet href="location/filename.css" - This location is where the browser will find the stylesheet type="text/css" - Because the linked style sheet has an extension of .css, this code tells the browser that what its reading is text that contains CSS rules <head> <link rel="stylesheet" href="mystylesheet.css" type="text/css"> </head> Internal Style Sheet : 7/26/2009 Internal Style Sheet To define internal styles, simply use the HTML style element in the head section To prevent an old browser from displaying the content, hide it in the HTML comment element <head> <style type="text/css"> <--hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} --> </style> </head> Inline Style : 7/26/2009 Inline Style Define a style directly within an HTML tag The rule overrides any other rules that try to affect the element (Cascading) <body> <p style="background-color: red;">The background of this text would be red</p></body> Cascade : 7/26/2009 Cascade Multiple Styles Will Cascade Into One Cascading Order When there is more than one style specified for an HTML element, all the styles will "cascade" into a new "virtual" Style Sheet by the following rules, where number four has the highest priority: Browser default External Style Sheet Internal Style Sheet (inside the <head> tag) Inline Style (inside HTML element)