ICT Role in 21st Century Education & its Challenges.pptx
html
1. CSS is a style sheet language used to describe the
presentation semantics (the look and formatting) of a
document written in a markup language. Its most
common application is to style web pages written in
HTML and XHTML, but the language can also be applied
to any kind of XML document, including SVG and XUL.
6. CSS Units
Relative Length (
px (pixels,
px, 4px
em (emphasize,
font body
font body px
h1{fon-size:1.5em} h1 px =
15px
h2{fon-size:1.4em} h2 px =
14px
em px
ex (x-height, x") ex, 2ex
7. CSS Units
Absolute Length (
in (inches; 1in=2.54cm =72pt =6pc) in, 1.5in
cm (centimeters; 1cm=10mm) cm, 1.11cm
mm (millimeters) mm, 0.8mm
pt (points; 1pt=1/72in, 10pt px)
pt, 20pt
pc (picas; 1pc=12pt) pc, 2pc
8. selector { property : value }
Selector
HTML Tags
Class Name
Property
Property Name
value
Value) Property
9. Selector
Selector
HTML Tags
Class Name
Example
[HTML Tags:Style] H2{ background-color : #191970 }
[HTML Tags:Style] P{ text-indent: 3em }
[Class Name:Style] .note { font-size : small }
[Class Name:Style] .normal{ color : blue }
[Class Name:Style] .special{ color : red }
10. Property
Property
Property Selector Property
Example
P { text-indent: 3em }
H2{ background-color : #191970;
color : red }
11. Value
Value
Property
property
Example
P{ font-family: "sans serif" }
H1{font-family: Verdana,"sans serif”; color : red}
12. Groups Selector
Example
H1,H2,H3,H4,H5,H6 { color: green }
H1,H2,H6 { color: red }
body,H1,H2,H6 { color: red }
Body.opt1,H1 { color: red }
13. Class Selector
Example (CSS Style)
<p>
p.right { text-align: right }
p.center { text-align: center}
In HTML Files
<p class="right">This paragraph will be right-
aligned.</p>
<p class="center">This paragraph will be center-
aligned.</p>
14. Class Selector : Non Tags
Example (CSS Style)
.center { text-align: center }
In HTML Files
<h1 class="center">This heading will be center-
aligned</h1>
<p class="center">This paragraph will also be center-
aligned.</p>
15. ID Selector
ID Selector
ID Selector
Class Selector Style
Example
#wer345{ text-align: center; color: green}
h1#wer345{ text-align: center; color : red }
In HTML Files
<h1 id="wer345">Heading</h1>
<p id="wer345">Some text</p>
16. Comment
Example
p { text-align: center; /* This is a comment */ }
19. Style: Style Sheet
Style
Inline Style(In line HTML Tags)
Internal Style Sheet(In HTML head Tags)
External Style Sheet(NameStyleSheet.css)
20. Inline Style
Example
<H2 style= “background-color: blue; color: white”>
Heading 2 </H2>
<P style= “font-size: 20pt”> This text has the <EM>
font-size </EM> style applied to it. </P>
<P style= “font-size: 20pt; color: #ff0000”>font-size 20
pt and red color. </P>
22. Internal Style
Example
<html><head>…</head><body>
<H1 class = "special"> MAN and MEN</H1>
<P> The exalted origin of the word
<EM>MAN </EM> is clear int the plural form,
<EM> men </EM>, from <B>mental </B>. It is inspiring to note
that man was so named because he was
<EM> the one that thinks </EM>.</P>
<H1> The Thinker </H1>
<P class = "special"> If you have ever seen a copy – the original is in
Paris – of the famous sculpture by Auguste Rodin called
<EM> The Thinker </EM>, you would agree that the essential
nature of man stems from his ability to think.</P>
</body></html>
39. Formatting Hypertext Links
4 types of hyperlinks can be modified:
A:visited {styles for previously visited links}
A:link {styles for links that have never
visited}
A:active {styles for links that are currently
being clicked}
A:hover {styles when the mouse cursor is
hovering over the link}