Articles
Introduksjon til CSS
CSS Grunnleggende

CSS Grunnleggende

Denne artikkelen forklarer det grunnleggende om CSS.

Du kan lære om CSS-selektorer, kombinatorer og spesifisitet.

YouTube Video

HTML/CSS for Forhåndsvisning

css-base.css 
  1body {
  2    font-family: Arial, sans-serif;
  3    line-height: 1.6;
  4    margin: 20px 20px 600px 20px;
  5    background-color: #f4f4f9;
  6    color: #333;
  7}
  8
  9header h1 {
 10    font-size: 24px;
 11    color: #333;
 12    text-align: center;
 13    margin-bottom: 20px;
 14}
 15
 16h2, h3 {
 17    color: #555;
 18}
 19
 20h2 {
 21    font-size: 20px;
 22    border-bottom: 2px solid #ccc;
 23    padding-bottom: 5px;
 24}
 25
 26h3 {
 27    font-size: 18px;
 28    margin-top: 20px;
 29    padding-left: 10px;
 30    border-left: 2px solid #ccc;
 31}
 32
 33h4 {
 34    margin: 0;
 35    margin-left: 10px;
 36    font-size: 14px;
 37}
 38
 39article section p {
 40    margin-left:  40px;
 41}
 42
 43p, pre {
 44    margin: 10px 0;
 45    padding: 0;
 46}
 47
 48ul, ol, dl, menu {
 49    margin: 0;
 50}
 51
 52pre {
 53    background-color: #f0f0f0;
 54    border-left: 4px solid #ccc;
 55    padding: 10px;
 56    overflow-x: auto;
 57}
 58
 59.sample-view {
 60    border: 1px solid #eee;
 61    border-left: 4px solid #eee;
 62    padding: 10px;
 63    overflow-x: auto;
 64}
 65
 66p.sample, .sample {
 67    background-color: #e7f4e9;
 68    padding: 10px;
 69    border-left: 4px solid #7bbd82;
 70    color: #333;
 71}
 72
 73p.sample-error, .sample-error {
 74    background-color: #f4e7e7;
 75    padding: 10px;
 76    border-left: 4px solid lightcoral;
 77    color: #333;
 78}
 79
 80.example {
 81    background-color: #e0f0ff;
 82    padding: 10px;
 83    border-left: 4px solid #4a90e2;
 84    color: #333;
 85}
 86
 87p.sample-warn, .sample-warn {
 88    background-color: #f4f1e7;
 89    padding: 10px;
 90    border-left: 4px solid #bda97b;
 91    color: #333;
 92}
 93
 94code {
 95    background-color: #f4f4f4;
 96    padding: 2px 4px;
 97    border-radius: 4px;
 98    font-family: monospace;
 99}
