Quick CSS Tips

Quick links for CSS questions.

These are some CSS tips for quick reference.

Definition & Advantages

CSS(Cascading Style Sheets) is a style language to define fonts, colors, background colors / images, height, width, margins, positions and many other things in HTML documents. HTML itself can be used to describe these properties, but CSS is more powerful, accurate and efficient. Also, CSS is cached and it will shorten the overall loading time once it’s cached.

In HTML

<body bgcolor=”#ffff00″>

In CSS

body {background-color: #ffff00;}

to the top

Three ways to use CSS in HTML documents

1. Internal Style Sheet: Include CSS in the HTML <style> tag.

<head>
<style type=”text/css”>
p { color: #ffff00;}
</style>

</head>
<body>
<p> This is a paragraph in yellow.</p>
</body>

2. Inline Style: Define the CSS codes in the HTML “style” attribute.

<p style=”color: #ffff00;”>
This is a paragraph in yellow.
</p>

3. External Style Sheet: Insert it as an external file.

<head>
<link rel=”stylesheet” type=”text/css” href=”myStyle.css” />
</head>

The external style sheet is the most recommended method because it makes HTML documents lighter, one CSS file can be used for multiple HTML documents and it’s easier to maintain.
to the top

Cascading Order (CSS Hierarchy, CSS Priority)

When there is more than one style defined for an HTML property, in what order are the styles applied to the property?

External style sheet
Internal style sheet (inside the <head> tag)
Inline style (inside an HTML element)

It might sound that the one with the highest priority of the three styles is used exclusively, but actually all styles are “cascaded” into one by their priority. (The last one has the highest priority.)
to the top

CSS Grouping

1. You can group selectors that share the same declarations. Separate selectors by comma.
(Selectors are the HTML tags/elements.)

h1,h2, p, .myCssClass { color: #ffff00;}

2. You can group property declarations that are applied to the same selector. Separate the declaration by semicolon.

body { font-family: arial, sans-serif; font-size: 12px; color: #00000; }

3. You can combine the above two by grouping both selectors and declarations.

body, h1,h2,h3, p, .myCssClass { font-family: arial, sans-serif; font-size: 12px; color: #00000; }

to the top

CSS ID and CSS Class

CSS ID is used to identify unique layout for a single element. It must be referenced once within a HTML document. Use a hash character(#) for ID.

p#theFirstParagraph { background-color: #d3d3d3; }
p#theLastParagraph { background-color: #ffff00;}

<p id=” theFirstParagraph”>The background color of this paragraph is light gray.</p>
<p id=” theLastParagraph”>The background color of this paragraph is yellow.</p>

CSS class is used when you want to apply declaration multiple times within a HTML document. Use a period(.) for CSS class.

.blueBoldFont { color: #0000ff; font-weight: bold;}
.biggerFont { font-size: 1.4em; }

You can apply multiple classes at the same time.

<p class=”blueBoldFont biggerFont “>The font of this paragraph is bold and big in blue.</p>

You can limit the elements to which the class should be applied.

a { color: #000000;}
a.blueBoldFont { color: #0000ff; font-weight: bold;}

<a href=”link1.htm” class=”blueBoldFont”>Link in blue and bold font</a>

Difference between CSS ID and CSS Class
ID must be called only once.
ID can be referenced in JavaScript by getElementByID() function.
ID generally takes a higher precedence.

CSS class can be called multiple times. Therefore, classes are useful to apply the same declarations to multiple elements.

Both of them are case sensitive.

Example cases

1. If you want all external links in blue and all internal links in green, CSS classes are very useful.

a { color: #008000;}
a.externalLink { color: #0000ff;}

<a href=”internalink.htm”>Internal link in green</a>
<a href=”external.html” class=”externalLink”>External link in blue</a>

2. If you want all links in menu in green and all links in content in blue, CSS IDs are appropriate.

#menu a {color: #008000;}
#content a {color: #0000ff;}

<div id=”menu”>
<a href=”menuLink.htm”>Link in menu</a>
</div>
<div id=”content”>
<a href=”contentLink.htm”>Link in content</a>
</div>

3. Using ID and class together

.darkBackground {background-color: #191970;}
#header {position: absolute; top: 0px; left: 0px; padding: 0px;}
#content {position: absolute; top: 100px; left: 30px; padding:5px;}

<div id=”header” class=”darkBackground”>…</div>
<div id=”content” class=”darkBackground”>…</div>

4. Conflicts and Precedences between ID and CSS

#mySpan { color: blue;border:1px solid green;}
.myClass { color: green; font-size: 14px;}

<span id=”mySpan” class=”myClass”>What color is this?</span>
The sentence is in blue with font size 14px in a solid green box.

5. ID, class and inheritance

#content .warningBox { color: red; }<div id=”content”>
<div class=”warningBox”>This is in red.</div>
<p class=”warningBox”>This is in red.</p>
</div>
<div id=”footer”>
<p></p>
<div class=”warningBox”>This is NOT in red.</div>
</div>

6. Which one to use?
CSS class certainly gives you more flexibility, but CSS ID makes a HTML document more structured. It can be easier to maintain HTML documents with IDs if you divide a document into several blocks and assign IDs to them.
to the top

CSS Nesting

You can declare selectors within other selectors. This helps optimize long CSS codes.

#content { background-color: #ccc;}
# content h2 { color: #ff0000; }
# content p { color: #fff; }<div id=”content”>

<h2>Title</h2>
<p>This is the first paragraph of the content</p>
</div>

to the top

Example - Boxes

.blueBox {
border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
margin:-20px 0 4px 0;
}

to the top

No Comments

Leave a comment