Inline CSS Guide - Sådan styler du et HTML-tag direkte

Du har skrevet noget HTML og er nu nødt til at style det med CSS. En måde er at bruge indbyggede stilarter, hvilket er hvad denne artikel handler om.

This is my first paragraph.

Inden vi springer ind i nuancerne i indbyggede stilarter - hvornår, hvorfor og hvordan man bruger dem - er det vigtigt at være opmærksom på de andre måder at style din HTML på. På den måde vælger du den bedste mulighed for din kode.

Her er en oversigt over dine muligheder.

Eksternt typografiark

Udviklere opbevarer typisk alle deres CSS i et eksternt stilark. I din HTML-fil skal du bruge elementet til at linke til dit eksterne stilark, som indeholder din CSS.

Inde i filen index.css har vi vores CSS-regler.

p { color: red; font-size: 20px; } 

Internt stilark

En anden mulighed for styling af CSS er at bruge et internt stilark. Dette betyder at definere dine CSS-regler inde i elementet i din HTML-fil.

  p { color: red; font-size: 20px; }   

Inline-stilarter

Mindre hyppigt vil du finde dig selv at nå frem til indbyggede stilarter. Men de er stadig vigtige at vide om, fordi der er visse lejligheder, når de kommer til nytte.

Med integrerede stilarter tilføjer du stilenattribut til et HTML-tag efterfulgt af din CSS for at style et element.

This is my first paragraph.

This is my second paragraph.

Så i vores tilfælde er teksten i første afsnit rød med en skriftstørrelse på 20 pixel. Den anden forbliver dog uændret.

Lad os se nærmere på, hvordan og hvornår man bruger inline-stilarter. Vi afdækker også, hvorfor kun et af vores afsnit er stylet.

Hvad er et HTML-tag?

Med integrerede stilarter anvender du CSS til styleattributten i det indledende HTML-tag.

Eksempler på HTML-tags inkluderer:

  • ...
  • ...

  • ...

Åbning og lukning af tags er ofte en del af HTML-elementet, som kan indeholde tekst, data, et billede eller slet ingenting.

Her har vi et element af tekst.

This is my first paragraph.

Vi kan bruge indbyggede stilarter til at style dette element ved at tilføje stilattributten til åbningstagget efterfulgt af CSS-egenskabsværdipar.

This is my first paragraph.

This is my second paragraph.

Lad os gå igennem, hvordan vi brugte indbyggede stilarter.

Sådan bruges indbyggede stilarter

Tilføjstilattribut til det tag, du vil oprette, efterfulgt af et ligetegn. Start og afslut din CSS med dobbelt anførselstegn.

Føj egenskabsværdipar til stilattributten. Tilføj et semikolon efter hvert egenskabsværdipar.

color: red; font-size: 20px; 

Så når vi sætter alt sammen, ser det sådan ud:

This is my first paragraph.

Nøglepunkter at vide

I modsætning til interne og eksterne stilark indeholder indbyggede typografier ikke krøllede seler eller linjeskift. Det vil sige, skriv din CSS alle på samme linje, når du bruger indbyggede stilarter.

Husk også, at indbyggede typografier kun påvirker det specifikke element, som du tilføjer typeattributten med CSS-egenskabsværdipar til.

For eksempel er kun første afsnit i koden nedenfor rødt med en skriftstørrelse på 20 pixel.

This is my first paragraph.

This is my second paragraph.

Hvis vi vil stile teksten i begge afsnit med indbyggede stilarter, skal vi tilføje CSS til stilattributten til det andet

This is my first paragraph.

This is my second paragraph.

However, if we used an external stylesheet, for example, we could easily style both paragraphs without duplicating our code by using a single CSS selector.

p { color: red; font-size: 20px; } 

This brings us to an important topic: when to use and when not to use inline styles.

When to Use (and when NOT to use) Inline Styles

Say you have an HTML file with ten or more paragraph tags. Can you imagine styling each one individually with inline styles?

Doing so will quickly clutter your code, making it hard to read and maintain.

Besides, inline styles can introduce specificity issues if you’re also using internal or external stylesheets.

That’s because inline styles have a high specificity. This means they'll override most other rules in internal and external stylesheets, except for the !important declaration.

For example, we added inline styles to two paragraph elements. We’ve also added an internal stylesheet.

 My New Webpage p { color: pink; } 

A blue paragraph.

Another blue paragraph.

The CSS from our inline styles override the CSS in the internal stylesheet. So we end up with two blue paragraphs.

External stylesheets are also much easier to maintain when you or someone else needs to make a change. This is because a style from an external or internal stylesheet can apply to multiple elements, while an inline one must be applied to each element individually.

For example, say you need to update a style to ten elements. It’s easier to make the change once in an external stylesheet, instead of ten different times in your HTML file.

In general, it’s often best practice to put your CSS into a separate file. That way, your HTML file contains the structure and content of your website, and your CSS file contains your styles. Doing so makes your code easier to read and manage.

However, there are times when it may make sense to use inline styles:

  • Add a style and see the change quickly, which can be useful for testing.
  • Use the style attribute in JavaScript to apply styling.

Most of the time you’ll want to use external stylesheets. But you’ll occasionally find yourself using inline styles, most commonly in the above situations.

I write about learning to program, and the best ways to go about it on my blog at amymhaddad.com.