This is an old revision of the document!


Styla en sida med enbart CSS

Syfte: lära sig att styla en sida med enbart CSS.

Ni skall utan att röra HTML koden nedan göra följande uppgifter.

  1. En sida som blir så lik denna bild som möjligt, kalla denna fil för css1.html
  2. En sida efter egen smak, samma markup men en annan CSS (css2.css), kalla denna sida för css2.html. Ni måste naturligtvis få ändra raden där ni hämtar in CSS:en

HTML-kod

<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css1.css">
<title>Lorem ipsum</title>
</head>
<body>
	<header>
             <h1>Lorem ipsum dolor</h1>
	     <nav>
		<ul>
			<li><a href="#" class="selected">Suspendisse</a></li>
			<li><a href="#">Suspendisse</a></li>
			<li><a href="#">Curabitur</a></li>
			<li><a href="#">Nullam</a></li>
			<li><a href="#">Aliquam</a></li>
		</ul>
	     </nav>
	</header>
	<section>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
			aliquet, leo quis consectetur pulvinar, est diam fermentum ligula,
			eget viverra est felis vel dolor. Vivamus suscipit dui at risus
			molestie at interdum metus pharetra. Suspendisse pulvinar, lacus
			lacinia laoreet blandit, neque tortor molestie augue, et iaculis elit
			est sed risus. Suspendisse dui orci, placerat sit amet porttitor
			suscipit, aliquet eget massa. Integer id turpis nec libero fermentum
			tristique eu eget neque. Aenean et turpis justo. Suspendisse mi
			magna, aliquam et tristique eu, ultrices quis tellus. Vivamus mattis,
			nunc at accumsan gravida, ligula neque rutrum ligula, a porta felis
			nibh nec augue. Sed non libero mauris, a pharetra leo. Nullam ac mi
			eu eros porttitor scelerisque ut eu augue. Suspendisse ut aliquet
			orci. Quisque ac eros sem.</p>
		<p>Fusce vestibulum malesuada aliquet. Donec consequat, mauris ut
			fermentum dictum, leo orci viverra massa, sed vehicula nunc lorem sit
			amet eros. Proin tincidunt porttitor nulla, at sodales nisi consequat
			ac. Quisque mi turpis, vehicula ut ullamcorper ac, imperdiet vel
			odio. Curabitur sit amet magna nulla. Proin consequat tincidunt urna
			et ultricies. Sed id dolor nulla, a vehicula ipsum. Integer interdum
			tortor vel neque hendrerit ut pulvinar elit facilisis. Aliquam erat
			volutpat. Mauris nibh lorem, porttitor quis volutpat vel, tincidunt
			nec massa. Fusce sit amet justo imperdiet eros eleifend vehicula id
			feugiat mauris. Pellentesque congue gravida mi at placerat. Mauris
			eleifend semper sem, eu lobortis velit congue eget. Nulla facilisi.
			Donec ornare interdum porta. Duis mauris elit, vehicula a convallis
			nec, faucibus sit amet nulla.</p>
		<p>In dolor purus, ullamcorper at tristique id, mollis nec purus.
			Donec massa elit, luctus quis accumsan vel, ullamcorper quis arcu.
			Suspendisse metus sapien, aliquam a blandit non, viverra ut enim.
			Suspendisse dignissim risus vitae diam vehicula convallis. Cras quis
			mauris vitae lacus dictum convallis. Maecenas mattis sem in tellus
			pellentesque a rhoncus lectus venenatis. Duis ipsum metus, auctor sit
			amet aliquet vehicula, euismod consequat purus. Nunc in facilisis
			arcu. Aliquam erat volutpat. Pellentesque purus odio, mollis et
			aliquet quis, pharetra in purus. Integer placerat mattis tellus, sed
			vehicula dolor lobortis sed.</p>
		<p>Nullam ut felis eros. Phasellus in metus leo, vel fringilla purus.
			Phasellus faucibus sagittis ullamcorper. Etiam at dolor sem. Maecenas
			sit amet risus non mauris consequat sollicitudin. Etiam tincidunt
			suscipit venenatis. Nunc eget arcu sapien. Sed facilisis odio eu leo
			ultrices in laoreet mauris interdum. Donec eu purus a elit
			sollicitudin consequat. Vivamus egestas libero sit amet risus feugiat
			vitae mollis ante malesuada.</p>
	</section>
	 <footer>
	 	&copy; Mauris Interdum
	</footer>
</body>
</html>

Tips för att ändra första bokstaven via CSS