100
101span {
102    font-weight: bold;
103}
104
105article {
106    background-color: white;
107    padding: 20px;
108    margin-bottom: 10px;
109    border-radius: 8px;
110    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
111}
112
113section {
114    margin-bottom: 20px;
115}
116
117section div {
118    width: 400px;
119    height: 50px;
120    margin: 20px auto;
121    color: white;
122    display: flex;
123    align-items: center;
124    justify-content: center;
125    font-size: 1.2rem;
126    background-color: lightgray;
127    border: 1px solid #ccc;
128}
129
130header h4 {
131    text-align: right;
132    color: #666;
133    font-size: 0.8em;
134    text-decoration: none;
135}
136
137header + pre {
138    margin: 0;
139    margin-top: -20px;
140    padding-top: 14px;
141    font-size: 0.9em;
142}
143
144header + .sample-view {
145    margin: 0;
146    margin-top: -16px;
147}
148
149.sample-view p {
150    margin: 0;
151    padding: 0;
152}
css-basics.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Basics</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-basics.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Basics</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>CSS Selectors</h2></header>
 19        <article>
 20            <h3>Universal Selector : *</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24* {
 25    font-family:'Courier New', Courier, monospace;
 26}
 27</pre>
 28            </section>
 29        </article>
 30        <article>
 31            <h3>Element Selector</h3>
 32            <section>
 33                <header><h4>CSS</h4></header>
 34<pre class="sample">
 35strong {
 36    color: red;
 37}
 38</pre>
 39                <header><h4>HTML</h4></header>
 40                <pre>This is &lt;strong&gt;sample&lt;/strong&gt; text.</pre>
 41                <header><h4>HTML+CSS</h4></header>
 42                <section class="sample-view">
 43                    This is <strong>sample</strong> text.
 44                </section>
 45            </section>
 46        </article>
 47        <article>
 48            <h3>ID Selector : #</h3>
 49            <section>
 50                <header><h4>CSS</h4></header>
 51<pre class="sample">
 52#example1 {
 53    color: steelblue;
 54}
 55</pre>
 56                <header><h4>HTML</h4></header>
 57                <pre>&lt;span id="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 58                <header><h4>HTML+CSS</h4></header>
 59                <section class="sample-view">
 60                    <span id="example1">This is sample text.</span>
 61                </section>
 62            </section>
 63        </article>
 64        <article>
 65            <h3>Class Selector : .</h3>
 66            <section>
 67                <header><h4>CSS</h4></header>
 68<pre class="sample">
 69.example1 {
 70    background-color: yellow;
 71    font-weight: bold;
 72}
 73</pre>
 74                <header><h4>HTML</h4></header>
 75                <pre>&lt;span class="example1"&gt;This is sample text.&lt;/span&gt;</pre>
 76                <header><h4>HTML+CSS</h4></header>
 77                <section class="sample-view">
 78                <section>
 79                    <span class="example1">This is sample text.</span>
 80                </section>
 81            </section>
 82        </article>
 83        <article>
 84            <h3>Attribute Selector : [property=value]</h3>
 85            <section>
 86                <header><h4>CSS</h4></header>
 87<pre class="sample">
 88a[href="index.html"] {
 89    font-weight: bold;
 90}
 91</pre>
 92                <header><h4>HTML</h4></header>
 93<pre>
 94&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;br&gt;
 95&lt;a href="about.html"&gt;About&lt;/a&gt;
 96</pre>
 97                <header><h4>HTML+CSS</h4></header>
 98                <section class="sample-view">
 99                    <a href="index.html">Home</a><br>
