CSS tips and tricks, CSS tutorials, CSS discussion, CSS questions and answers

Import vs Link

We can import or link the external style sheets in our global style sheet, a sub section style sheet could be linked on any specified page where we need to use it or we can choose to import it instead of linking it, it is confusing what we really should use to call an external style sheet.

Placing Comments in CSS

Comments are the text we place in style sheet to help us read the style sheet in future and we do not want the browser to read it or render it, so we place it in special way to hide it from browsers, adding comment is good way to arrange the code and to make some one else understand the code.

Font-Family and Style in CSS

Using the font-family to have backup if browser doesn’t support the primary font and styling the font.

Three column fixed website layout

Three column layout for the websites is common now a days most of the blogs uses three column layout which places additional contents side by side to the main contents of the website or it is used to place advertisements or quick links besides the articles. Achieving this layout is easy, you can use this example to create your own three column layout for any website.

Styling iFrames in CSS

iFrames are also known as inline frames and now a days there is no use for such tags but still there may be a condition where you have to use inline frames. CSS allows us to dress the iframe some bit to make it look better. But still it is not a good tag to be used in this generation of websites.

All Caps with CSS

Text-Transform command is used to capitalize the text in any other case to upper case, headers are place where capitalization is frequently used in websites. And to assure that your header is displayed uniformly throughout the site without having to worry about actually writing in all caps, use CSS.

Formatting Text in CSS

Text format and colors makes webpage theme nice and clean, we can keep single theme on whole page or web by utilizing it.

Styling the Table in CSS

Styling the table and cells using CSS, changing the border color applying padding and choosing font color as well as font alignment in the table.

Transparent Image in CSS

How to make image transparent in current and previous versions of browser and creating hover effect with it.

Focus Property in CSS

Changing the style of fields when user interact with them like sign up forms fields which changes the color of back ground when user click to type text in it.

Call an External Style Sheet

Usually we define the styles in separate style sheet with extension of .CSS but to attach them with HTML document we need to call the style sheet using link or import method, both are used for calling the external stylesheet and attach it to HTML document after which HTML document can use it as it is coded in same file.

Odd or Even Rows

CSS3 introduced us several new selectors and arguments one of them is add and even argument which let us define style for even rows or odd rows and we can define both for same tag as well, in result we have to code so much lesser to achieve the style we need.

Different Border style on each side

CSS allow us to place four style on four sides of the border around any element just like the colors.

Reset CSS

if we do not define certain properties in CSS browser applies default values to those properties to avoid such circumstances we use to define the reset.css which is good to start over with CSS styling, by doing so we reset the several properties of dozens of tags, you can download a copy of reset.css here.

Layers on Layer in CSS

Placing layers over layers using z-index, it is useful to overlap layers of image and other elements to make better effects.

Link Box or Vertical Menu

Using CSS anchor styling to style the simple text link and form a vertical menu or the button for form.

Simple CSS Gallery

Developing a simple image gallery with hover effects using CSS, gallery is good to display image as it looks cool and save alot of bandwidth as will.

Outline around the element

Outline can be style just like the border and outline can be used with border to create more better effect.

Change Mouse Cursor in CSS

We can choose cursor to be changed on hovering any kind of element, or prevent changing it on some situations.

CSS syntax for newbies

How to read the CSS for newbies. CSS uses group styling as well as shorthand or nested styling.

Four Colors on Four sides Border

We can choose color for each side of the border to make it look better and customize it as we want in CSS3.

Difference Between ID and CLASS in CSS

Difference between the Class and ID which are custom selectors to define styles but have some restrictions.

Fancy Tables in CSS

Here are some handy CSS tips to create nice and color full table using CSS.

Mouse Cursor Styles in CSS

CSS allows us to change the cursor style on certain events, we can use more than one dozen styles to switch to on hovering.

Adding Quotations using CSS

A very handy tip to add quotations inside another quotation by using lang selector with q selector

Adding Auto Bullets Before Headings

Putting bullets before h1 headings automatically using CSS content property with :before selector

Extracting Attributes of Selectors using CSS

Extracting the attribute from selectors like extracting the anchor’s href from text

Pure CSS Horizontal Menu

Pure Horizontal CSS menu with hovering and active menu effect.

Some tricks with First Child property of CSS

First child is pseudo class which selects the first tag in the body and change its style to what ever we want.

Using CSS Selectors

CSS selectors with their description and usage examples and version of CSS they were introduced in.