modern technology, technology news, technology: CSS BASICS

Showing posts with label CSS BASICS. Show all posts

Friday, April 6, 2012

CSS Tools

CSS and HTML

Although there is considerable overlap, you should see the CSS directs the war in general, while HTML is a sergeant in his trenches in your area to decide who does what and when.

Will find you the CSS files

You can use an FTP Client software - a free open source software such as Filezilla, or one provided by the web host as part of the package, to find the CSS files: they are called "something.css" very often "style.css. They can be a directory called CSS, or, if the CMS application for the Themes directory. If you open - but do not change - the file can be found in a long series of commands inside. two different groups:

1. They proceeded, "#", which is defined as "symbols"

2. They proceeded "." which is defined as "classes".

You can change the "class" is the page as often as you want, but id only once, so you - or the Site Building Software - use the id function to set up public pages and categories "to do more local changes.

Creating a Local. Css file.

I think it is always best to have a mess there. Css files, introduced by site-building software for the theme not only to put one more line:

@ Import "local.css";

To create a new CSS file in the same directory "local.css". When the file is newer than the existing CSS files from the browser to use the first event of a conflict.

Wednesday, January 25, 2012

All CSS Float Properties

The number in the “CSS” column indicates in which CSS version the property is defined (CSS1or CSS2)

Property	Description	Values	CSS
Clear	Specifies Which sides of an elements are not allowed	Left Right Both None Inherit	1
float	Specifies whether or not a box should float	Left Right None inherit	1

Saturday, January 14, 2012

Four different positioning method

Static positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page. Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed positioning

An element with fixed position is positioned relative to the browser window. It will not move even if the window is scrolled.

Example:

p.pos_fixed

{

position: fixed;

top: 30px;

right:5px;

}

Relative Positioning

A relative positioned element is positioned relative to its normal position.

Example:

h 2.pos_left

{

position: relative;

left: -20px;

}

h 2.pos_right

{

Position: relative;

left: 20px;

}

Absolute positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

Example:

h 2

{

position: absolute;

left:100px;

top:150px;

}

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements. The z-index property specifies the stack order of an element. An element can have a positive or negative stack order.

Example:

img

{

position: absolute;

left:0px;

top:0px;

z-index: -1

}

Tips for CSS Positioning

Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when elements content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.

Sunday, January 8, 2012

CSS Outline

An outline is a line that is drowns around elements to make the element stand out. However it is different from the border property. The outline is not a part of the elements dimensions, therefore the elements width and height properties do not contain the width of the outline.

CSS MARGIN

The CSS margin properties define the space around elements.

Margin

The margin clears an area around an element. The margin does not have a background color, and is completely transparent.

Border Width

The border-width property is used to set the width of the border. The width is set in pixels, or by using one of the three pre-defined values. Thin, medium, or thick. The border-width property does not work if it is used alone. Use the border-style property to set the borders first.

Example:

p.one

{

border-style:solid;

border-width:5px;

}

p.two

{

border-style:solid;

border-width:medium;

}

Saturday, December 10, 2011

CSS Id and Class

The id selector

The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a “#”. And the style rule below will be applied to the element with id=”paral”;

Example:

# paral{text-align:center;color:red;}

The class selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML Class attribute, and is defined with a. In the example below, all HTML elements with class=”center” will be center –aligned;

Example:

.center{text-align:center;}