W3Schoolscom http wwww3schoolscomcssdefaultasp ISYS 350 Cascading Style Sheets Cascading Style Sheets CSS is a mechanism for adding style eg fonts colors spacing to Web documents ID: 734331
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 DemoW3Schools.com:http://www.w3schools.com/css/default.asp
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 SyntaxA 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
Typical Properties of Stylebackground-colorbackground-color:lightgrey"
Color
color:red
f
ont
font-family:courier
Font-size
font-size:300
%
t
ext-align
text-align:centerSlide6
Three Ways to Apply Style RulesExternal style sheetInternal style sheet
Inline
styleSlide7
External Style SheetAn 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.
A web
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
External Style sheet Example: mystyle.css/*
Author
: David
*/
H1 { color: blue; }
H3 {
color:green
;}
H6 {
color:red
;}
p {
color:red;text-align:center
;}
body {
background-color:aqua
;}Slide9
CSS MIME TypeMultipurpose 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" />Slide10
Internal Style SheetAn 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:20pxSlide11
Inline StylesTo use inline styles you use the style attribute in the
HTML
tag
.
Example:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>Slide12
Creating an External Stylesheet File1. Right-Click Web Pages Folder, then select New/ Cascade Style Sheet2. Define rules
3. Add a reference to the style sheet file
H1 { color: blue; }
H3 {
color:green
;}
H6 {
color:red
;}
p {
color:red;text-align:center
;}
body {
background-color:aqua
;}Slide13
External Stylesheet Examplehead> <title>TODO supply a title</title> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>Slide14
Example: Internal stylesheet
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<
style>
H1 { color: blue; }
H3 {
color:green
;}
H6 {
color:red
;}
p {
color:red;text-align:center
;}
body {
background-color:aqua
;}
</style>
</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>Slide15
Three Types of SelectorHTML tag as SelectorID as a
selector
Class As SelectorSlide16
HTML Tag as Selector
Apply to all
tags
of a specific type:
H1 { color: blue; }
p {
color:red;text-align:center
;}Slide17
ID as a selectorThe 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;
}Slide18
Class As SelectorThe class selector is used to specify a style for a group of elements (which may be different HTML elements).
The class selector uses the HTML class
attribute to
set a particular style for many
different HTML
elements with the same class.
The class selector
is
defined with a "."Slide19
Examples of Class SelectorExample:
All
HTML elements with class="center" will be center-aligned:
HTML:
<
h1 class="center">Center-aligned heading</h1
>
<p class="center"> This is the first P tag data</p>
Style: with a preceding “.”
.center{
text-align:center
;
}Slide20
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 class="center"> This is h6 text again</h6><
br
>
<
br
>
<p class="center"> This is the first P tag data</p>
<p> This is the 2nd P tag data</p>
<p class="right">This is the 3rd P tag data</p>
</div> </body>
<style>
.center{
text-align:center
;
}
.
right
{
text-align:right
;
}
</style>Slide21
Assign Style Dynamically Using CodeUsing HTML tag’s className Property
http://
www.w3schools.com/jsref/prop_html_classname.asp
Using HTML tag’s
style
propertySlide22
Example of assigning className value dynamically using code
Assuming we have
two classes:
.
evenColor
{
color:red
;}
.
oddColor
{
color:black
;}
/* Declare a variable representing an HTML element */
var
row =
table.insertRow
(
rowCount
);
if(count
% 2 == 0
)
{
row.className
= "
evenColor
"; }
e
lse
{
row.className
= "
oddColor
";
}Slide23
Example of assigning style property using code:Slide24
Loan Affordability AnalysisSlide25
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>Slide26
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>Slide27
CSS Filediv { width: 450px; margin: 0 auto;
padding: 15px;
background: aqua;
border: 2px solid navy;
}
p {
font-weight:bold
;}Slide28
The CSS Box ModelAll 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.Slide29
box modelSlide30
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 appearSlide31
Examplewidth: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)
= 300pxSlide32
Example: Define a box for a P tag:p{color:red
;
text-align:center
;
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
}Slide33
Positioninghttp://
www.w3schools.com/css/css_positioning.asp
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first.
Fixed: An
fixed element will
not move even if the window is scrolled
Relative:
absolute
#
mycontent
{
position
: absolute
;
left:100px;
top:100px
;
width: 450px;
margin: 0 auto;
padding: 15px;
background: white;
border: 2px solid navy;
}Slide34
Without Positioning
<style>
#div1 {
width: 100px;
margin: 0 auto;
padding: 15px;
background: blue;
border: 2px solid navy;
}
#div2 {
width: 100px;
margin: 0 auto;
padding: 15px;
background: red;
border: 2px solid navy;
}
</style>
</head>
<body>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
</body>Slide35
With positioning
<style>
#div1 {
position: absolute;left:100px;top:100px;
width: 100px;
margin: 0 auto;
padding: 15px;
background: blue;
border: 2px solid navy;
}
#div2 {
position: absolute;left:200px;top:100px;
width: 100px;
margin: 0 auto;
padding: 15px;
background: red;
border: 2px solid navy;
}
</style>
</head>
<body>
<div id="div1">This is div 1</div>
<div id="div2">This is div 2</div>
</body>
Note: Change the div2 left to 234.Slide36
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%