in general, data, and the surrounding tags, goes in your HTML, layout goes in the CSS; style sheet.
HTML – CSS
“In code terms, data is what goes in your HTML. If it’s not text, images, content, strip it out of there. Layout is what goes in your CSS. Colours, fonts… tone rate & gender for voice readers… you name it, that all goes in CSS files.”
Block-level Elements
One of the most common mistakes a newcomer to Web design makes is trying to set a width on an inline element. This is because inline elements don’t have widths or heights. That is, they do, but the width and height is set by the container box.
Note: IE incorrectly applies some of these properties even to inline elements. But you shouldn’t rely on that to remain, as it’s not standards compliant.
So if you need to define the width or height that some text should take up, you need to apply that to the block-level element containing your inline text.
Changing the Type of an Inline Element to Block and Vice Versa
With CSS you can change the type of an element from inline to block or the reverse with just one CSS property:
display: block;
display: inline;
display: none;
The CSS property display lets you change an inline property to block or a block to inline or either of them to not display at all.
When to Change the Display Property
In general, leave the display property alone, but there are some cases where turning a block-level element into an inline and vice versa can be useful.
* Horizontal list menus – Lists are block-level elements, but if you want your menu to display horizontally, you need to convert the list to an inline element, so that newlines aren’t added between each list item.
* Headers in the text – Sometimes you might want a header to remain in the text, but have the HTML header values. Changing certain h1-h6 values to inline will let the following text flow next to it.
* Removing the element – And of course, if you want to remove the element completely from the document flow, you can set the display to none.
It used to be that tables were used to position everything in boxes-blocks, now the move is to DIV tags.
Anything that could be “boxed” with a table, can now be positioned with divs. They load far faster than, tables. Tables do not display on-screen until they have been downloaded in their entirety. With DIV layers, it will start displaying as soon as any part of it is downloaded.
Without CSS, your choices for borders were those crappy grey ones that surrounded tables and frames. Now however, since page presentation has become such an important aspect of web-design, stylesheets allow you lots of variety in your borders, and you can have custom rounded corners! – notice our rounded box corners here. no images, just css tags! [like border-radius: 15px;]
to create a layer (DIV), with a background color that is semitransparent
.transparent {
filter: alpha(opacity=50); /* ie */
opacity: .5; /* mozilla & firefox */
background:#ccc;
}
!important
!important is not a property nor is it a value. It’s more of a “declaration”. Its function is to set overriding precedence when there are conflicts in properties between competing classes. An “!important” declaration takes precedence over a normal declaration.
example, to force the color which is also being controlled elsewhere:
#comments em
{
color: #005500 !important;
}
Issues:
IE does not implement html-css properly. In a nutshell, according to the W3C, width and height properties define the width and height of the content of the box. Items like padding, border, and margin surround that width and height.
Some versions of Internet Explorer instead define the width and height as the width and height of the entire element, including padding, and border. Even version 8 will still fail to render some instances of margin settings!
If you want your designs to look the same in all browsers, you have to employ tricks and sometimes hacks to get IE to work correctly.
Word to the wise, download and use anything but I.E.
- Internet Explorer 8 hangs frequently, takes much time to load, Shuts Down when Searching, and breaks other applications.
Windows incompetent programming does more than make it difficult to display pages correctly, it also makes it an “open window” for hackers to break into. Crashing your hard drive has become the least of your worries. Now, well financed, ‘mafia-like’ organizations write code to your computer that records your every keystroak including id’s and passwords to your bank and savings accounts. They will steal all you have and never tell when or how they did it.
Better yet, download and install Ubuntu along side windows, and only go back to windoze when you have to.