Topic 03 : Introduction to CSS
-
Upload
pradip-kharbuja -
Category
Education
-
view
246 -
download
1
Transcript of Topic 03 : Introduction to CSS
![Page 1: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/1.jpg)
![Page 2: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/2.jpg)
![Page 3: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/3.jpg)
![Page 4: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/4.jpg)
selector {property1 : value; property2 : value;
}
Generic structure
h1{color : red; font-size : 18px;
}
A Simple CSS Rule
![Page 5: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/5.jpg)
![Page 6: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/6.jpg)
h1{color : red; font-size : 18px;
}
<link href="style.css" rel="stylesheet" type="text/css"/>
Save in a file named style.css
<link/> element that links to style.css
![Page 7: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/7.jpg)
<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>
![Page 8: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/8.jpg)
...
<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>
...
![Page 9: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/9.jpg)
![Page 10: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/10.jpg)
![Page 11: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/11.jpg)
h1, p {color:red;
}
*{text-align:right;
}
![Page 12: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/12.jpg)
<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;}
![Page 13: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/13.jpg)
<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>
p em{color:red;
}
![Page 14: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/14.jpg)
![Page 15: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/15.jpg)
![Page 16: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/16.jpg)
![Page 17: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/17.jpg)
![Page 18: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/18.jpg)
![Page 19: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/19.jpg)
![Page 20: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/20.jpg)
![Page 21: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/21.jpg)
![Page 22: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/22.jpg)
![Page 23: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/23.jpg)
![Page 24: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/24.jpg)
![Page 25: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/25.jpg)
![Page 26: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/26.jpg)
![Page 27: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/27.jpg)
![Page 28: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/28.jpg)
![Page 29: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/29.jpg)
![Page 30: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/30.jpg)
![Page 31: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/31.jpg)
![Page 32: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/32.jpg)
![Page 33: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/33.jpg)
![Page 34: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/34.jpg)
–Margin, border and padding can be specified for particular sides of elements. – E.g. div { padding-top : 10px; }
![Page 35: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/35.jpg)
![Page 36: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/36.jpg)
![Page 37: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/37.jpg)
![Page 38: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/38.jpg)
![Page 39: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/39.jpg)
![Page 40: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/40.jpg)
![Page 41: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/41.jpg)
![Page 42: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/42.jpg)
![Page 43: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/43.jpg)
![Page 44: Topic 03 : Introduction to CSS](https://reader033.fdocuments.in/reader033/viewer/2022052618/55498e7cb4c90583678b536e/html5/thumbnails/44.jpg)