Based on w3 schools

DHTML, CSS
UNIT II

INT355 – Internet and Web Technology
DHTML


Dynamic HTML – Dynamically rendering
content of an HTML code
DHTML

CSS

CLIENT
SIDE
SCRIPTING

DOM
Cascading Style Sheets (CSS)






Rules or styles for organizing the layout of an
HTML document including its color, t...
CSS


Advantages:
 Saves

time
 Pages load faster
 Easy maintenance
 Superior styles to HTML


Disadvantages
 Brows...
CSS



Two parts: „property’ and ‘value’.
Syntax
 selector



{property1: value1; property2: value2}

Comments
 Begin...
CSS Example




p {color:red;text-align:center;}
(or)
p{
 color:red;
 text-align:center



}
Adding styles to a page
1.
2.

3.

4.

Embedding style sheet within head tags
Link to an external style sheet from HTML
do...
Embedding Styles (Internal Style
Sheet)



<head>
<style type=“text/css”>
 hr

{color:sienna;}
p {margin-left:20px;}
bo...
External Style sheet





<head>
<link
rel="stylesheet"
type="text/css"
href="mystyle.css">
</head>



mystyle.css
 h...
In-line styles


<p style="color:sienna;margin-left:20px;">This
is a paragraph.</p>
An inline style loses many of the adv...
Importing stylesheets





To use the @import rule, type:
<style type="text/css">
@import url("import1.css");
@import u...
Upcoming SlideShare
Loading in …5
×

CSS

517 views

Published on

CSS based on W3Schools

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
517
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS

  1. 1. Based on w3 schools DHTML, CSS UNIT II INT355 – Internet and Web Technology
  2. 2. DHTML  Dynamic HTML – Dynamically rendering content of an HTML code DHTML CSS CLIENT SIDE SCRIPTING DOM
  3. 3. Cascading Style Sheets (CSS)    Rules or styles for organizing the layout of an HTML document including its color, typefaces, margins links and other formatting elements. Controlling the style of a web document Separating the visual design elements from structure
  4. 4. CSS  Advantages:  Saves time  Pages load faster  Easy maintenance  Superior styles to HTML  Disadvantages  Browser compatibility
  5. 5. CSS   Two parts: „property’ and ‘value’. Syntax  selector  {property1: value1; property2: value2} Comments  Begins with /*  Ends with */
  6. 6. CSS Example    p {color:red;text-align:center;} (or) p{  color:red;  text-align:center  }
  7. 7. Adding styles to a page 1. 2. 3. 4. Embedding style sheet within head tags Link to an external style sheet from HTML document Import an external style sheet into the document In-line style added in middle of document
  8. 8. Embedding Styles (Internal Style Sheet)   <head> <style type=“text/css”>  hr {color:sienna;} p {margin-left:20px;} body {backgroundimage:url("images/back40.gif");}  </style> An internal style sheet should be used when a single document has a unique style.
  9. 9. External Style sheet    <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>  mystyle.css  hr {color:sienna;}  p {margin-left:20px;}  body {backgroundimage:url("images/b ack40.gif"); An external style sheet is ideal when the style is applied to many pages.
  10. 10. In-line styles  <p style="color:sienna;margin-left:20px;">This is a paragraph.</p> An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!
  11. 11. Importing stylesheets    To use the @import rule, type: <style type="text/css"> @import url("import1.css"); @import url "import2.css"; </style> @import rules must always be first in a document Finally, you can also import a style sheet for just a specific media:   <style type="text/css"> @import url("import4.css") tv, print; </style> This acts the same as if you had defined the media type in the <style> tag.

×