Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Topic 03 : Introduction to CSS

624 views

Published on

Published in: Education
  • Be the first to comment

  • Be the first to like this

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; }

×