CSS Notes
I have compiled few CSS best practices and notes from various sources. I have attempted to give the original authors the credit, but if I am missing anything please leave a comment to correct.
What are the benefits of using CSS over normal HTML element?
a. Re-usability with CSS we can reuse styles that can be applied across different html elements.
b. Maintenance:- Easier to maintain few or more well structured css files.
What is the difference between DIV and SPAN tags, how does it affect layouts and CSS usage?
A
DIV tag makes a paragraph break for the content within the DIV tag. In
other words when the browser encounters a div tag it does a paragraph
break and renders the content and followed by a paragraph break.
A span tag does no do that. The latter inlines contents and the former block content.
Both the tags apply it's CSS style to its child elements.
The following are block tags:-div, h1...h6, p, ul, li, table, blockquote, pre, form
The following are inline tags:-span, a, strong, em, img, br, input, abbr, acronym
What are CSS selectors?
Every
HTML element can be identified by the following forms by it's class
attribute, id attribute and the HTML element in itself can be targeted
as identifier (TABLE, TR, TD).
However in the final option that style would be applied to all the elements in the document tree regardless of its occurrence.
1. Example Class Based Selector :-/** Targets all elements whose class attributes match **/.sampleCssClass {
color: #ddd;
}
content
2. Example ID Based Selector :-/** Targets all h1 tags where attribute id is equal to headerText **/h1#headerText {
color: red;
}
3. Example Targeted Element Based Selector :-/** Targets all specific table elements **/table.SampleCssClass{
background-image: url('/images/fenil.png');
}
How can more than one CSS style class be applied to the same element ? Space
separated list of css styles on the class attribute of the html
content. In the case of icefaces put it in the style class attribute,
then it will automatically be rendered as the class attribute when the
dom tree is built.
What kind of CSS selector should we use?
Class based selector for maximum re-use. Things to keep in mind before writing CSS CLASS based selectors?
a. Avoid element specific style attributes.
b. element specific style attributes can be in a different css class.
What is CSS Reset?
A
CSS reset, is resets the style that may be the default in a browser, so
the margin and padding can be set as 0px for a default list of
elements.
What is CSS Alphabetizing, and why should we alphabetize it?Ordering the style elements within a CSS class by alphabetical order.
For example :-
.classUnorderedElements {
BORDER-RIGHT: #a52a2a 3px solid;
PADDING-RIGHT: 3px;
BORDER-TOP: #a52a2a 3px solid;
PADDING-LEFT: 3px;
Z-INDEX: 1;
LEFT: 50%;
FLOAT: none;
VISIBILITY: visible;
PADDING-BOTTOM: 3px;
MARGIN: 2px;
BORDER-LEFT: #a52a2a 3px solid;
PADDING-TOP: 3px;
BORDER-BOTTOM: #a52a2a 3px solid;
POSITION: absolute;
TOP: 21%;
BACKGROUND-COLOR: #ffb6c1
}
The above is an example where the elements within the class are un ordered alphabetically.
Why should we alphabetically order the elements within a css class?
It is easier to scroll through and debug specific elements in a css class when we come across it.
It is more time consuming to read element by element.
What is a CSS shortcut?
Example .longclass{
margin-top: 11px; margin-right: 11px; margin-bottom: 11px; margin-left: 11px;
}
Example .shortCutClass{
margin:11px;
}
The same can be said for padding and certain other attributes.
Should I group elements in one line when I write code or should I write each element in a separate line?
Write each style element in a new line, alphabetized in a new line.
.classOrderedElements {
BORDER-RIGHT: #a52a2a 3px solid; BORDER-LEFT: #a52a2a 3px solid;
BORDER-TOP: #a52a2a 3px solid; BORDER-BOTTOM: #a52a2a 3px solid;
BACKGROUND-COLOR: #ffb6c1
FLOAT: none;LEFT: 50%;
MARGIN: 2px;
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;
PADDING-TOP: 3px;
POSITION: absolute;
TOP: 21%;
VISIBILITY: visible;
Z-INDEX: 1;
}
Do Not Write as below, because certain editors may scroll all the way to the right. And it would be difficult to debug.
.classUnorderedElements {
BORDER-RIGHT: #a52a2a 3px solid; BORDER-LEFT: #a52a2a 3px solid; BORDER-TOP: #a52a2a 3px solid; BORDER-BOTTOM: #a52a2a 3px solid; BACKGROUND-COLOR: #ffb6c1
FLOAT: none; LEFT: 50%; MARGIN: 2px; PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px;PADDING-TOP: 3px; POSITION: absolute; TOP: 21%; VISIBILITY: visible;Z-INDEX: 1;
}
If it is an effective shortcut, which as follows, then that can be
combined in a single line, as long as it does not exceed the default
view port of an editor (80 columns)
.originalLongClass{
margin-left: 5px;
margin-right: 7px;
margin-top: 8px;
}
.newShortCutClass {
margin: 8px 7px 0px 5px;
}
What about performance, since new lines take up space and more time to download the CSS files each time?
That is the job of the compressor to do at build time when a product build is done. For development it should be a new line.
What is the difference between em's , pt , px and percent?
I wish I knew where I found this to give proper credit, please leave a comment and I will link to the appropriate post.
Meet the Units
- “Ems” (em):
The “em” is a scalable unit that is used in web document media. An em
is equal to the current font-size, for instance, if the font-size of the
document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so
2em would equal 24pt, .5em would equal 6pt, etc. Ems are becoming
increasingly popular in web documents due to scalability and their
mobile-device-friendly nature.
- Pixels (px): Pixels are
fixed-size units that are used in screen media (i.e. to be read on the
computer screen). One pixel is equal to one dot on the computer screen
(the smallest division of your screen’s resolution). Many web designers
use pixel units in web documents in order to produce a pixel-perfect
representation of their site as it is rendered in the browser. One
problem with the pixel unit is that it does not scale upward for
visually-impaired readers or downward to fit mobile devices.
- Points (pt):
Points are traditionally used in print media (anything that is to be
printed on paper, etc.). One point is equal to 1/72 of an inch. Points
are much like pixels, in that they are fixed-size units and cannot scale
in size.
- Percent (%): The percent unit is much like the
“em” unit, save for a few fundamental differences. First and foremost,
the current font-size is equal to 100% (i.e. 12pt = 100%). While using
the percent unit, your text remains fully scalable for mobile devices
and for accessibility.
__________________________________________________
a) How can I increase the font size of my entire site?
b) Accessibility?
c) Performance.
Yahoo has a CSS compressor that can be configured as an ant task.
d) Separate skins based on user preferences.
e) Separate CSS styles for structure and skin?
Do not combine colors or intermix colors in between structure and skin, also handle transparency.
Identify the structural CSS.
Identify the skin CSS that you want to apply for that stucture.
Further identify the background and foreground elements of that skin.
f) Separate container and content.Identify the container tags or style that will hold your content.
Identify the content tags or style that will hold your content.
g) DOCTYPE declaration and CSS compatibilities.
h) CSS Organization
The CSS classess within the document can match the typical layout of the website.
For example the bottom of the page is the footer and the top of the css file contains the classes for the header elements.
It can be grouped based on relationship and context.
It can be grouped based on page element based or section based.
In other words given an element we should identify where the matching css could be found quickly.
__________________________________________________
Credits and Useful Links
http://www.toxel.com/design/2009/01/11/top-50-best-css-articles-and-resources/
http://www.w3.org/TR/CSS2/selector.html
http://www.digital-web.com/articles/architecting_css/
http://net.tutsplus.com/tutorials/html-css-techniques/5-tips-to-writing-better-css/
http://www.w3schools.com/css/css_pseudo_classes.asp
