Written by me@grafxflow
23 Sep, 2009
0
2,150
Thought I would put a few basics of CSS on the blog for beginners...
NAME |
DESCRIPTION |
USAGE |
span |
An inline tag which inserts a style inside a another tag such as a <p> |
<p>Here is some |
p |
CSS to set paragraph tag <p> |
p { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 120%; } |
body |
CSS to set body tag <body> |
body { background-color: #FFF; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #0F0; } |
h1, h2, h2 etc |
CSS to set header tags <h1> or <h2> or <h3> etc |
h1 { font-family: "MS Serif", "New York", serif; font-size: 12px; line-height: 140%; } |
div |
A block level tag which sets the style of a group of tags such as <h1> and <p> |
<div style="color: #F00"> <h1>Header</h1> <p>Here is some text</p> </div> |
.classname |
A class selector which sets the style of a tag such as <h1> and <p> |
.first_para { text-indent: 5em; } <p class="first_para">Here is some text.</p> |
tag.classname |
Same as above except more specific |
p.first_para { text-indent: 5em; } <p class="first_para">Here is some text.</p> |
tag#idname |
An ID selector which is the same as above except it can only be used once |
h1#first_header { text-indent: 5em; } <h1 id="first_header">Here is a header.</h1> |
NAME |
DESCRIPTION |
USAGE |
Absolute positioning |
Generates an absolutely positioned element, positioned relative to the first parent element that has a position other than static. The element's position is specified with the "left", "top", "right", and "bottom" properties *note needs a outer/container block such as a relative position to work correctly |
#page { position: absolute; } |
Relative positioning |
Positioning an element relatively places the element in the normal flow of your HTML file and then offsets it by some amount using the properties left, right, top and bottom. This may cause the element to overlap other elements that are on the page, which of course may be the effect that is required. |
#page { position: relative; } |
Fixed positioning |
Positioning an element with the fixed value, is the same as absolute except the parent element is always the browser window. It makes no difference if the fixed element is nested inside other positioned elements. Furthermore, an element that is positioned with a fixed value, will not scroll with the document. It will remain in its position regardless of the scroll position of the page. |
#page { position: fixed; } |
Float property for positioning |
The float property specifies whether or not a box (an element) should float. *note Absolutely positioned elements ignores the float property |
img { float:right; } |
23 Apr, 2018
12 Jan, 2010
25 Mar, 2010
I am a Full-stack Developer who also started delving into the world of UX/UI Design a few years back. I blog and tweet to hopefully share a little bit of knowledge that can help others around the web. Thanks for stopping by!
Follow11 Jul, 2023
21 Jun, 2023
Views: 166,435
Views: 40,390
Views: 37,139
Views: 33,666