When is white space important in HTML/CSS?


#1


Having learned Javascript before HTML/CSS, white space was not so important. But after the CSS Selector lesson, learned that white space is important when it comes to using nth-child and first-child.

Is there any other instances when white space is important?

I've noticed that when using any sort of pseudo class selector, having a space either before or after the colon does not let the code work properly.
So is it only when using pseudo class selectors?

I've tried adding a space between "property:value" such as "color : red" but it does not seem to make a difference.



#2

To rattle off a quick answer to the title question, before I read your post...

White space is never important in HTML or CSS until it is.

<ahref = "#"title = "Uh huh...">    link text    </a>

Rule: white space before attribute names in tags.
Guide: no white space around operators in attributes unless inside the quotes.
Note: White space is ignored in text nodes so wasted bandwidth.

<a href="#" title="Uh huh...">link text</a>

In CSS the white space is critical, where it is expected, and ignored otherwise.

ullip{font:normal1em/1.5emblackArial;}

What makes this not work is the missing white space.

A space between selectors indicates descendency.

ul li p

is a paragraph in a list item in an unordered list. Grand-parent > Parent > Child.

Take the spaces out and it is gibberish.

    font:normal 1em/1.5em black Arial;

The spaces separate properties.

For readability we could write,

    font: normal 1em/1.5em black Arial;

Back on HTML,

<span>This text</span>
<span>will all print</span>
<span>on the same</span>
<span>line.</span>

The hard returns (which are not HTML linebreaks) are given a space character by the HTML parser so these lines will appear as normal prose text on one line.

This text will all print on the same line.

HTML whitespace
#3

I was wondering about instances when white space affects how the code looks like when it comes to pseudo class selectors.

p :nth-child(4) { }
vs
p:nth-child(4) { }

I know these work differently. I was wondering if there were other instances like this.d


#4

Think, descendant, or not?


#5

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