Front End Utveckling 2025 - CSS Cheatsheet

CSS Cheatsheet

CSS (Cascading Style Sheets) som beskriver hur dokument skriven i HTML eller XML ser ut.
- Separerar innehåll (HTML) från utseende (CSS)
Man väljer element, class eller id med attribute selector
- Använd alltid beskrivande class-, id namn

	selector { /* Info på vad man vill ändra */
		property: value; /* Info på vad man ska ändra */
		property2: value2;
	}

	/* Element selector */
	body {
		background-color: #123456;
		font-family: Arial, Verdana, Geneva, Helvetica; 
		font-size: 12px;
		color: #FFFFFF;
	}

	/* Klass selector ges med en punkt */
	.huvud-menu {
		padding: 30px;
	}

	/* ID selector ges med en hashtag */
	#telefon-nummer {
		width: 150px;
	}

	/* Man kan specificiera selector med flera selectors  */

	h1 .rubrik {
		font-size: 44pt;
	}

Förenkla underhåll och uppdateringar
- Inline HTML som skrivs direkt i element <div style="font-size: 12pt; color: #000000;>Text ändrat med CSS</div>". Undvik inline styling när möjligt
- Internal som placeras i head av HTML dokument med style element

	<html>
		<head>
			<style>
				#id-attribut {
					padding: 1rem;
					font-size: 44pt;
				}
			</style>
		</head>
		<body>
			<div id="id-attribut"> Lorem ipsum... </div>
		</body>
	</html>

- Man kan ha extern fil som innehåller css som hämtas med link element. Dokumentetet slutar alltid med .css <link href="/css/index.css" rel="stylesheet" />
Pseudo-classes låter dig utforma ett specifikt tillstånd


	a:link {  /* Länkar som är inte besökt */
		color: #FFFFFF;
		text-decoration: none;
	}

	a:active { /* När länker är nedtrykt */
		color: #AAD037;
	}

	a:visited { /* Länkar som är besökt */
		color: #FFFFFF;
	}

	a:hover { /* När man har muspekaren på länken */
		color: #AAD037;
		text-decoration: underline;
	}

Text formatering / styling med CSS


	p {
		font-family: Arial, sans-serif; /* Vilken typ av font / text style */
		font-size: 12px; /* Text storlek */
		color: #000000; /* Text färg */
	}

	a {
		text-decoration: none; /* Tar bort stadard style från länk */
	}

Positioner som bestäm er hur ett element är placerat i ett dokument


	/* Static (default) */
	div {
		position: static;   /* Följer normal dokumentflöde */
	}

	/* Relative */
	div {
		position: relative; /* Kan justeras från normal position */
		display: block;
		float: left;
	}

	/* Absolute */
	div {
		position: absolute; /* Positioneras mot närmaste ancestor */
	}

	/* Fixed */
	div {
		position: fixed;    /* Fast position i viewport */
	}

Synlighet kan bestämmas med visibility eller display

	/* Alternativ 1: Visibility */
	.element {
		visibility: hidden;    /* Tar upp plats men osynlig */
		visibility: visible;   /* Synlig */
	}

	/* Alternativ 2: Display */
	.element {
		display: none;        /* Tar ingen plats, osynlig */
		display: block;       /* Synlig, tar plats */
	}

Z-index bestämmer vilken ordning synns på skärmen

	/* Default */
	z-index: auto;

	/* Värde */
	z-index: 0;
	z-index: 3;
	z-index: 289;
	z-index: -1;