Table of Contents

 

In the lesson we will talk about typical CSS constructs, which are very common for a developer in various projects. A convenient list in order to simply copy a typical piece of code to your file at the right time and add small modifications in accordance with the sketch of the project.

Rounded corners:

popular browsers today support rounding corners, you can achieve them on your site as follows:

 

Fix Internet Explorer 6/7 Double Indentation/Margin Bug:

 

A known bug occurs when a floating element aligned to the right/left has a value for the margin/padding property. To fix it, you need to add display: inline .

 

 

Font property definitions:

makes life much easier when font properties are collected in one line:

 

 

Change the color of the selected text:

In code, you can change the highlight color of the text to red, but the font color of the selected text remains white:

 

Centering a div element of unknown width:

 

Because IE6 and IE7 do not support the display:table property, you can use an alternative method:

 

 

CSS

 

The advantage of using the min-height attribute:

IE6 treats the last property in the same way that other browsers perceive the min-height property:

 

Reset CSS styles:

To start creating, you need to create a CSS file with the reset code, which can be selected from a very extensive list.

CSS3 properties for text and element shadows, gradients, and transformation:

Shadows that support different browsers:

 

Text shadow as a one-pixel-wide white stroke:

 

 

A good gradient for the background:

 

 

Transformation to share with the hover pseudo-class:

 

Replacing text with an image:

This technique allows you to save text for search robots, while the image will be displayed on the page:

 

 

This lesson is over, of course there are more of these constructions, and each has its own selection, leave comments, and contribute to the development of the lesson.