Embed Size (px)
Citation preview
selector {property1 : value; property2 : value;
}
Generic structure
h1{color : red; font-size : 18px;
}
A Simple CSS Rule
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
<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>
...
<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>
...
h1, p {color:red;
}
*{text-align:right;
}
<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;}
<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;
}
–Margin, border and padding can be specified for particular sides of elements. – E.g. div { padding-top : 10px; }
