<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet style Färger: RGB och HEX Textjustering Textformatering Google Fonts CSS Selektorer Klasser och ID-regler Formatera länkar Google Icons Font Awesome
Frontend-teknologier HTML Struktur CSS Utseende JavaScript Beteende
Vad är CSS? CSS står för Cascading Style Sheets CSS är ett språk som används för att få bättre kontroll över utseendet på webbsidor. CSS används tillsammans med HTML för att definiera hur innehållet ska presenteras!
CSS Nivåer (Levels) CSS level 1: 1996 CSS level 2.1: 2011 CSS level 3 Media Queries: 2012 CSS level 3 Selectors: 2018 Tips: https://www.w3.org/standards/techs/css https://en.wikipedia.org/wiki/cascading_style_sheets
Varför CSS? CSS CSS är en samling regler som styr utseendet på en eller flera webbsidor. Med CSS får vi bättre kontroll över sidlayout, teckensnitt, färger och mycket mer! Man får renare HTML-dokument som är lättare att felsöka och är mer tillgängliga/sökmotorvänliga! HTML HTML HTML
Två olika lager HTML Struktur T.ex. Rubriker, listor, tabeller m.m. CSS Utseende T.ex. textformatering, färger kantlinjer, marginaler m.m. Kom ihåg! I HTML koncentrerar du dig på att strukturera innehållet (semantik). I CSS arbetar du med att presentera innehållet (utseendet).
SoC = Separation of concerns På svenska ungefär att hålla isär saker och ting. Rekommendationen när det gäller webbutveckling är att hålla isär HTML och CSS.
Några exempel www.csszengarden.com CSS Zen Garden är en välkänd webbplats vars syfte är att visa upp vad man kan åstadkomma med CSS. Webbplatsen skapades av Dave Shea 2001 och målet är att inspirera och uppmuntra användandet av webbstandarder med vackra exempel.
HTML Struktur CSS baserad design CSS Utseende
CSS-Regler Syntax https://www.w3schools.com/css/css_syntax.asp
Skapa en CSS-Regel Selektor h1 { color: red; Värde Egenskap
Koppla HTML och CSS Metod 1: Extern CSS (separat CSS-fil) Skriv CSS-reglerna i en separat CSS-fil (t.ex. style.css) Länka till CSS-filen med hjälp av en taggen <link> index.html <head> <title>extern CSS</title> <link href="style.css" rel="stylesheet"> </head> <body> <h1>rubrik</h1> </body style.css h1{ color: red;
Koppla HTML och CSS Metod 2: Intern CSS (i head) Skriv CSS-reglerna i dokumenthuvudet i taggen <style> <head> </head> <body> <title>css</title> <style> h1{ </style> color: red; <h1>rubrik</h1> </body>
Koppla HTML och CSS Metod 3: Inline CSS (inne i HTML-taggar) Inline CSS innebär att man skriver CSS-egenskaper inne i en HTML-tagg med hjälp av attributet style. <p style="color:blue;"> Blå text och lite annat smått och gott. </p> OBS! Grundtanken är att separera innehåll från utseende därför bör man använda denna teknik i undantagsfall!
CSS Colors Bildkälla: http://www.htmlandcssbook.com/
CSS Färger Exempel /* color name */ h1 { color: DarkCyan; /* rgb value */ p { color: rgb(100, 100, 90); /* hex code */ h2 { color: #ee3e80;
Bakgrundsfärger h1 { background-color: darkcyan; color: white;
Tips: https://flatuicolors.com
Textjustering h1 { h2 { p { text-align: center; text-align: right; text-align: justify;
Arbeta med teckensnitt Källa: https://www.w3schools.com/css/css_font.asp
Teckensnitt Exempel body { font-family: Arial, sans-serif; h1 { font-family: Palatino, serif; Tips https://www.w3schools.com/cssref/css_websafe_fonts.asp
Teckenstorlek Bildkälla: http://www.htmlandcssbook.com/
Teckenstorlek Exempel body { h1 { h2 { font-size: 16px; font-size: 200%; font-size: 1.5em;
Övning Skapa ett HTML-dokument som innehåller en huvudrubrik (h1), en underrubrik (h2) och 3 stycken (p). Formatera dokumentet enligt nedan: H1: Georgia, 3em, #485460 H2: Times, 2em, #808e9b P: Tahoma, 1.1em, #1e272e
Text-transform h1 { text-transform: uppercase; h2 { text-transform: capitalize; h3 { text-transform: lowercase;
Radavstånd p{ line-height: 2em;
Fet och kursiv <p style="font-weight: bold"> </p> Lorem ipsum dolor sit amet. <p style="font-style: italic"> </p> Lorem ipsum dolor sit amet.
Google Fonts Google Fonts är en gratis tjänst som erbjuder ickestandardtypsnitt som du enkelt kan använda på webbsidor. https://fonts.google.com/
Källa https://www.w3schools.com/cssref/css_selectors.asp CSS-Selektorer
Tips:CSS Selector Reference https://www.w3schools.com/cssref/trysel.asp
CSS klasser Du kan dela in dina regler i olika klasser. Med klasser specificerar man en regel som kan återanvändas. En klass kan användas i valfritt HTML-element.
Arbeta med CSS-klasser Observera punkten <head> <style>.text-center { text-align: center; </style> </head> <body> <h1 class="text-center">rubrik</h1> <p class="text-center"> OBS! Klassnamn får inte påbörjas med en siffra</p> </body>
Namngivning av CSS-klasser Ge dina klasser tydliga namn. Klasser ska beskriva vart den används och vad den gör. Understreck rekommenderas inte i CSS. Följande namn är inte bra: text_center eller page_title Använd bindestreck (hyphen) mellan dina ord t.ex..text-center.text-right.page-title Att skriva på detta sätt kallas kebab-case J
ID-regler Med en ID-regel specificerar man en regel som kopplas till ett enda HTML-element. #header{ color: blueviolet; font-size: 2.5em; text-align: center; <h1 id="header">this is the header</h1>
Formatera länkar med Pseudo-klasser a:link { /* unvisited link */ color: red; a:visited { /* visited link */ color: green; a:hover { /* mouse over link */ color: hotpink; a:active { /* selected link */ color: blue; https://www.w3schools.com/css/css_link.asp
Text-decoration a { text-decoration: none; a:hover { text-decoration: underline;
Google Icons (Material Icons) 1. Lägg till följande kod i head. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=material+icons"> 2. Gå till https://material.io/tools/icons 3. Sök efter en önskad ikon. 4. Klistra in koden i ditt dokument t.ex. <i class="material-icons"> email </i> Bra att läsa https://www.w3schools.com/icons/google_icons_intro.asp
Font Awesome 1. Gå till https://fontawesome.com/start Kopiera länken (link-taggen) och klistra in i ditt dokument. 2. Gå till https://fontawesome.com/icons?d=gallery&m=free 3. Leta efter en önskad ikon. 4. Klistra in koden i ditt dokument t.ex. <i class="fab fa-facebook-f"></i> Bra att läsa https://www.w3schools.com/icons/fontawesome5_intro.asp
Övning 1 Skapa ett nytt HTML-dokument. Lägg till en huvudrubrik (h1) och ett stycke (p). Använd lorem Ipsum som exempeltext. Ändra sidans bakgrundsfärg (valfri färg). Formatera rubriken med en valfri Google Font och valfri teckenfärg. Centrera rubriken. Formatera stycket med en annan Google Font och valfri teckenfärg.
Övning 2 Skapa ett nytt HTML-dokument. Skapa en lista på dina favoritlänkar. Formatera länkarna. Ta bort understrykning och ändra färg vid överrullning.
Övning 3 Skapa ett nytt HTML-dokument. Lägg till 3 stycken (p-taggar) och lite lorem ipsum. Skapa en CSS-regel som formaterar alla p enligt följande: Verdana, 0.8em, #34495e. Skapa en CSS-klass som heter ingress. Lägg till följande formateringar: Tahoma, 1.1em, fet, #8e44ad. Koppla klassen ingress till det första stycket i dokumentet!