CSS Question
Out of context: Reply #24
- Started
- Last post
- 29 Responses
- epikore0
What's the best way to layout pages? Using floats and margins or something else? I'm new to CSS, and i'm trying to find the best way to lay pages out instead of tables.
BTW, I made this as a reference for anyone else new to CSS. Feel free to add stuff on:
EMBEDDING INTERNAL STYLE SHEET
<head>
<style type="text/css">
place code here
</style>EXTERNAL STYLE SHEET
<link rel="stylesheet" type="text/css" href="base.css"/>APPLYING STYLES LOCALLY
<p style="border:4px solid red">
</p>TARGETING BY CLASS
#classname {}
<p class = "classname">
</p>TARGETTING BY IDENTITY
#idname{}
<p id = "idname">
</p>TARGETING BY ELEMENT
p {}
h1 {
}
BACKGROUND
background-color: #000000;
background-image: url (tile.gif);
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
background-position: bottom left;
background-position: right; (left, center)
background-position: 20% 50%; (0%=left, 50%=center, 100%=right)(0%=top, 50%=center, 100%=bottom)
background-image: url (tile.gif) top left repeat scroll;
background-image: url (tile.gif) repeat-x center fixed;0 MARGINS
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}LINKS
a:link {
color: #000000;
}a:visited {
color: #000000;
}a:hover {
color: #990000;
}a:active {
color: #000000;
}SETTING ABSOLUTE SIZE
width: 300px;
height: 300px;SETTING RELATIVE SIZE
width: 85%;
height: 85%;FONTS
font-family: "Arial" sans-serif;
font-family: "Times New Roman" serif;
font-family: "Courirer" monospace;
font-size: 11px;
font-weight: bold;
font-style: italic;
text-align: left; (center, right, justify)
vertical-align: baseline; (sub, super, 30px, -200%, top, middle, bottom, text-top, text-bottom)
p { text-indent: 2em;}
letter-spacing: 0.5em;
word-spacing: 1.5em;
text-decoration: none; (underline, line-through, overline underline blink)
text-transform: lowercase; (uppercase, capitalize)BLOCK CONTENT BOX
padding: 10px;
border: solid fuchsia 10px;
margin: 40px;
border-style: solid; (outset, double)
border-top-style: dotted;
border-top-width: 10px;
border-bottom-style: dashed;
border-bottom-color: green;
border-left-width: 20px;
border-right: 30px solid orange;
border-color: red green blue yellow;
border-width: 20px 10px;
margin-top: 0px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 30px;
margin: 0px 20px 10px 30px;POSITIONING BOXES ABSOLUTELY
position: absolute;
top: 0px; right: 0px;position: absolute:
bottom: 0px; left: 0px;Z-SORTING
z-index: 4;POSITIONING BOXES RELATIVELY
position: relative;
left: -4px; top: -5px;FIXING CONSTANT POSITIONS
position: fixed;
top: 0;
left: 20px;FLOATING CONTENT BOXES
float: right;
float: left;
clear: right;
clear: left;
clear: both;CLIPPING AND HANDLING OVERFLOW
overflow: visible;
overflow: hidden;
overflow: scroll;REACTING TO INTERFACE EVENTS
#idname {background-color: blue;}
#idname:hover {background-color: green;}
#idname:active {background-color: purple;}REVEALING AND HIDING COMPONENTS
#idname {visibility: hidden;}
#idname:hover {visibility: visible;}FORMS
input
{
color: #781351;
background: #C9F;
border: 1px solid #9C6;
}input:hover
{
background: #000;
}.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9
}<form action="#">
<p>
<label for="name">Name</label>
<input type="text" id="name" />
</p><p class="submit">
<input type="submit" value="Submit" />
</p>
</form>