HTML.co.uk

Two models float and position

On the WebPages, there are 2 models for positioning the content. Both the models are valid and it is always best to use two models to layout the WebPages with CSS.

Float

Float takes out the element from the normal flow of the WebPages and has many other elements around it. It is seems confusing to use CSS for layout at first but is can satisfy you once it is completely understood.

Position

When people think of CSS positioning, position is the one that is thought by everyone. This defines whether the element is in fixed, absolute, relative or static position.

CSS Position Properties

As it is mentioned above, if you have decided to position the pages within the position property, you need to use at least one of the style properties in order to define where the elements should be placed.

Bottom

The element should be placed at the location up from bottom of the browser. One thing that is to be noted is, if the negative values are used in these positions, you have to move the elements in opposite location.

Left

The element can be placed over from the right side of the window.

Right

The element can be placed from right side of the window.

Top

The element can be placed down from top of the window.

CSS Positioning – it is not Really Alignment

There were no many ways to position the items on the screen when HTML came first. Few of them were the align attribute that allowed to position the element related to its current position. In favor of the style sheets, the attribute has been deprecated. There are two attributes and among that, only one works for the text.

Text-align

This does all the things that you would expect from an align-attribute. It helps you to align the text to center, right and even justify. However, this works only with the text.

Vertical-align

This allows you to align the inline element to baseline top, bottom, middle and many other positions.

Position the Things on Top one after another

When positioning the elements, there are some chances that one element will overlap another. On the normal course of events, browser will put up the thing that comes first at the bottom. However, with Z-index property, you will be able to push the elements to other location

Z-index

This defines the stack order of the elements.

After positioning, give shape to elements

In order to define the shape of the elements, there are two properties. The content in the element is clipped so that it fits the shape.

Clip

Shape of the element is defined by clip. Usually, this amounts to height and width of the rectangle. If the content is longer, then it will be clipped.

Overflow

This tells the browser that, what should be done if the content is not fitted in the area that is clipped. The content can be hidden and it can be continued as usual.

Outline property of the CSS is a confusing property. When this property is learned first, it is hard to understand how the CSS Outline property is even remotely different from border property. WWW explains that it has the following differences.

• Space is not utilized by Outlines
• Outlines can be non-rectangular as well.

Outlines don’t take up space

The above statement is confusing. Just think that how objects in the webpage cannot take the space on WebPages. The outline property does not take the space because it will always be placed on top of the element’s box.
Around an element, if an outline is placed, it does not have any kind of effect on how the elements are placed on the page. It will not change the position or size of the element. If the outline is put on the element, it will surely take the exact amount of the space, as it did not have any outline on the element. In the border’s case, this is not true. On an element, a border is added on the height and outside width of the element. Therefore, if there were 50-pixel wide along with a 2-pixel border, then it would take 54-pixels. The same image along with 2-pixel outline will take only 50-pixels width on the same page and the outline will display the images outside edge.

Outlines May or may not be Non-Rectangular

Whenever you put up the border on the element, the browser will interpret the elements as if they were one of the giant rectangular boxes. If the box is split over many lines, the browser will just leave the edges open, as the box is not closed. It is as if a browser is seeing the border along with a wide screen, which is too wide to be measured. The wide screen is wide enough for the border to be continuous rectangle.
In contrast, the edges are taken into consideration by the outline property. If the outlined element is spanned over several lines then the outline will close at the line’s end and again re-opens on the next line. If it were possible, then the outline would definitely stay fully connected and thus it creates a non-rectangular shape.
The outline property must be seen and it must be compared with the border property.

Uses of the Outline Property

Searching the items is the best use of the outline property. Most of the websites will do this using a background colour. However, the outline property can also be used and you need not worry about adding the extra spacing on the pages.
Outline colour property will accept the term ‘invert’ that will make the outline colour the inverse colour of current background. This will allow you to highlight the elements on the dynamic WebPages even without the need to know what are the colours used.
Around the active links, there would be some dotted lines and to remove them the outline property can be used.

