The Ultimate Quick CSS Guide

CSS – Cascading Style Sheets, the hidden heroes of the world wide web. These unsung heroes take a plain page of text and turn it into visually stimulating, aesthetically pleasing works of textual art. But what exactly is CSS and how do you use it? 

You needn't head off to Amazon or your local bookstore to drop $50 on a massive tome that will give you back problems. There's a very structured logic behind CSS and you can learn some of the basics in just a matter of minutes. While the scope of this guide will not give you magical powers over the layouts of your pages and allow you to make the most intricate and complex pages available today, it will certainly get you on your way.

The cascading part of the CSS is one of the most important. It means that instead of editing each and every page on your website manually to give them flair and style, you simply point them all to the style sheet and have them incorporate the styles. It has been one of the most important additions to HTML over recent years.

CSS Structure
First let's look at a very quick CSS section to get a feel for the structure of CSS and to see how it looks and what it means:

p
{
text-align:center;
color:black;
font-family:arial
}

 
CSS is made of 3 pieces a selector, in the example p for paragraph, the logical grouping on the HTML page. The second piece is property in the example text-align, color and font-family are all properties of the selector. The final piece is the value which is center, black and arial in the example. The standard format is Selector {property:value;} Each property must be paired with a value and closed with a semi colon. Each group of properties must be enclosed in curly brackets and the selector must be placed directly before the properties.

Every element on a web page can generally be styled in some way, whether it's where it shows up on the page, what color the text or the background is or what size. Here is a list of the most common and useful CSS elements that generally show up in every page of text:

Basic Concepts

Property Description
Grouping Multiple selectors separated by commas. Allows for assignment of properties to elements (selectors). H1, H2, H3, H5 { color: blue;}
Contextual selectors One or more selectors H1 B {text-decoration: underline;} Bold Header 1 will be underlined as well.
Class
(tag attribute)
A class selector is a name preceded by a period. Do not use the period when referencing the class. Called by using the class= attribute. Do not begin a class name with a number
.CSSguide {color: blue;}
class="CSSguide"
>This is blue.
ID
(tag attribute)
An ID selector is preceded by a hash mark (#), and is called using the ID= attribute. The hash mark does not appear in the value of ID. Works like the class selector except that the ID can be used only once in the document.
#Once {color: red;}
ID="Once"
>This can only be used once.
Comments
Anything between /* and */ will be a comment and have no effect on the page. Used to document changes etc. /* This is a comment. */
DIV and SPAN tags
A Div is a block where the content within can all be styled at once

Hello

SPAN is used for inline formatting inside of another styled element like a paragraph
This is blue in a regular paragraph
Shorthand
Many properties can accept a shorthand list of values. Values are read from the top clockwise.
Example:
DIV { padding: 5px 10px 5px 10px }
is the same as:
DIV { padding-top:5px; padding-right:10px;
padding-bottom:5px; padding-left:10px }

Background Properties

Property
Description
background
Sets any background properties in one selector.
background-attachment
Sets whether a background image is stationary or scrolls with the page.
background-color
Sets the background color of a selector. Accepts HTML color names and Hex Color code i.e. #ffffff
background-image
Sets the background image for a selector
background-position
Sets the starting position of a background image in pixels
background-repeat
Sets if a background image will repeat horizontally, vertically or not at all.
Border and Outline Properties
Property
Description
border
Sets all the border values in one property declaration
border-bottom
Sets all the bottom border values in one property declaration
border-bottom-color
Sets the color of the bottom border
border-bottom-style
Sets the style of the bottom border
border-bottom-width
Sets the width of the bottom border
border-color
Sets the color of the four borders
border-left
Sets all the left border values in one property declaration
border-left-color
Sets the color of the left border
border-left-style
Sets the style of the left border
border-left-width
Sets the width of the left border
border-right
Sets all the right border properties in one property declaration
border-right-color
Sets the color of the right border
border-right-style
Sets the style of the right border
border-right-width
Sets the width of the right border
border-style
Sets the style of the four borders
border-top
Sets all the top border properties in one property declaration
border-top-color
Sets the color of the top border
border-top-style
Sets the style of the top border
border-top-width
Sets the width of the top border
border-width
Sets the width of the four borders
outline
Sets all the outline properties in one property declaration
outline-color
Sets the color of an outline
outline-style
Sets the style of an outline
outline-width
Sets the width of an outline
Font Properties
Property
Description
font-family
Property to choose specific fonts from generic families: serif, sans-serif, monospace, cursive and fantasy. Selector {font-family: "Courier New”, serif;} Can be applied to any text Selector.
font-style
Selects between italic and normal. Selector {font-style: italic;}
font-variant
Choice of two values: small-caps and normal. Allows for special formatting, will probably expand eventually beyond just 2 choices. Selector {font-variant: small-caps;}
font-weight
Values are: bold, normal, lighter, bolder and numeric values 100-900. Selector {font-weight: 700;}
font-size
Sets the absolute size (pt, in, cm, px), relative size (em, ex), or percentage of normal size.
Can be size: xx-large, x-large, large, medium, small, x-small, xx-small, larger, smaller or numeric value. Selector {font-size: 200%;} Selector {font-size: 36pt;} Selector {font-size: x-large;}
font
Sets all font values in one property declaration. Best order of values is
font {font-style font-variant font-weight font-size/line-height font-family;}. Not all are necessary Selector {font: bold 16pt “Times New Roman”;}
Dimension Properties
Property
Description
height Sets the height of a selector
max-height Sets the maximum height of a selector
max-width Sets the maximum width of a selector
min-height Sets the minimum height of a selector
min-width Sets the minimum width of a selector
width Sets the width of a selector
List Properties
Property
Description
list-style Sets all the properties for a list in one property declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies where to place the list-item marker
list-style-type Specifies the type of list-item marker
Margin Properties
Property
Description
margin Sets all the margin properties in one property declaration
margin-bottom Sets the bottom margin of a selector
margin-left Sets the left margin of a selector
margin-right Sets the right margin of a selector
margin-top Sets the top margin of a selector
Padding Properties
Property
Description
padding Sets all the padding properties in one property declaration
padding-bottom Sets the bottom padding of a selector
padding-left Sets the left padding of a selector
padding-right Sets the right padding of a selector
padding-top Sets the top padding of a selector
Positioning Properties
Property
Description
bottom Sets the bottom margin edge for a positioned selector
clear Whether a selector allows floating elements on the sides or not.
cursor Specifies the type of cursor to be displayed i.e. crosshair, help, wait
display Specifies the type of box a selector should generate
float Specifies whether or not a box should float
left Sets the left margin edge for a positioned box
overflow Specifies what happens if content overflows a selector's box
position Specifies the type of positioning for a selector
right Sets the right margin edge for a positioned box
top Sets the top margin edge for a positioned box
visibility Specifies whether or not a selector is visible
z-index Sets the stack order of a selector like layers above or below others.

For further information there are a great amount of resources online including those that were drawn upon for this article.

0 comments:

Post a Comment