How to apply CSS (basic)

After making a reference to a CSS in your page following my previous post,

I will briefly explain my understanding on how to apply CSS to your elements.

There are a few ways to accomplish this task.

Basic way:

1. tagName – This will apply the style to all element of the type.

CSS:

tagName{ …style… }

HTML:

<tagName></tagName>

example:

p{ font-size:24px; }

<p>Font with 24px</p>

2. id – This will apply the style only to the element with that id.

BEWARE: due to id needs to be unique in one webpage,

this style can only apply once.

CSS:

#idName{ …style… }

HTML:

<tagName id=”idName”></tagName>

example:

#myId{ font-size:24px; }

<div id=”myId”>Font with 24px</div>

3. className – This will apply the style to all element with this class.

CSS:

.className{ …style… }

HTML:

• <tagName class=”className”></tagName>
• <span class=”className”><tagName></tagName></span>

example:

.myClass{ font-size:24px; }

<p class=”myClass”>Font with 24px</p>

<span class=”myClass”><p>Font with 24px</p></span>

REMARK: you may apply multiple class by separating className with a white space.