CSS Tools

CSS is one of the more obscure first letter of the series to face newcomer building a website: FTP, HTML, CSS. The initials stand for the CSS "Cascading Style Sheets", although quite why the originators of the Internet decided to do so in a vague expression of a simple concept is beyond me. All will become very clear, then broke up phrase:

Style Sheets

Style sheets what it says on the box: they set the style of a Web page. They have the whole site, which is applied equally to each page of your site so that you do not need to set up styling of every page of your site.

Style File fix the width and the number of columns, background color, text size and font, etc.

Cascading

Cascading refers to the order in which the style sheets - if you have more than one - and read the weight, when two or more styles seem to be inconsistent. In general, the last one is a priority. This allows you to override the standards established in the Site Building the software, either generally or locally.Read More

Turning off Float- Using Clear

Elements after the floating elements will flow around it. To avoid this, use the clear property. The clear property specifies sides of an element other floating elements are not allowed. Add a text line into the image gallery, using the clear property.

Example:

.text_line{clear:both;}

How Elements float

Elements are floated horizontally; this means that an element can only be floated left or right, not up or down. A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element. The elements after the floating element will flow around it. The elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it, to the left:

Example:

Img

{

Float:right;

}

Floating Elements Next to each other

If you place several floating elements after each other, they will float next to each other if there is room. Here we have made an image gallery using the float property.

Example:

.thumbnail

{

float: left;

width: 110px;

height: 90px;

margin: 5px;

}

Hiding an Element-display: none or visibility: hidden

Hiding an element can be done by setting the display property to “none” or the visibility property to hidden. However, notice that these two methods produce different results. Visibility: hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.

Example:

h 1.hidden{visibility: hidden;}

display: none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as the element is not there.

Example:

h 1. hidden{ display: none;} Read More