Advanced CSS Tips & Tricks
advertisement
Advanced CSS
Tips & 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 }
Colored Scrollbars
This is the code you need to put in the <head> part of your
document, or into your existing stylesheet if you have one.
Apply the CSS attributes on your html tag as below will affect all
the scrollbars on your page, including any horizontal and miniscrolls that appear for textareas or iframes.
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 blocklevel 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
![[#PFR-664] [ACCESS] Using em, percent, named for font sizes and](http://s3.studylib.net/store/data/008524257_1-e1b711369b412e0cc1e52963d3e370f9-300x300.png)