100                    <a href="about.html">About</a>
101                </section>
102            </section>
103        </article>
104        <article>
105            <h3>Descendant Combinator</h3>
106            <section>
107                <header><h4>CSS</h4></header>
108<pre class="sample">
109span strong {
110    text-decoration: underline;
111}
112</pre>
113                <header><h4>HTML</h4></header>
114                <pre>&lt;span&gt;This is &lt;strong&gt;sample&lt;/strong&gt; text.&lt;/span&gt;</pre>
115                <header><h4>HTML+CSS</h4></header>
116                <section class="sample-view">
117                    <span>This is <strong>sample</strong> text.</span>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>Child Combinator : &gt;</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126span > em {
127    color: blue;
128}
129</pre>
130                <header><h4>HTML</h4></header>
131<pre>
132This is &lt;em&gt;sample&lt;/em&gt; text.&lt;br&gt;
133&lt;span&gt;This is &lt;em&gt;another&lt;/em&gt; text.&lt;/span&gt;&lt;br&gt;
134&lt;span&gt;This text is not &lt;s&gt;&lt;em&gt;blue&lt;/em&gt;&lt;/s&gt; in color.&lt;/span&gt;
135</pre>
136                <header><h4>HTML+CSS</h4></header>
137                <section class="sample-view">
138                    This is <em>sample</em> text.<br>
139                    <span>This is <em>another</em> text.</span><br>
140                    <span>This text is not <s><em>blue</em></s> in color.</span>
141                </section>
142            </section>
143        </article>
144        <article>
145            <h3> Next Sibling combinator : +</h3>
146            <section>
147                <header><h4>CSS</h4></header>
148<pre class="sample">
149br + b {
150    color: green;
151}
152</pre>
153                <header><h4>HTML</h4></header>
154<pre>
155&lt;span&gt;
156    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
157    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
158    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
159&lt;/span&gt;
160</pre>
161                <header><h4>HTML+CSS</h4></header>
162                <section class="sample-view">
163                    <span>
164                        This is <b>first text</b>.<br>
165                        This is <b>second text</b>.<br>
166                        <i>This</i> is <b>third text</b>.<br>
167                    </span>
168                </section>
169            </section>
170        </article>
171                <article>
172            <h3>Subsequent Sibling Combinator : ~</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176br ~ b {
177    color: steelblue;
178}
179</pre>
180                <header><h4>HTML</h4></header>
181<pre>
182&lt;span&gt;
183    This is &lt;b&gt;first text&lt;/b&gt;.&lt;br&gt;
184    This is &lt;b&gt;second text&lt;/b&gt;.&lt;br&gt;
185    &lt;i&gt;This&lt;/i&gt; is &lt;b&gt;third text&lt;/b&gt;.&lt;br&gt;
186&lt;/span&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <span>
191                        This is <b>first text</b>.<br>
192                        This is <b>second text</b>.<br>
193                        <i>This</i> is <b>third text</b>.<br>
194                    </span>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>Pseudo Class ":" </h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203a:hover {
204    background-color: lightskyblue;
205}
206</pre>
207                <header><h4>HTML</h4></header>
208<pre>
209    &lt;a href="#"&gt;Click here&lt;/a&gt;&lt;br&gt;
210</pre>
211                <header><h4>HTML+CSS</h4></header>
212                <section class="sample-view">
213                    <a href="#">Click here</a><br>
214                </section>
215            </section>
216        </article>
217        <article>
218            <h3>Pseudo Element "::" </h3>
219            <section>
220                <header><h4>CSS</h4></header>
221<pre class="sample">
222u::before {
223    content: " ** ";
224    color: red;
225    font-weight: bold;
226}
227</pre>
228                <header><h4>HTML</h4></header>
229<pre>
230    &lt;u&gt;Sample Text&lt;/u&gt;
231</pre>
232                <header><h4>HTML+CSS</h4></header>
233                <section class="sample-view">
234                    <u>Sample Text</u>
235                </section>
236            </section>
237        </article>
238    </main>
239
240    <main>
241        <header><h2>Inheritance &amp; Priority of CSS</h2></header>
242        <article>
243            <h3>CSS Specificity Rule</h3>
244            <section>
245                <header><h4>CSS Specificity</h4></header>
246                <section class="example">
247                <ol>
248                    <li><b>Inline Styles</b>: Styles written directly within the HTML element.</li>
249                    <li><b>ID Selectors</b>: e.g., <code>#id</code></li>
250                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: e.g., <code>.class</code>, <code>[attribute=value]</code>, <code>:hover</code>, etc.</li>
251                    <li><b>Element Selectors</b>: e.g., <code>div</code>, <code>h1</code>, <code>p</code>, etc.</li>
252                    <li><b>Universal Selector</b>: <code>*</code></li>
253                </ol>
254                </section>
255
256                <header><h4>How Specificity is Calculated</h4></header>
257                <section class="example">
258                <ol>
259                    <li><b>Inline Styles</b>: Always have the highest specificity and are always applied.</li>
260                    <li><b>ID Selectors</b>: Worth 100 points each.</li>
261                    <li><b>Class, Attribute Selectors, and Pseudo-classes</b>: Worth 10 points each.</li>
262                    <li><b>Element Selectors and Pseudo-elements</b>: Worth 1 point each.</li>
263                </ol>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>Example of CSS Specificity Rule</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272/* ID Selector */
273#header {
274    color: blue;
275}
276
277/* Class Selector */
278.header {
279    color: red;
280}
281
282/* Element Selector */
283h1 {
284    color: green;
285}
286</pre>
287            <header><h4>HTML</h4></header>
288            <pre>&lt;h1 id="header" class="header"&gt;Example of CSS Specificity Rule&lt;/h1&gt;</pre>
289            <header><h4>HTML+CSS</h4></header>
290            <section class="sample-view">
291                <h1 id="header" class="header">Example of CSS Specificity Rule</h1>
292            </section>
293        </section>
294    </article>
295    <article>
296        <h3>Using <code>!important</code> in CSS</h3>
297        <section>
298            <header><h4>CSS</h4></header>
299<pre class="sample">
300#important-header {
301    color: blue;
302}
303
304.important-header {
305    color: red !important;
306}
307</pre>
308            <header><h4>HTML</h4></header>
309            <pre>&lt;h1 id="important-header" class="important-header"&gt;Example of &lt;code&gt;!important&lt;/code&gt;&lt;/h1&gt;</pre>
310            <header><h4>HTML+CSS</h4></header>
311            <section class="sample-view">
312                <h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
313            </section>
314        </section>
315    </article>
316    <article>
317        <h3>CSS Inheritance</h3>
318        <section>
319            <header><h4>CSS</h4></header>
320<pre class="sample">
321footer {
322    color: gray;
323}
324
325p {
326    color: black;
327}
328</pre>
329            <header><h4>HTML</h4></header>
330<pre>
331&lt;footer&gt;
332    &lt;p&gt;This paragraph's text will be black.&lt;/p&gt;
333    &lt;span&gt;This text will be gray.&lt;/span&gt;
334&lt;/footer&gt;
335</pre>
336            <header><h4>HTML+CSS</h4></header>
337            <section class="sample-view">
338                <footer>
339                    <p>This paragraph's text will be black.</p>
340                    <span>This text will be gray.</span>
341                </footer>
342            </section>
343        </section>
344    </article>
345    <article>
346        <h3>Cascading Styles</h3>
347        <section>
348            <header><h4>CSS</h4></header>
349<pre class="sample">
350.text {
351    color: red;
352}
353
354.text {
355    color: blue;
356}
357</pre>
358            <header><h4>HTML</h4></header>
359            <pre>&lt;p class="text"&gt;This text will be blue.&lt;/p&gt;</pre>
360            <header><h4>HTML+CSS</h4></header>
361            <section class="sample-view">
362                <p class="text">This text will be blue.</p>
363            </section>
364        </section>
365    </article>
366
367</body>
368</html>

