body {
margin:20px 30px 40px 25px;
background-color:#FFFF99;
}
body,td,th {
font-family:Comic Sans MS;
color:indianred;
font-size:16px;
}
h1 {
text-align:center;
}
p {
text-align:justify;
letter-spacing:5px;
border:2px solid white;
}
.lista {
list-style-type:decimal-leading-zero;
}
#listaelem {
list-style-type:katakana;
}
#bekezdes {
color:white;
background-color:#000;
border:1px solid white;
}
#bekezdes:hover {
color:#000000;
background-color:white;
border:1px solid black;
cursor:pointer;
}
a {
text-decoration:none;
color:orange;
}
a:hover {
text-decoration:none;
letter-spacing:5px;
color:lime;
}
a:active {
text-decoration:none;
color:black;
}
a:visited {
text-decoration:none;
color:#CCC;
}
.bekezdes1 ul li{
list-style-type:none;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML formázása CSS-el</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Főcim</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat condimentum eros, a semper orci gravida ut. In pretium fermentum nunc vel malesuada. Nam ac enim est, eget suscipit purus. Maecenas tempus nunc sit amet tortor rutrum id fermentum massa laoreet. Nunc laoreet, ipsum eu lobortis varius, dolor nisl pharetra est, in suscipit mauris orci a eros. Aenean metus arcu, consectetur et interdum id, pharetra tincidunt neque. Nulla sapien libero, dictum sed hendrerit id, aliquam non nibh. Morbi massa turpis, aliquam sit amet tempus non, imperdiet et est. Vestibulum scelerisque sapien sit amet arcu accumsan eu dapibus elit vehicula. Suspendisse sagittis consequat tincidunt. Nulla facilisi.
</p>
<ul class="lista">
<li>Első</li>
<li id="listaelem">Második</li>
<li>Harmadik</li>
</ul>
<ul class="lista">
<li>Első</li>
<li>Második</li>
<li>Harmadik</li>
</ul>
<p id="bekezdes">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consequat condimentum eros, a semper orci gravida ut. In pretium fermentum nunc vel malesuada. Nam ac enim est, eget suscipit purus. Maecenas tempus nunc sit amet tortor rutrum id fermentum massa laoreet. Nunc laoreet,
ipsum eu lobortis varius, dolor nisl pharetra est, in suscipit mauris orci a eros. Aenean metus arcu, consectetur et interdum id, pharetra tincidunt neque. Nulla sapien libero, dictum sed hendrerit id, aliquam non nibh. Morbi massa turpis, aliquam sit amet tempus non, imperdiet et est. Vestibulum scelerisque sapien sit amet arcu accumsan eu dapibus elit vehicula. Suspendisse sagittis consequat tincidunt. Nulla facilisi.
</p>
<div class="bekezdes1">
<ul>
<li>Első</li>
<li>Második</li>
<li>Harmadik</li>
</ul>
</div>
<a href="http://www.google.hu" title="Google" target="_blank">Google</a>
</body>
</html>
Ha többet szeretnél tudni erről, nézd meg ajánlott HTML CSS3 tanfolyamunkat!
