Topic 03 : Introduction to CSS

429 views
362 views

Published on

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

  • Be the first to like this

No Downloads
Views
Total views
429
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
54
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Topic 03 : Introduction to CSS

  1. 1. Generic structure selector { property1 : value; property2 : value; } A Simple CSS Rule h1{ color : red; font-size : 18px; }
  2. 2. h1{ color : red; font-size : 18px; } Save in a file named style.css <link href="style.css" rel="stylesheet" type="text/css"/> <link/> element that links to style.css
  3. 3. <style type="text/css"> h1 { color : green; font-size : 18px; } </style> </head> <body> <h1>Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p>
  4. 4. ... <h1 style="color:blue; font-size:5px;">Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> ...
  5. 5. h1, p { color:red; } *{ } text-align:right;
  6. 6. <body> <h1>Welcome to <em>Cascading Style Sheets</em></h1> <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> </body> body{ color:blue; } h1{ color:red; }
  7. 7. <body> <h1>Welcome to <em>Cascading Style Sheets</em></h1> p em{ color:red; } <p>The purpose of this page is to demonstrate how <em>CSS</em> works.</p> </body>
  8. 8. –Margin, border and padding can be specified for particular sides of elements. – E.g. div { padding-top : 10px; }

×