Grunnleggende Syntax 

1selector {
2    property: value;
3}

Den grunnleggende strukturen til CSS består av selektor, egenskap og verdi. Hvert par av egenskaper og verdier etterfølges av et semikolon.

  • selektor spesifiserer hvilket HTML-element stilen gjelder for. I dette eksemplet blir stiler anvendt på alle <header>-elementer.
  • egenskap spesifiserer stil-egenskapen som skal endres, for eksempel farge eller skriftstørrelse. Padding og farge er egenskapene i dette eksemplet.
  • verdi er verdien som tildeles egenskapen. For eksempel, for farge, kan det være white eller #9cf, og for margstørrelse kan det være 20px.

Selektorer

CSS-selektorer er mønstre for å velge HTML-elementer. Ved å bruke selektorer kan du anvende stiler på spesifikke elementer eller grupper av elementer.

Universell Selektor 

1/* Universal Selector : "*" */
2* {
3    font-family:'Courier New', Courier, monospace;
4}
  • * er en universell selektor som gjelder for alle elementer.
  • I dette eksemplet endres skriften for alle elementer.

Elementvelger 

1/* Element Selector */
2strong {
3    color: red;
4}
  • En elementvelger er en velger som brukes på spesifikke HTML-elementer ved å skrive navnet på HTML-taggen.
  • I dette eksemplet endres tekstfargen på <strong>-elementet til rød.

