Advanced CSS Tips & Tricks

Advanced CSSTips & Tricks

Short Hand Most people prefer to use the normal or “Proper” way of coding in CSS. But there is a shorter and faster way of doing it, called short hand. Example – Normal “Proper” Coding .content_text { FONT-STYLE: italic; FONT-FAMILY: Verdana; FONT-WEIGHT: bold; FONT-SIZE: 12px; LINE-HEIGHT: 1px; COLOR: #FFFFFF; } Example – Short Hand .content_text { font: italic Veranda bold 12px 1px #FFFFFF } As you can see this is much shorter in size and in the amount of time it would take to code. There are a few things to keep in mind, this will only work if a font family and font size or in this line of code. If they are not present it will not work. Also if you do not specify font weight, font style, or font variant then those values will automatically default to a value of normal.

Two Classes Together • Normally when we use a class within our HTML we only use one attribute or class to call from our CSS file. We can use multiple classes very easily. • Example <font class=”content link”></font> • Note that these two classes are separated by a space and not a comma. Keep this in mind you do not separate them with anything other then a space. When using two classes in the same attribute, if the same values are setup in both classes the class lowest in the CSS document will be used. • Let’s say that the “link” class is the lowest coded class in the CSS document, and both use a “font-size” value but they are different values. The “link” class will be used as it’s the lowest coded class in the CSS document.

Default Border Value • Normally when coding a border we would do something like this. • Example – Normal “Proper” Style H1 { BORDER-STYLE: solid; BORDER-WIDTH: 3px; BORDER-COLOR: #000000; } • Example – Short Hand H1 { solid 3px #000 } • Either one of these will output a black border that’s solid and is 3 pixels in width. We can do the same thing, but with even less code. Knowing the default values of each command is very useful knowledge if a user prefers short hand over any other method.

The default of a border is around 3 pixels to 4 pixels in width and will use the color of the text it’s surrounding. So if the text is black, the border will be black and around 3 pixels wide. The only thing we’ll need to specify will be the border style. • Example – Normal – Default H1 { BORDER-STYLE: solid; } • Example – Short Hand – Default H1 { border: solid }

ColoredScrollbars • This is thecodeyouneedto put in the <head> part of yourdocument, orintoyourexistingstylesheetifyouhaveone. • Applythe CSS attributes on your html tag as belowwillaffectallthescrollbars on yourpage, includinganyhorizontaland mini-scrollsthatappearfortextareasoriframes. html {scrollbar-base-color: #9999cc;scrollbar-arrow-color: white;scrollbar-track-color: #ccccff;scrollbar-shadow-color: black;scrollbar-lightshadow-color: black; scrollbar-darkshadow-color: gray;scrollbar-highlight-color: white;scrollbar-3dlight-color: black;}

Diagram scrollbar-base-color: red;scrollbar-arrow-color: white;scrollbar-shadow-color: blue;scrollbar-lightshadow-color: green; scrollbar-darkshadow-color: blue;scrollbar-highlight-color: yellow;scrollbar-3dlight-color: black;

Webpages Without Tables • Working with divs • The <div> tag was designed specifically to take over from tables as a layout tool. It is a block-level DIVsion element that can hold whatever you need inside it. You can have blocks of text in divs and then put them together in a layout. You have immense freedom, with the ability to add these blocks, or layers, on top of each other.

For display purposes, every element in a document is considered to be a rectangular box which has a content area surrounded by padding, a border and margins. • Margins are always transparent. Borders come in various styles. Background settings for an element apply to the the area just inside the borders which includes both the padding and content areas. For purposes of illustration however, the padding area is shown in a slightly darker color.

Floats • Floating is achieved by setting the float property on an element's style to either left or right. Special rules apply to floated elements. • When specified, the box is positioned vertically as it would be within the normal flow, its top aligned with the top of the current line box. But horizontally, it is shifted as far to the right or left of its containing block as possible, within that block's padding (just like other content). Surrounding inline content is then allowed to flow around the opposite side.

<p> <span style="float:right;width:40%;">content...</span> content content content content content content content content... </p>

Adjacent Floats • When two or more adjacent elements are floated, their tops are positioned on the same line (side by side) if there is sufficient horizontal space to accommodate them. If not, the latter element(s) are moved down to a position where there is sufficient space, always aligned with a line box.

The clear property can be used on a floated element to force it below adjacent floats (recall that floated elements are treated as block-level elements for positioning).

Since divisions are block-level (i.e. they default to 100% of the available screen width and add line breaks between each other), they will all just stack up underneath one another unless you position them in some way. The simplest way to do this is to use the CSS float property, the backbone of most CSS layouts. You can float any element left or right, and it will align itself over to the side of whatever element it is contained within. • To create columned layouts, you simply float all of the column divisions to the same side and they will line up beside each other, as long as they fit. • Laying out content in this way has immediate benefits such as progressive downloading (as the text is loaded it is displayed onto the page immediately, so your visitor can read as the page is forming around the text). • You can also give each column specific margins and padding, giving you greater freedom to space your content out.

Positioning Layers • To create what we call layers with the div tag, a code like this can be used: <div style="position: absolute; left: 610px; top: 80px; height: 400px; width: 100px; padding: 1em;">layer stuff</div> • First the position of the layer is specified, then its dimensions (which is optional, the layer will resize itself).

EXAMPLE • A basic three-column layout involves a CSS style sheet with separate rules for the layout and positioning of the left-hand column, the center column, and the right-hand column. We’ll call these three sections left, center, and right. Later, we’ll mix in the top and bottom areas. • Here is the CSS rule that defines the block whose identifier is left: #left { position: absolute; left: 10px; top: 10px; width: 200px; }

The center column of the three-column layout uses the following CSS rule: #center { margin-left: 220px; margin-right: 220px; } • Finally, a basic right-hand column looks much like the left: #right { position: absolute; right: 10px; top: 10px; width: 200px; }

www.glish.com • www.brainjar.com • www.w3schools.com • www.cssdrive.com

Advanced CSS Tips & Tricks