All Entries in the "CSS Hacks, Tips and Tricks" Category
Working with line breaks in Expression Web
The basic formatting techniques like Line breaks, white spaces and indentation make your web content stand out and look clean and neat. The HTML <br> tag is used to add line breaks in your page. See below: marks denote line breaks. To view line breaks or other Formatting marks in Expression Web, go to View [...]
Get rid of the dotted border from a focused hyperlink
You must have observed this behavior that when you click on a hyperlink it is surrounded with a dotted border as shown in the image below: I observed this behavior in Internet Explorer 8 and Firefox 3.0 and above. I also tested the behavior in Safari 4.0.4 and Google Chrome 4, but they did not [...]
Difference between Screen Tips and alt attribute
Many designers and users are confused about the difference between a screen tip/ tooltip and the alt attribute. A Screen Tip or Tool Tip gives some description about a link, menu or an item. Whereas an alt attribute is used for accessibility for those users who do not have the ability to view images or [...]
To add a shadow to a box using CSS 2.1
In my previous article; ‘To add a shadow to a box using CSS 3 using the box-shadow property’, we explored the box-shadow property in CSS 3, available in browsers like Safari 3+ and Firefox 3.5+. But plenty of users use Internet Explorer, Chrome, Navigator and such other browsers. How can we have a shadow effect [...]
To add a shadow to a box using CSS 3 using the box-shadow property
One of the best features of CSS 3 is box-shadow that allows you to add shadow to any element. The property is at present implemented only in Safari 3 onwards and Firefox 3.5 onwards. An example of the output generated by this property is shown below: Isn’t it spectacular? And this is possible with a [...]
Class Selectors
We learnt what ‘Element Selectors’ are and how to group declarations and selectors, in our tutorial Element Selectors in CSS. But as you advance in HTML and CSS, you will need more specialized rules to style an element. Apart from document elements (element selectors) there are two other types of selectors you can define on [...]
Universal Selector in CSS2
CSS2 had introduced a new selector, the universal selector to match any element in your page. The selector is indicated as an asterisk ‘*’. The universal selector could be used to list every element in your page. For example, * {font-size: 12px} This declaration would set the font size of all the elements used in [...]
Element Selectors in CSS
Why is CSS preferred by all the designers? Well that is because of its ability to separate presentation from the content and most importantly its power to edit the document style by changing a single line of code. Don’t believe me? Find it yourself! An element selector is an HTML element. There are other types [...]
Most used values of the 'display' property in CSS
The display property defines how HTML elements should be displayed. display: block The element will generate a block around it with line break before and after the element. display: inline The element will generate an inline box around it, which will be in line with rest of the content. display: inline-block The element [...]
Classification of elements in CSS
A document is structured by it elements. The HTML elements that we commonly know are p, div, table, headings, span and many more. In CSS (2.1) each element has its own box that contains the element’s content. Hence these elements are broadly classified as: Replaced and Non-replaced elements Block-level and Inline elements This classification is [...]
