I'm trying to decipher the meaning of a paragraph from the Inline Styles in HTML article


#1

I followed all of the article up until this paragraph which I don’t understand. Could somebody help breakdown the following:

‘Cascading works the same way, however, so the <strong> element inside the <p> will be blue with big text regardless of whether you decide to use inline styling or CSS rules.’

Here are some other paragraphs included to aid with context:

'The p tag with the inline style attribute is the focus here:

<p style="color: blue; font-size: 46px;">

The style attribute is just like any other HTML attribute. It goes inside the element’s beginning tag, right after the tag name. The attribute starts with style, followed by an equals sign, =, and then finally uses double quotes, “”, which contain the value of the attribute.

In our case, the value of the style attribute will be CSS property-value pairs: “property: value;”. You can have as many property value pairs as you want. Unlike normal CSS syntax, inline styling does not use selectors or curly braces. Don’t forget to include the semicolon ; after each pair!

Inline styles are not so different from the other ways you can write CSS. For example, the inline style above is almost like the following CSS rule:

p {
  color: blue;
  font-size: 46px;
}

The rule above works the same way as our inline style does, except for one thing. This rule will affect every p on the page, whereas the inline style will affect only the <p> it’s written in.

Cascading works the same way, however, so the <strong> element inside the <p> will be blue with big text regardless of whether you decide to use inline styling or CSS rules.’


#2

the last paragraph you don’t understand? I think the formulation (of the article, not you :wink: ) is pretty weird. It simply wants to say it doesn’t matter if you inline style or css rule, in both cases the paragraph will be blue and have a font-size of 46px (so style attribute and cascading using a css rule have the same effect)

Its so simple, that it is confusing


#3

I think a large part of my confusion came from the use of the word ‘cascading’, which I’m unfamiliar with. What does ‘cascading’ mean in terms of the context of the paragraph included in my question?


#4

css is abbreviation for cascading style sheets, so that is where cascading comes from. At its most basic level it indicates that the order of CSS rules matter. Why its used in your article, its a mystery.

so if we would have two css rules:

p {
  color: blue;
  font-size: 46px;
}
p {
   color: blue;
}

the paragraph would be blue.

Anyway, i think you understand the most important part of the article


#5

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.