Download - CSS
![Page 1: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/1.jpg)
CSS
Cascading Style Sheets
![Page 2: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/2.jpg)
Objectives
• Using Inline Styles
• Working with Selectors
• Using Embedded Styles
• Using an External Style Sheet
• Applying a Style to a Web Site
• Understanding Cascading Order
![Page 3: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/3.jpg)
http://www.w3schools.com/css/
Great tutorial – Go look
![Page 4: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/4.jpg)
Style Sheets
• In HTML, want the content of the documents clearly separated from the document's presentation layout.
• Styles sheets define how HTML elements are to be displayed
![Page 5: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/5.jpg)
Cascading Style Sheets (CSS)• Like HTML, style sheets must use a
common language and follow common rules. This language is known as Cascading Style Sheets, CSS.
• CSS has been developed by the WWW Consortium (www.w3c.org organization that develops standards for HTML).
• CSS is designed to augment (not replace) HTML.
![Page 6: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/6.jpg)
Styles
• Styles can be specified
– inside a single HTML element (Inline)
– inside the <head> element of an HTML page (Internal)
– or in an external CSS file. (External)
![Page 7: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/7.jpg)
Inline Style (in body)
• An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly. Inline styles are easy to use and interpret because they are applied directly to the elements they affect.
![Page 8: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/8.jpg)
Inline Style
• To use an inline style you use the style attribute in the relevant tag. The style attribute can contain any CSS property.
<element style=“property1:
value1; property2:value2; …>
![Page 9: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/9.jpg)
Inline Style
• Enclose the properties and values in quotes.
• Separate properties with a semicolon.
<p style="color: red; margin-left: 20px "> paragraph </p>
![Page 10: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/10.jpg)
Inline Style<body>
<h3 style=“font-family:Arial, font-style:italic; color:green”>
This is H3, Arial, italic and green
</h3>
<h3>This is simply H3</h3>
</body>
This is H3, Arial, italic and green
This is simply H3
![Page 11: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/11.jpg)
Syntax
• The CSS syntax for internal and external styles is made up of three parts:
selector {property: value}
• The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property takes a value.
![Page 12: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/12.jpg)
Syntax
• The property and value are separated by a colon and surrounded by curly braces: body {color: black}
• If the value is multiple words, put quotes around the value.
• Separate properties with a semi-colon.
p {font-family: “sans serif”; color: red}
![Page 13: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/13.jpg)
Background
• Background colors can be applied to almost any element in a Web page not just the page itself.
H1 {background-color: rgb(204,102,255)}
This is an H1 header with a purple background
![Page 14: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/14.jpg)
Background
• background-image : url(file.jpg)
• examples\css\style-background.html
• http://www.w3schools.com/css/css_background.asp
![Page 15: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/15.jpg)
Comment
• /* This is a CSS comment. */
• Same as JavaScript multi-line comment.
![Page 16: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/16.jpg)
Grouping
• Separate selectors with a comma:
• h1,h2,h3,h4,h5,h6 { color: green }
• All header elements will be green.
![Page 17: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/17.jpg)
TopStyle
• Software that generates correct syntax.
• It’s on the machines in the lab.
• It can be downloaded for free.
• Go see it.
![Page 18: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/18.jpg)
Internal (Embedded) Style Sheet
• Applies to a single document (HTML file)• Internal styles are embedded in the head
section : <head>
<style type="text/css"> hr {color: sienna} p {margin-left: 20px}
</style> </head>
![Page 19: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/19.jpg)
Internal (Embedded, Global) Style Sheet
<head><style> h3 {font-family:Arial; font-style:italic; color:green}</style>
</head><body><h3>This is H3, Arial, italic and green</h3><h3>And so is this H3</h3></body> This is H3, Arial, italic and green
And so is this
![Page 20: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/20.jpg)
External Style Sheet
• An external style sheet is a text file that contains style declarations
• It can be linked to any page in the site, allowing the same style declaration to be applied to the entire site
• An external style sheet can be written in any text editor. The file should not contain any html tags. It should be saved with a .css extension.
![Page 21: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/21.jpg)
External Style Sheet
• Example:hr {color: sienna} p {margin-left: 20px}
• Notes: – No spaces between the property value and
the units: 20px– This is the entire file. Within a style sheet, you
don’t need <style> tags, just the style declarations.
![Page 22: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/22.jpg)
External Style Sheet
• An external style sheet can control the appearance of many web pages.
• Each page must link to the style sheet using the <link> tag inside the head section: <head>
<link rel="stylesheet" type="text/css" href=“site_style.css" /> </head>
• See style_sheets.html
![Page 23: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/23.jpg)
External Style Sheets
• External style sheets enable you to change the appearance and layout of all the pages in your site by editing just one single CSS document.
• They give a consistent look to the entire site.
• Multiple external style sheets may be referenced inside a single HTML document.
![Page 24: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/24.jpg)
External style sheet
● Create a text file containing the style declarations.– File should have extension “.css” such as: mystyle.css
● Link, or import that file to the HTML file using special tags in the header.
<link href=“URL” rel=“stylesheet” type=“text/css”>
<style>@import
url(“mystyle.css”)</style>
mystyle.css @import or multiple
LINK tags allow you to use more than one style sheet in the same document
OR
![Page 25: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/25.jpg)
Cascading Order
• If a property has been set for the same selector in different style sheets, the value will be inherited from the more specific (innermost) style sheet.
• (next slide)
![Page 26: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/26.jpg)
Cascading Order
• We say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
1. Browser default
2. External style sheet (.css file)
3. Internal style sheet (inside the <head>)
4. Inline style (inside an HTML element)
![Page 27: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/27.jpg)
Style Inheritance• If a style is not specified for an
element, it inherits the style of its parent element; This is called style inheritance.
![Page 28: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/28.jpg)
CSS
• http://www.w3schools.com/css/css_border.asp
• http://www.w3schools.com/css/css_text.asp
• http://www.w3schools.com/css/css_text.asp
![Page 29: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/29.jpg)
The id Selector
• The style rule below will match any element that has an id attribute with a value of "green":
#green {color: green}
<h1 id="green">Some text</h1>
![Page 30: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/30.jpg)
The id Selector
• The style rule below will match any p element that has an id attribute with a value of "green":
p#green {color: green}
![Page 31: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/31.jpg)
The class Selector
• HTML and XHTML require each id be unique– therefore an id value can only be used once in a document
• You can mark a group of elements with a common identifier using the class attribute
<element class=“class”> … </element>
![Page 32: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/32.jpg)
The class Selector
• Omit the tag name in the selector to define a style that will be used by all elements that have that class:
.center {text-align: center}
• Both h1 and p have class="center".
<h1 class="center"> center-aligned </h1>
<p class="center"> also center-aligned. </p>
![Page 33: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/33.jpg)
The class selector
● Define a class (in the header) by – giving it a name preceded by a period– adding the standard style definitions inside {}
<style type=“txt/css”>.bright {font-weight:bold; color:red}
</style>
● Apply the class to any HTML tag
<strong class=“bright”> text </strong><h1 class=“bright”> text </h1>
![Page 34: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/34.jpg)
The class Selector
• With the class selector you can define different styles for the same type of HTML element:
p.right {text-align: right}
p.center {text-align: center}
![Page 35: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/35.jpg)
The class Selector
• Use the class attribute in your HTML document:
<p class="right"> This paragraph will be right-aligned. </p>
<p class="center"> This paragraph will be center-aligned. </p>
![Page 36: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/36.jpg)
Hyperlink pseudo-class
• a: link {style for never visited links}• a: visited {style for visited links}• a: active {style for link that is currently being
clicked}• a: hover {style when the mouse cursor is
hovering over the link} – rollover effect.
• examples/css/link_rollover.html
a:hover {color=red; text-transform:uppercase;
font-weight=bold}
![Page 37: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/37.jpg)
The <div> tag• The <div> tag defines a division/section
in a document.• <div> is an HTML tag (not CSS)• It does not format content• Browsers usually place a line break
before and after the div element
![Page 38: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/38.jpg)
The <div> tag• It is like a generic block level tag• Use the <div> tag to group block
elements. • You can assign a CLASS (or ID or
STYLE or ONCLICK or ONMOUSEOVER etc).
![Page 39: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/39.jpg)
<div>
This is some text
<div style="color:#FF0000;">
<h4>This is a header in a div section</h4>
<p>This is a paragraph in a div section</p>
</div>
This is some text This is a header in a div section
This is a paragraph in a div section
![Page 40: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/40.jpg)
The <span> tag
• The <span> tag is used to mark (or group) inline elements like letters, words or phrases.
![Page 41: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/41.jpg)
The <span> tag
<p> text1 <span style="color:#0000FF;"> text2</span> text3
</p>
<p><span style="color:#00DD45;">4</span>
</p>
output????
![Page 42: CSS](https://reader035.vdocument.in/reader035/viewer/2022070419/56815c35550346895dca1c35/html5/thumbnails/42.jpg)
The <span> tag
<p> text1 <span style="color:#0000FF;"> text2</span> text3</p>
<p style="color:#00DD45;">4</p>
styles.html
text1 text2 text34