ID-velger 

1/* ID Selector : "#" */
2#example1 {
3    color: steelblue;
4}
  • # er en ID-velger som brukes til å velge elementer etter ID.
  • ID-er er unike, så det kan kun finnes ett element med samme ID på en enkelt side.

Klassevelger 

1/* Class Selector : "." */
2.example1 {
3    background-color: yellow;
4    font-weight: bold;
5}
  • . er en klassevelger som brukes til å velge elementer basert på klasser.
  • Legg til en klasseattributt på HTML-elementer for å bruke stiler på elementer som tilhører denne klassen.

Attributtvelger 

1/* Attribute Selector : [property=value] */
2a[href="index.html"] {
3    font-weight: bold;
4}
  • [href="index.html"] er en attributtvelger som velger elementer med et spesifikt attributt.
  • I dette eksemplet blir teksten i <a>-elementet med attributtverdien href="index.html" satt til fet.

Kombinator

Kombinatorer brukes til å kombinere flere velgere for å velge elementer som har spesifikke relasjoner. Mens en velger velger elementer individuelt, spiller en kombinator rollen med å definere strukturelle relasjoner mellom elementer.

Etterkommerkombinator 

1/* Descendant Combinator : " " */
2span strong {
3    text-decoration: underline;
4}
  • En etterkommerkombinator bruker stiler på alle spesifiserte elementer innenfor et bestemt element.
  • I dette eksemplet brukes en understrek på <strong>-elementer innenfor <span>-elementer.

Barnekombinator 

1/* Child Combinator : ">" */
2span > em {
3    color: blue;
4}
  • Tegnet > mellom span og em brukes som en barnekombinator. I dette eksemplet brukes stiler kun på <em>-elementer som er direkte barn av <span>-elementer. I eksempelet på tredje linje brukes ikke stilen fordi det finnes en <s>-tagg mellom <span> og <em>-taggene.

Tilstøtende søskenkombinator 

1/* Next Sibling combinator */
2br + b {
3    color: green;
4}
  • Den tilstøtende søskenkombinatoren som bruker +-tegnet, anvender stiler på et søskenelement som vises umiddelbart etter et bestemt element.
  • I dette eksemplet blir tekstfargen grønn bare hvis en <b>-tag vises umiddelbart etter en <br>-tag.

Generell søskenkombinator 

1/* Subsequent Sibling Combinator */
2br ~ b {
3    color: steelblue;
4}
  • Den generelle søskenkombinatoren som bruker ~-tegnet, velger alle søskenelementer som vises etter et bestemt element.
  • I dette eksemplet vil tekstfargen på alle <b>-tagger som vises etter en <br>-tag ha en blå nyanse.

Pseudoklasser 

1/* Pseudo Class : ":" */
2a:hover {
3    background-color: lightskyblue;
4}
  • : brukes for å velge pseudoklasser.
  • Detaljer om pseudo-klasser vil bli forklart i en annen artikkel.

Pseudo-elementer 

1/* Pseudo Element : "::" */
2u::before {
3    content: " ** ";
4    color: red;
5    font-weight: bold;
6}
  • :: brukes til å velge pseudo-elementer.
  • Detaljer om pseudo-elementer vil også bli forklart i en annen artikkel.

CSS-Spesifisitet

Prioritet i CSS er avgjørende for å forstå hvordan CSS fungerer og for å forhindre uventede stilanvendelser. CSS-prioritet bestemmer hvilken regel som er mest dominerende når flere CSS-regler brukes på det samme elementet. Prioriteten i CSS bestemmes hovedsakelig av følgende faktorer.

  1. Inline-stiler: Stiler skrevet direkte i HTML.
  2. ID-selektorer ：#id
  3. Klasser, attributtselektorer, pseudo-klasser ：.class, [attribute=value], :hover, etc
  4. Element-selektorer ：div, h1, p, etc
  5. Universell selektor ：*

