56 lines
1.4 KiB
HTML
56 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<link rel="stylesheet" href="external.css" />
|
|
</head>
|
|
<body>
|
|
<h1>My First CSS Example</h1>
|
|
<p>This is a paragraph.</p>
|
|
|
|
<h1 class="center">Red and center-aligned heading</h1>
|
|
<p class="center">Red and center-aligned paragraph.</p>
|
|
|
|
<p id="para1">Hello World!</p>
|
|
<p>This paragraph is not affected by the style.</p>
|
|
|
|
<ol>
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Coca Cola</li>
|
|
</ol>
|
|
|
|
<ul>
|
|
<li>Coffee</li>
|
|
<li>Tea</li>
|
|
<li>Coca Cola</li>
|
|
</ul>
|
|
|
|
<h1 style="color: blue; text-align: center">This is a heading</h1>
|
|
<p style="color: red">This is a paragraph.</p>
|
|
|
|
|
|
<div id="margin_example">This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
|
|
|
|
<div id="padding_example">This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>
|
|
|
|
|
|
<!--centering items from here on-->
|
|
<ol id="center_table">
|
|
<li>Table</li>
|
|
<li>Chair</li>
|
|
<li>Bed</li>
|
|
</ol>
|
|
|
|
|
|
<!--Flex box horizontal-->
|
|
|
|
<div class="center_horizontal_flex_box">
|
|
|
|
<h1 style="color: blue;">This is a heading</h1>
|
|
<h1 style="color: blue; "">This is a heading</h1>
|
|
<h1 style="color: blue; ">This is a heading</h1>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|