Differences

This shows you the differences between two versions of the page.

Link to this comparison view

webbutv_01 [2018-09-21 08:58]
Joakim Forsgren 		webbutv_01 [2022-07-18 13:20]
Line 1: Line 1:
-====== 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. 
-  - En sida som blir så lik denna bild som möjligt, kalla denna fil för css1.html {{::css1_html5.png?100|}} 
-  - 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 
-<code html> 
-<!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> 
- 
-</code> 
- 
-Tips för att [[http://lmgtfy.com/?q=css+change+first+letter&l=1| ändra första bokstaven via CSS]] 
- 
-<php> 
-/* Min CSS för att få bilden att se ut som den gör */ 
- 
-/* 
-* { 
- margin: 0; 
- padding: 0; 
-} 
- 
-html { 
- background-color: #f5f5f5; 
- color: #000; 
-} 
- 
-body { 
- font-family: Verdana, sans-serif; 
- font-size: 12px; 
- background-color: #ffffff; 
- border: 1px solid #000000; 
- width: 700px; 
- margin: auto; 
- margin-top: 20px; 
-} 
- 
-header { 
- height: 65px; 
- border-bottom: 1px solid black; 
- background-color: #ccc; 
-} 
- 
-header h1 { 
- width: 300px; 
- margin: auto; 
- text-align: center; 
- margin-bottom: 7px; 
-} 
- 
-nav ul { 
- list-style-type: none; 
-} 
- 
-nav ul li { 
- float: left; 
- background-color: #eee; 
- border-width: 1px; 
- border-style: solid; 
- border-color: #333; 
- margin-left: 10px; 
- margin-right: 10px; 
- width: 118px; 
-} 
- 
-nav a { 
- padding: 4px; 
- display: block; 
- font-size: 12px; 
- font-weight: bold; 
- text-decoration: none; 
- text-align: center; 
- color: #990000; 
-} 
- 
-nav a:hover { 
- color: #ee0000; 
- font-weight: bold; 
- background-color: #fff; 
-} 
- 
-p { 
- margin: 0px; 
- padding-bottom: 20px; 
-} 
- 
-p:first-letter { 
- color: #ff0000; 
- font-size: 20px; 
-} 
- 
-section { 
- margin: 10px; 
- padding: 10px; 
- clear: both; 
-} 
- 
-footer { 
- text-align: center; 
- font-size: 10px; 
- font-style: italic; 
- color: #999; 
- background-color: #ccc; 
- padding: 5px; 
- border-top: 1px solid #000000; 
-} 
- 
-*/ 
- 
-</php>