Ugrađeni CSS vodič - Kako izravno oblikovati HTML oznaku

Napisali ste HTML i sada ga trebate oblikovati s CSS-om. Jedan od načina je upotreba umetnutih stilova, o čemu govori ovaj članak.

This is my first paragraph.

Prije nego što uskočimo u nijanse umetnutih stilova - kada, zašto i kako ih koristiti - važno je biti svjestan i drugih načina oblikovanja HTML-a. Na taj način odabirete najbolju opciju za svoj kôd.

Evo sažetka vaših mogućnosti.

Vanjski tablica stilova

Programeri obično čuvaju sve svoje CSS-ove u vanjskoj tablici stilova. U svojoj HTML datoteci upotrijebite element za povezivanje s vanjskom tablicom stilova koja sadrži vaš CSS.

Unutar datoteke, index.css, imamo svoja CSS pravila.

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

Unutarnja tablica stilova

Druga mogućnost za oblikovanje CSS-a je korištenje unutarnjeg lista stilova. To znači definiranje CSS pravila unutar elementa u vašoj HTML datoteci.

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

Ugrađeni stilovi

Rjeđe ćete pronaći da posežete za ugrađenim stilovima. Ali svejedno ih je važno znati, jer postoje određene prilike kada im dobro dođu.

S ugrađenim stilovima, dodati ćete stilatribut HTML oznaci nakon kojeg slijedi CSS za oblikovanje elementa.

This is my first paragraph.

This is my second paragraph.

Tako je u našem slučaju tekst prvog stavka crvene boje s veličinom fonta 20px. Drugi, međutim, ostaje nepromijenjen.

Pogledajmo bliže kako i kada koristiti umetnute stilove. Također ćemo otkriti zašto je oblikovan samo jedan od naših odlomaka.

Što je HTML oznaka?

S ugrađenim stilovima primjenjujete CSS na styleatribut u početnoj HTML oznaci.

Primjeri HTML oznaka uključuju:

  • ...
  • ...

  • ...

Oznake za otvaranje i zatvaranje često su dio HTML elementa koji može sadržavati tekst, podatke, sliku ili uopće ništa.

Ovdje imamo element teksta.

This is my first paragraph.

Umetnute stilove možemo koristiti za oblikovanje ovog elementa dodavanjem atributa style na početnu oznaku, nakon čega slijede CSS parovi svojstva i vrijednosti.

This is my first paragraph.

This is my second paragraph.

Prođimo kroz način na koji smo koristili umetnute stilove.

Kako se koriste umetnuti stilovi

Dodajteatribut style oznaci koju želite oblikovati, nakon čega slijedi znak jednakosti. Počnite i završite svoj CSS s dvostrukim navodnicima.

Atributu stila dodajte parove svojstva-vrijednosti. Dodajte točka-zarez nakon svakog para svojstva-vrijednosti.

color: red; font-size: 20px; 

Pa kad sve spojimo, izgleda ovako:

This is my first paragraph.

Ključne točke koje treba znati

Za razliku od unutarnjih i vanjskih tablica stilova, umetnuti stilovi ne sadrže kovrčave zagrade ili prelome redaka. To jest, napišite svoj CSS u isti redak kada koristite umetnute stilove.

Također, imajte na umu da ugrađeni stilovi utječu samo na određeni element kojem dodajete atribut stila s CSS parovima svojstva-vrijednosti.

Na primjer, u donjem je kodu samo prvi odlomak crveno oblikovan s veličinom fonta 20px.

This is my first paragraph.

This is my second paragraph.

Ako želimo stilizirati tekst oba odlomka s ugrađenim stilovima, tada moramo dodati CSS atributu stila u drugi

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.