cascading style sheets cs3505. what are css? method for adding style attributes consistently to hml...
TRANSCRIPT
Cascading Style SheetsCS3505
What are CSS?
• Method for adding style attributes consistently to HML tags
• Cascading because styles are applied in order of priority- local, author style sheet, user style sheet, user browser
• New tag <Style> </Style>• Ref: Deitel chapter 6 , Greenlaw 9.8• http://www.htmlhelp.com/reference/css/quick-
tutorial.html
CSS Types
• Inline
• Imbedded
• External
• User
<html>
<head>
<Style> global definition for tags in this document</Style>
<link >
<head>
<body>
<tag style = local definition> applies here</>
…</body></html>
<Style> global definition for tags in this document</Style>
Inline Styles
• Html tag’s can have style attributes• Format<tag style = “property: value;…property: value”>
style applies here </tag>• Example:<p style = "font-size: 20pt; color: #0000ff"> This text has the
<em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p>
• Inline Page Example
Embedded Style Sheets
• Requires style rules in <head> to add styles to html tags appearing in <body>
• Format:<style type=“text/css”>
tag {property: value;…property: value} …tag tag {property: value;…property: value}.classname {property: value;…property: value}#IdName {property: value;…property: value}
</style>
Definition in <head> application in <body>
<head><style type=“text/css”>
tag {property: value;…property: value} …
tag1 tag2 {property: value;…property: value}
.classname {property: value;…property: value}
</style><head>
<body>
<tag> tag style applies here </>
<tag1> nested <tag2> applies here</tag2> doesn’t</tag1>
<tag3 class= classname> class definition applies here</tag3>
</body>
Embedded Style Sheets Example• Example<style type = "text/css">
a.nodec { text-decoration: none }
a:hover { text-decoration: underline;
color: red;
background-color: #ccffcc }
.special { color: green}
li em { color: red;
font-weight: bold }
ul { margin-left: 75px }
ul ul { text-decoration: underline;
margin-left: 15px }
</style>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>Milk</li>
<li>Bread
<ul>
<li class =“special”>White bread</li>
<li>Rye bread</li>
<li>Whole wheat bread</li>
</ul>
</li>
<li>Rice</li>
<li>Potatoes</li>
<li>Pizza <em>with mushrooms</em></li>
</ul>
<p>
<a href = "http://www.food.com">Go to the Grocery store</a>
</p>
Style Rules Comments
• a.nodec defines a class applied to <a> tags only
• a:hover syntax for styles applied to hover pseudo-class
• .special defines a class • li em applies rule to nested tag
occurrences (see Monday vs with mushrooms)
• Li,em comma applies rule to both tags
Pseudo Classes and Elements
• Anchor Pseudo-classes– a:link {color:#ff0000}<!—Unvisited-->
– a:visited {color:#00ff00}<!—visited link-->
– a:hover {color:#0000ff}<!—mouse over link-->
– a:active {color:#00ffff}<!—selected link-->
• Pseudo Elements– p:first-letter {font-size: 24pt}
– p:first-line {color: #00ffff}
<Div> and <Span>
*often used in Front page to organize HTML
•Span is an inline element like <B> or <em>
•Format
…<span class = class-name> applies here</span>•Div is a block element and applies to a region of html which may contain <h1> and <p> tags
•Format
…<div class = class-name>
…applies to HTML blocks and paragraphs here
</div>
<Div> and <Span> ID divisions •Identify a specific DIV or SPAN segment by using the ID mechanism (see more_embedded.html)
• Define #IDname { Attributes}
•Use …<span ID = IDname> applies here</span>•Example#svp94O { color: red; font-weight: bold}…<div class = class-name>
<h4 ID=svp94O> Text using ID to identify this Red bold H4 line </h4>
Text using ID to identify this Red bold H4 line
External style sheets
• Define rules in one file and link them into one or many files
• Maintains a consistent style over complex webs that are easy to maintain and reuse.
• Example of external reference:<head> <link rel = "stylesheet" type = "text/css" href = "styles.txt" />
</head>
• Style definition file Html file
User Style Sheet
• Define styles you want the browser to use locally
• Tell your browser to use a local style sheet click tools->internet options->accessibility
enter user style sheet path name
• Allows a local user to define colors, fonts, and sizes more easily readable
Style Properties
• How to find a list of properties which can be modified and the values associated with them
• Defining document – Cascading Style Sheets, level 1 W3C Recommendation 17 Dec 1996
– http://www.w3.org/TR/REC-CSS1
– Table of contents has a good list
– A Good site for properties definitions http://www.htmlhelp.com/reference/css/properties.html
Sample Properties List4 Formatting model4.1 Block-level elements4.1.1 Vertical formatting4.1.2 Horizontal formatting4.1.3 List-item elements4.1.4 Floating elements4.2 Inline elements4.3 Replaced elements4.4 The height of lines4.5 The canvas4.6 'BR' elements5 CSS1 properties5.1 Notation for property values5.2 Font properties5.2.1 Font matching5.2.2 'font-family'5.2.3 'font-style'5.2.4 'font-variant'5.2.5 'font-weight'5.2.6 'font-size'5.2.7 'font'5.3 Color and background properties5.3.1 'color'5.3.2 'background-color'5.3.3 'background-image'5.3.4 'background-repeat'5.3.5 'background-attachment'5.3.6 'background-position'5.3.7 'background'
5.4 Text properties5.4.1 'word-spacing'5.4.2 'letter-spacing'5.4.3 'text-decoration'5.4.4 'vertical-align'5.4.5 'text-transform'5.4.6 'text-align'5.4.7 'text-indent'5.4.8 'line-height'5.5 Box properties5.5.1 'margin-top'5.5.2 'margin-right'5.5.3 'margin-bottom'5.5.4 'margin-left'5.5.5 'margin'5.5.6 'padding-top'5.5.7 'padding-right'5.5.8 'padding-bottom'5.5.9 'padding-left'5.5.10 'padding'5.5.11 'border-top-width'5.5.12 'border-right-width'5.5.13 'border-bottom-width'
5.5.14 'border-left-width'5.5.15 'border-width'5.5.16 'border-color'5.5.17 'border-style'5.5.18 'border-top'5.5.19 'border-right'5.5.20 'border-bottom'5.5.21 'border-left'5.5.22 'border'5.5.23 'width'5.5.24 'height'5.5.25 'float'5.5.26 'clear'5.6 Classification properties5.6.1 'display'5.6.2 'white-space'5.6.3 'list-style-type'5.6.4 'list-style-image'5.6.5 'list-style-position'5.6.6 'list-style'