CSS line spacing is obtained by using CSS-line height property. This has five different values

Normal – a browser will determine the value of the line spacing that will be related to font size. Usually, this is same as that of the font size or it is slightly larger

Inherit – line spacing must be taken from parent’s elements line spacing. Therefore, if you set up the line-height of the body tag to about 30% larger than that of the font size and paragraphs tags inside will inherit and then they will have line height of 30% larger than that of the font-size as well.

A number – if these line height values doesn’t have u nit of measure, then would be considered as the font size for line height.

A length – if these line height values has unit of measure then that will be the exact amount of space, which should be there between the lines.

A percentage – if line height is percentage, then that percentage would be the font size percentage. Therefore, if a line height were 125% then it would be 25% larger than that of the font size.

Which is the value that should be used for CSS Line Spacing?
In the majority of the cases, one of the best choices for the line spacing is to set up the default spacing or normal. The default or normal are generally readable and it doesn’t require any special things to be done. However, if the line space is changed, it gives different look to the text.
If the font size is defined as the percentages or ems, then the line height should be defined in the above stated way.
Set up the height for the print style sheets along with a point value. Print measure is the point and the font sizes should be in points.
Few people do not make use of number choice, as it is confusing to people. Most of the people think that number is perfect size and because of that they make it large.

How much space must be used for the line spacing?
As it is mentioned above, it is always recommended to use the default size in line spacing and if you want to change the line spacing, you should have some specific reasons to do. There are different affects while changing the line spacing
It is difficult to read the text that is too tight together. However, the mood of the text will be affected by the small line spaces. If the entire text is crunched altogether, then it is able to sense the text tenser or seem darker.
It will again be difficult to read the text, which is farther apart. However, if there are wide line spaces, then the text seems to flow.
Changing the line space will be able to make the text otherwise would not fit in the space be compact or would take large space in the designs.
If you want to see what will happen in the various line spacing options, you have to check the examples of CSS Line Spacing.

For you to store style information there are three places. For all the three places, the syntax will be the same but for the sake of clarity, here we are going to discuss the styles that are placed in of the document.

Rules

1.The entire style information must be stored within the </style> and <style> element. By doing so, browser will come to know that the information stored is for styles.
2.you have to include type attributes always
This attributes will indicate what type of style rules you are going to use. The style that is commonly used is CSS but other than CSS, there are other types as wee such as (JSS, XSL and many others).
3.In the comment tags, enclose all the style rules

By doing so, it ensures you that the older browsers even by mistake will not display style rules.

Mainly, the style rule is comprised of 2 things, the declaration and selector.

Declaration - this is a specific style call that will be helpful to affect the selector

Selector – this HTML element is the one that will be very much affected by the rule.

The syntax for the style rule will be ‘selector {property: value ;}’

So, in order to set all the bold text into red, you can write ‘b {colour: red ;}’

The thing that makes the usage of CSS very easy is that you will be able to group the components together that you like to have the similar style. Take for example: if you want all the H1, H2 and the entire bold text in red, you can write

‘b {colour: red ;}’
‘h1 {colour: red;}’
‘h2 {colour: red;}’

however, with the help of grouping, you will be able to put all of them on the same line.
‘b, h1, h2 {colour: red;}’
you can even group the rule together. Take for example, in order to make all the h3 text blue and font in Arial, you can write
You can also group together rules (separated by a semi-colon (;) ). For example, to make all h3 text blue and Arial fonts, you would write:

‘h3 {
font-family: Arial;
colour: blue;
}’
Just for convention, we can put all the rules in separate line but it is not very much required.

Some Common Styles
There are different font attributes that are used commonly.
Font family – this specifies the font face that to be used.
Font-size – it will specify the text size.
Font-style – it will specify whether the text will be displayed in normal, oblique or italic.
Font variant – it will specify whether the text to be displayed in normal or small caps.
Font-weight – it will specify how dark or light the text will be
The other style that is commonly used is the ‘text-decoration’. Along with this tag, you will be able to remove underlines from various links, put the lines through the marked out text or else can make the text blink.

