ISYS 350 Cascading Style Sheets Cascading Style Sheets CSS is a mechanism for adding style eg fonts colors spacing to Web documents A style sheet consists of a list of style rules Each rule or ruleset consists of one or more selectors and a declaration block ID: 727128
Download Presentation The PPT/PDF document "Cascade Style Sheet Demo" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Cascade Style Sheet Demo
ISYS
350Slide2
Cascading Style Sheets
Cascading Style Sheets (CSS) is a mechanism for adding style (e.g., fonts, colors, spacing) to Web documents.
A style sheet consists of a list of style rules. Each rule or rule-set consists of one or more selectors, and a declaration block.Slide3
CSS Rule Syntax
A CSS rule has two main parts: a selector, and one or more declarations:Slide4
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly
brackets
.
Example:
p
{
color:red
;
text-align:center
;
} Slide5
CSS MIME Type
Multipurpose Internet Mail Extensions (MIME) is an Internet standard of content type system.
CSS MIME type:
text/
css
Example: referencing a CSS file using the <link> element inside the head section
<link
rel
="
stylesheet
" type="text/
css
"
href
="main.css" />Slide6
Three Ways to Insert CSS
External
style sheet
Internal
style sheet
Inline
styleSlide7
External Style Sheet
An external style sheet can be written in any text editor.
It should
be saved with a .
css
extension.
An
external style sheet is ideal when the style is applied to many pages.
Each
page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head>
<link
rel
="
stylesheet
" type="text/
css
"
href
="mystyle.css">
</head>Slide8
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head>
<style>
hr
{
color:sienna
;}
p {margin-left:20px;}
body {
background-image:url
("images/back40.gif");}
</style>
</head>
Note: Do
not add a space between the property value and the unit (such as margin-left:20
px
). The correct way is: margin-left:20pxSlide9
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly
!
To use inline styles you use the style attribute in the relevant tag
.
Example:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>Slide10
HTML Element as Selector
Apply to all elements of a specific type:
H1 { color: blue; }
p {
color:red;text-align:center
;}Slide11
Example
<head>
<title></title>
<meta http-
equiv
="Content-Type" content="text/html; charset=UTF-8">
<link
rel
="
stylesheet
" type="text/
css
"
href
="mystyle.css">
</head>
<body>
<div>
<h1> This is h1 text</h1><
br
>
<h3> This is h3 text</h3><
br
>
<h6> This is h6 text</h6><
br> <h1> This is h1 text again</h1><br> <h3> This is h3 text again</h3><br> <h6> This is h6 text again</h6><br> <br> <p> This is the P tag data</p> </div> </body>
H1 { color: blue; }
H3 {
color:green
;}
H6 {
color:red
;}
p {
color:red;text-align:center
;}Slide12
ID as a selector
The id selector
is
used to specify a style for a single, unique
element identified by the
id attribute of the HTML
element.
The selector is with
a preceding '#':
Example:
A HTML element :
<div id
=“
mycontent
">
The style rule is:
#
mycontent
{
width: 450px;
margin
: 0 auto;
padding
: 15px;
background: white; border: 2px solid navy; }Slide13
Class As Selector
The class selector is used to specify a style for a group of elements. The class selector uses the HTML class
attribute to
set a particular style for many HTML elements with the same class.
The class selector
is
defined with a "."Slide14
Examples of Class Selector
Example 1: All
HTML elements with class="center" will be center-aligned:
HTML: <h1 class="center">Center-aligned heading</h1>
Style: with a preceding “.”
.center{
text-align:center
;
}
Example 2: In the example below, all p elements with class="center" will be center-aligned:
p.center
{
text-align:center
;}
Example
3
: Only
ul
elements will use the “
nav
” class.
HTML: <
ul
class="
nav
">Style: ul.nav { list-style-type: none; margin-left: 0; padding-left: 0; }Slide15
Example
<body>
<div id="
mycontent
">
<h1> This is h1 text</h1><
br
>
<h3 class="center"> This is h3 text</h3><
br
>
<h6> This is h6 text</h6><
br
>
<h1> This is h1 text again</h1><
br
>
<h3 class="center"> This is h3 text again</h3><
br
>
<h6> This is h6 text again</h6><
br
>
<
br
>
<p> This is the P tag data</p> <p class="left">This is the 2nd P tag data</p> </div> </body>.center{ text-align:center; }p.left{text-align:left;}Slide16
Pseudo Class
Selector
:
pseudo-classes
are used to add special effects to some selectors. For example, change color when mouse is over the element, a:hover {color:#FF00FF;}
table:hover
{
color:red
;}
td:hover
{
color:blue
;}
p:hover{color:blue;}
See list of pseudo-
classess
such as link, visited, focus, etc
.
: http://www.w3schools.com/css/css_pseudo_classes.aspSlide17
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout
.
The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.Slide18
box modelSlide19
Explanation of the different
parts of a box
Margin
- Clears an area around the border. The margin does not have a background color, it is completely transparent
Border
- A border that goes around the padding and content. The border is affected by the background color of the box
Padding
- Clears an area around the content. The padding is affected by the background color of the box
Content
- The content of the box, where text and images appearSlide20
Example
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
The total width of the element in the example
is
300px:
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300pxSlide21
Example: Define a box for a P tag:
p{
color:red;text-align:center
;
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}Slide22
Example: Page ViewSlide23
HTML Code
<body>
<div id=“
mycontent
">
<h1>Product Discount Calculator</h1>
<form action="
display_discount.php
" method="post">
<div id=“
mydata
">
<label>Product Description:</label>
<input type="text" name="
product_description
"/><
br
/>
<label>List Price:</label>
<input type="text" name="
list_price
"/><
br
/>
<label>Discount Percent:</label>
<input type="text" name="
discount_percent"/>%<br /> </div> <div id="buttons"> <label> </label> <input type="submit" value="Calculate Discount" /><br /> </div> </form> </div></body>Slide24
body {
font-family: Arial, Helvetica, sans-serif;
margin: 10px;
padding: 0;
}
#
mycontent
{
width: 450px;
margin: 0 auto;
padding: 15px;
background: white;
border: 2px solid navy;
}
h1 {
color: navy;
}
label {
width: 10em;
padding-right: 1em;
float: left;
}
#
mydata
input {
float: left;
width: 15em; margin-bottom: .5em;}#buttons input { float: left; margin-bottom: .5em;}br { clear: left;}Slide25
CSS Font-Size:
em
vs.
px
vs.
pt vs. percent
http://kyleschaeffer.com/user-experience/css-font-size-em-vs-px-vs-pt-vs
/
An
em
is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc
.
Generally, 1em = 12pt = 16px = 100%Slide26
HTML Element
Object Properties:
http://www.w3schools.com/jsref/dom_obj_all.asp
className
property
s
tyle property
Assuming we have
two classes:
.
evenColor
{
color:red
;}
.
oddColor
{
color:black
;}
Example of
a
ssigning
className
value dynamically using code.
var
row = table.insertRow(rowCount); if(count % 2 == 0){ row.className
= "
evenColor
"; }
else
{
row.className
= "
oddColor
";
}
Example of
a
ssigning style property using code:
var
boxFV
=
document.getElementById
('FV');
fv
=
myPV
*
Math.pow
(1+myRate,myYear);
if
(
fv
>1000
)
boxFV.style.backgroundColor
= "red";
else
boxFV.style.backgroundColor
= "green";Slide27
Loan Affordability AnalysisSlide28
HTML Code
<body>
<div>
<p>Loan Affordability Analysis</p>
<form name="
pmtForm
">
<p>Enter Loan: <input type="text" id="Loan" name="Loan" value="" /><
br
><
br
>
<p>Enter Rate: <input type="text" id="Rate" name="Rate" value="" /><
br
><
br
>
<p>Enter Term: <input type="text" id="Term" name="Term" value="" /><
br
><
br
>
<p>Enter Affordable payment: <input type="text" id="Afford" name="Afford" value="" /><
br
><
br
> <p>Payment is: <input type="text" id="Pmt" name="Pmt" value="" /><br><br> <input type="button" value="Compute Payment" name="btnCompute" onclick="computePmt()" /> </form>
</div>
</body>Slide29
computePmt()
<script>
function
computePmt
(){
Loan=
parseFloat
(
document.getElementById
("Loan").value);
Rate=
parseFloat
(
document.getElementById
("Rate").value);
Term=
parseFloat
(
document.getElementById("Term").value); Afford=
parseFloat
(
document.getElementById
("Afford").value);
Pmt
=(Loan*Rate/12)/(1-Math.pow(1+Rate/12,-12*Term));
var boxPmt=document.getElementById("Pmt"); if (Pmt>Afford) boxPmt.style.backgroundColor="red"; else boxPmt.style.backgroundColor="green"; boxPmt.value=Pmt.toFixed(2); }
</script>Slide30
CSS File
div {
width: 450px;
margin: 0 auto;
padding: 15px;
background: aqua;
border: 2px solid navy;
}
p {
font-weight:bold
;}Slide31Slide32
<head>
<title></title>
<meta http-
equiv
="Content-Type" content="text/html; charset=UTF-8">
<link
rel
="
stylesheet
" type="text/
css
"
href
="rowcss.css" />
<script> function
showTable
(){
value=
eval(document.depForm.pValue.value);
life=
eval
(
document.depForm.pLife.value
);
depreciation = value / life;
var
table = document.getElementById('depTable'); var totalDepreciation=0;for(var i = table.rows.length - 1; i > 0; i--){ table.deleteRow(
i
);
}
for (count = 1; count <= life; count++)
{
var
rowCount
=
table.rows.length
;
var
row =
table.insertRow
(
rowCount
);
if(count % 2 == 0){
row.className
= "
evenColor
";
}else{
row.className
= "
oddColor
";
}
var
cell0 =
row.insertCell
(0);
cell0.innerHTML=count;
var
cell1 =
row.insertCell
(1);
cell1.innerHTML="$" +
value.toFixed
(2);
var
cell2 =
row.insertCell
(2);
cell2.innerHTML="$" +
depreciation.toFixed
(2);
totalDepreciation
+= depreciation;
var
cell3 =
row.insertCell
(3);
cell3.innerHTML="$" +
totalDepreciation.toFixed
(2);
value -= depreciation;
}
}
</script>
</head>Slide33
Body Section
<body>
<div id="content"> <p>Straight Line Depreciation Table<p><
br
><
br
>
<form name="
depForm
">
Enter Property Value: <input type="text" name="
pValue
" value="" /><
br
><
br
>
Enter Property Life_: <input type="text" name="
pLife
" value="" /><
br
>
<
br
>
<input type="button" value="Show Table" name="btnShowTable" onclick="showTable()" /> </form><br> <table id="depTable" border="1" width="400" cellspacing="1"> <thead> <tr> <
th
>Year</
th
>
<
th
>Value at
BeginYr
</
th
>
<
th
>
Dep
During
Yr
</
th
>
<
th
>Total to
EndOfYr
</
th
>
</
tr
>
</
thead
>
<
tbody
>
</
tbody
>
</table>
</div>
</body>Slide34
CSS File
#content {
width: 650px;
margin: 0 auto;
padding: 15px;
background: aqua;
border: 2px solid navy;
}
table:hover
{
color:blue
;}
td:hover
{
color:blue
;}
table
{
border:1px solid green;
margin: 0 auto;
}
.
evenColor
{
color:red
;}.oddColor {color:black;}p { font-size: 200; font-weight: bold; text-align: center; text-decoration: underline;}Slide35
Tutorials
W3C:
http://www.w3.org/TR/REC-CSS1/#css1-properties
W3Schools.com:
http://www.w3schools.com/css/default.asp