Quick links for CSS questions.
These are some CSS tips for quick reference.
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
In CSS
Three ways to use CSS in HTML documents
1. Internal Style Sheet: Include CSS in the HTML <style> tag.
2. Inline Style: Define the CSS codes in the HTML “style” attribute.
3. External Style Sheet: Insert it as an external file.
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
1. You can group selectors that share the same declarations. Separate selectors by comma.
(Selectors are the HTML tags/elements.)
2. You can group property declarations that are applied to the same selector. Separate the declaration by semicolon.
3. You can combine the above two by grouping both selectors and declarations.
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 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.
You can apply multiple classes at the same time.
You can limit the elements to which the class should be applied.
<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 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.
<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
<div id=”header” class=”darkBackground”>…</div>
<div id=”content” class=”darkBackground”>…</div>
4. Conflicts and Precedences between ID and CSS
<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
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
You can declare selectors within other selectors. This helps optimize long CSS codes.
<h2>Title</h2>
<p>This is the first paragraph of the content</p>
</div>