Jo høyere opp på listen, jo høyere prioritet, og jo lavere ned, jo lavere prioritet.

Hvordan beregne spesifisitet

CSS-prioritet beregnes ved å kvantifisere 'vekten' av hver selektor. Vekten av hver selektor er representert som følger.

  1. Inline-stiler: Inline-stiler er de kraftigste og prioriteres alltid.
  2. ID-selektorer: En ID-selektor tilsvarer '100 poeng'.
  3. Klasse-, attributt-selektorer, pseudo-klasser: Disse tilsvarer '10 poeng'.
  4. Element-selektorer, pseudo-elementer: Disse tilsvarer '1 poeng'.

Regelen med høyest poengsum anvendes.

Eksempel: 

 1/* ID Selector */
 2#header {
 3    color: blue;
 4}
 5
 6/* Class Selector */
 7.header {
 8    color: red;
 9}
10
11/* Element Selector */
12h1 {
13    color: green;
14}
1<h1 id="header" class="header">Example of CSS Specificity Rule</h1>

Her har <h1>-taggen tre forskjellige stiler brukt:

  • h1 element-selektor (1 poeng)
  • .header klasse-selektor (10 poeng)
  • #header ID-selektor (100 poeng)

I dette tilfellet, siden ID-selektoren har høyest prioritet, blir color: blue anvendt.

Overstyring av prioritet med !important

Bruk !important hvis du vil tvinge en stil og ignorere de vanlige prioritetene. !important har den mest kraftfulle innflytelsen over alle regler og overstyrer alt annet.

Eksempel: 

1#important-header {
2    color: blue;
3}
4
5.important-header {
6    color: red !important;
7}
1<h1 id="important-header" class="important-header">Example of <code>!important</code></h1>
  • Her er color: red !important; spesifisert, så color: red har prioritet.

Arv og prioritet

CSS kan arve stiler fra overordnede elementer til underordnede elementer. For eksempel arves egenskaper som color og font-family som standard. Men, hvis et spesifikt underordnet element er direkte stylet, har den direkte anvendte stilen forrang over arvede stiler.

Eksempel: 

1footer {
2    color: gray;
3}
4
5p {
6    color: black;
7}
1<footer>
2    <p>This paragraph's text will be black.</p>
3    <span>This text will be gray.</span>
4</footer>
  • Her er color: gray; anvendt på footer-taggen, men siden color: black; er eksplisitt spesifisert for p-elementet, vises teksten i p-elementet i svart. I mellomtiden arver span-elementet color-egenskapen fra footer og vises i grått.

CSS-kaskade og prioritet

Som navnet 'Cascading Style Sheets (CSS)' antyder, 'kaskaderer' stilene. Dette betyr at hvis det finnes flere stilark eller regler, har den sist definerte regelen forrang. Hvis prioriteringene er de samme, blir stilen som er skrevet senere brukt.

Eksempel: 

1.text {
2    color: red;
3}
4
5.text {
6    color: blue;
7}
1<p class="text">This text will be blue.</p>
  • Her er color: blue; definert senere, så teksten vises i blå.

Sammendrag

CSS sin prioritet bestemmes ved hjelp av algoritmer som spesifisitet, men her har vi kun vurdert de grunnleggende delene.

De grunnleggende reglene er som følger:

  • Inline-stiler har alltid høyest prioritet.
  • ID-selektorer er kraftige og tar prioritet over klasser og tagger.
  • Klasseselektorer og pseudo-klasser har et moderat nivå av prioritet.
  • Tagg-selektorer og pseudo-elementer har det laveste nivået av prioritet.
  • !important overstyrer vanlig prioritet og tvinger stilen til å bli brukt.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video

Arv i CSS