External Style Sheets- Advantages and disadvantages
The best thing that is very good about the Cascading Style Sheets is that you will be able to use them in order to keep your website consistent. One of the easiest ways to do this is to import or link an external style sheet. If the same external style sheet is used in every page of your site, then you will be sure that all the pages of the site will have the same style.

Advantages
At once, you will be able to control the feel and look of many documents. This will be very much helpful if you work with a team of people. It is hard to remember many style rules and while you may have printed the style guide, it is pretty tedious and inefficient to continuously flip through it in order to determine.
You will be able to create classes of some styles that can be easily used on many elements of HTML.
You should not give emphasis to different things on the pages if you use the special windings often, you will be able to use windings class set up in the style sheets in order to create.
The styles can be easily grouped to be much more efficient.

Disadvantages
The external style sheets increases that download time, when they are large enough
The complexity of the site will be increased if you have less number of styles.
Just like the table rendering, you have to still wait until the whole style sheet is loaded prior to the page display
These sheets get big quickly as it is hard to tell when the style is no longer will be in use as it is not deleted when the pages are removed.

Creating an External Style Sheet

These sheets are created with very much similar syntax to the document level style sheets (in the <head>). You have to include both the declaration and selector as well. The syntax for the rule will be ‘selector {property: value ;}’.

These rules must be saved into the text file with an extension of .css. Actually, this is not required but it is good habit so that it will easier for you to recognize the sheets in the listing.

Once the style sheet document is ready, you have it to the WebPages and this can be done in two ways:

1. The HTML tag <link> should be used to link the style sheet. This has some attributes such as href, type and rel. rel tell what you are going to link, type defines the MIME-type and href will be the path to .css file.

2. Importing

Within the document level sheet, you can use an imported sheet so that you will be able to import the attributes of the external style sheet while you will not lose any specific documents. This can be called it in the similar way in calling the linked style sheet but it must be within the document level style.

Advantages and disadvantages of using the external style sheets
The finest things that cane be done using this Cascading Style Sheets is that it would help you to keep your site in consistent. The simplest way to keep the site in consistent is to import an External Style Sheet or link the site. If the same external style sheet is used for each and every page of the site, it is sure that all the fonts of the site will be same.

Advantages of using the External Style Sheets
At once you can control the feel and also the look of many documents.
If you work with a team of people to create a Website, especially the External sheets is very much useful. Several style rules is pretty difficult to bear in mind and if you might taken a printed style guide and it is tedious and inefficient to be continuously go on flipping through out in order to determine if at all a example text has to be written in 14 point courier and 10 point Arial font.
You can even create classes of more styles that can be used on with various HTML elements as well.
If you want your fonts to be more efficient, you can easily group it.
All of the grouping methods that are used in CSS also can be used in this External Style Sheets as well and also this even provides you more flexibility with on your pages.

Disadvantages of using External Style Sheets:
If these External style sheets are very large, the download time will be increased.
They can increase the proximity of the site if there are small numbers of font styles.
These External style sheets get larger pretty quickly as it’s very hard to tell whether and when a style is no longer in use as it is deleted when the page s shut down or closed.

Creating an External Style Sheet
These External style sheets are produced or generated with a related syntax to the document level style sheets. Though all of the things that you need to include are the declaration and selector the syntax for the rule is and it is just like the document
Selector (property: value ;}
This rue has to be saved into a text file along with the extension of .css. Actually this is not required, but having this habit is good. By using this, you will be able to immediately recognize your style sheets.
You can link the style sheet documents in 2 different ways.

Linking
to link a style sheet document, use the HTML tag

Importing
Within the document level of style sheet, you can import the style sheet and with this you can import any URL and continue the style attributes of the External Style Sheet even without losing any document.