Sierra's Column: Free CSS Cheat Sheet - How to Use Cascading Style Sheets

#CSS #WebDesign #Geek #Blogging #Code #ScriptKitty #HowTo #DIY #HTML #Technology #CheatSheet

You've probably heard that CSS makes building web pages a lot easier. But how? Basically, CSS is a giant shortcut. It allows you to use one file to dictate the style of your entire webpage, instead of adding attributes to every single HTML tag. By telling the computer what to modify, and how, you save typing, save computer memory, and save a ton of hassle if you ever decide to change the style of your web page.

Contained in this FREE guide:
You Make The Rules -- What CSS is and how to write it

Adding CSS To Your Page -- Three ways to utilize style sheets

Custom Selectors -- Use variables to stylize <div>...</div> tags & more

Cheat Sheet -- a HUGE glossary of code based on my own personal cheat-sheet

You Make The Rules

CSS stands for Cascading Style Sheet. CSS code lists the attributes given to a specific element of the page. All you have to do is tell the computer what you want to change, which part, and how; using words and punctuation that it will understand.

When you write CSS, the computer is asking you three questions: "What do I change?" "Which part?" and "How?" You can answer these questions by writing a CSS Rule, consisting of a Selector, and a list of Declarations that each contain a Property to be defined, and a Value that defines it.

Example 1: A diagram of a CSS Rule

A CSS Rule asks three questions: What do I change?{Which part?: How?;}
This Rule will tell the page to make all text inside <h1>...<h1> tags colored blue, and 25 pixels tall.

A Selector tells the computer what to change.
A Property is the part of the declaration that tells the computer which part of the selector shall be changed.
A Value is the part of the declaration that tells the computer how the Property shall be changed.
A Declaration is a code that contains Property followed by a colon, and a Value followed by a semicolon, as shown above.
A Declaration Group is a list of one or more declarations enclosed in curly brackets, as shown above.
A CSS Rule consists of a Selector followed by a declaration group, as shown above.

Adding CSS To Your Page

A CSS document will consist of one or more Rules. It's written in plain text, like HTML, and is saved with a .css extension. This is called an External Style Sheet, and may be used in an HTML pages by linking to the .css document between the <Head>...</Head> tags, as shown below.

Example 2: Link to an External Style Sheet

External Style Sheets are convenient because they may be used in more than one HTML document; allowing you to apply the same style to as many pages as you want, and keep your website looking consistent. Additionally, by using the same style sheet for several pages, you need only edit one document (the CSS document) to change a stylistic element; rather than making the same change over and over again on each page.

Sometimes, however, you may wish to add CSS directly to the page, without linking to an External Style Sheet. There are two ways you can do this. One way is by adding an entire style sheet between the <head>...</head> tags with an Internal Style Sheet. The other way is by adding a definition group (without the curly brackets) directly to an HTML tag by using the style="..." attribute; which is called an Inline Style.

Example 3: An Internal Style Sheet with the <Style>...</Style> tags
<Head> <Style type="text/css"> YOUR CSS RULES HERE </Style> </Head>

Example 4: Inline Style with the style="..." attribute

When using style sheets, remember that the computer reads information from left to right, and top to bottom, like us. Therefore, if there are two different CSS rules being applied to a single tag, the one that appears latest in the HTML document will apply. This can happen when, for instance, you are using an External Style Sheet, but choose to use Inline Style for a tag later in the document. This type of override only applies to the changes specified in the later code. All other effects of the previous CSS will still apply to the rest of the document.

Custom Selectors

There are actually three different kinds of selectors. HTML tags may be used as selectors, as you have already seen in the previous examples. However, you may also create custom selectors using an ID, or a Class. You may give your ID or Class a customized name, and add that name to a corresponding attribute in your HTML document. The rule containing this custom selector will then define all the relevant characteristics of the tag to which the corresponding attribute is added.

Example 5: An ID and its Corresponding HTML Attribute

CSS: #yourUniqueName{Property: Value;}
HTML: <div ID="#yourUniqueName">...</div>

An ID is a selector that specifies a single element on a page. There may only be one corresponding HTML attribute per ID selector. An ID must be preceded by a number symbol (#), may not contain spaces, and may not begin with a number.

Example 6: A Class and its Corresponding HTML Attribute

CSS: .yourUniqueName{Property: Value;}
HTML: <div class=".yourUniqueName">...</div>

A Class is a selector that may specify multiple elements on a page. You may use as many corresponding HTML attributes as you want. A class must be preceded by a period (.), may not contain spaces, and may not begin with a number.

Cheat Sheet

This is a cheat sheet for CSS Properties, and the values they accept. Most of them do just what they sound like they do. However, some things such as measurements and color values may seem unfamiliar. If you're unsure about what a particular command does, please refer to the notes in italic text, ask a question in the comments, or even experiment with it on your own!

This cheat sheet also contains shorthand CSS, which is a special type of property that can accept several different values at once, as shown below. Some people like to use shorthand CSS because it loads faster, and it's quicker to type. Remember that later code will override previous code, and that the computer will count an unspecified value as a ZERO value. Shorthand properties will be highlighted in yellow.

Example 7: Normal CSS compared to Shorthand CSS

Normal CSS: Selector{Property: Value;}
Shorthand CSS: Selector{Shorthand-Property: Value1 Value2 Value3 Value4;}

CSS for Backgrounds and The Mouse

background -- Shorthand CSS that affects the background of its selector

any background-color value
any background-image value
any background-repeat value
any background-attachment value
any background-position value
inherit

background-attachment -- affects whether the background scrolls with the page

scroll
fixed
inherit

background-color -- changes the default color of the background

an RGB color value such as 225, 225, 225
an RGB color value using % such as 50%, 50%, 50%
a hex code such as #9300ff
a color name such as "red"
transparent
inherit

background-image -- allows you to choose an image for your background

url( ) place your image link in the parentheses
none
inherit

background-position -- positions your background image on the page

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
X% Y% replace X and Y with a number value
Xpos Ypos replace X and Y with a number value
inherit

background-repeat -- affects whether your background image repeats, and how

repeat
repeat-X
repeat-Y
no-repeat
inherit

cursor -- effects the appearance of the cursor that indicates mouse-position

url( ) put the link to your images in the parentheses, separated by commas. remember to add at least one generic cursor at the end, just to be safe.
auto
crosshair makes your cursor look like crosshairs
default
move indicates that you can move an object
grab indicates that an object may be grabbed
grabbing indicates that an object is being grabbed
no-drop indicates that an object cannot be dropped
e-resize indicates that an object may be resized to the left
w-resize indicates that an object may be resized to the right
n-resize indicates that an object may be resized up
s-resize indicates that an object may be resized down
nw-resize indicates that an object may be resized up and to the right
sw-resize indicates that an object may be resized down and to the right
ne-resize indicates that an object may be resized up and to the left
se-resize indicates that an object may be resized down and to the left
ew-resize indicates that an object may be resized back and forth from right to left
ns-resize indicates that an object may be resized back and forth both up and down
nesw-resize indicates that an object may be reszed back and forth from the top-left to the bottom-right
senw-resize indicates that an object may be resized from the bottom-left to the top-right
text indicates that you may select the targeted text
wait displays a symbol telling you to wait, such as an hourglass
help displays a help symbol

CSS for Text

color -- affects the color of the text

an RGB color value such as 225, 225, 225
an RGB color value using % such as 50%, 50%, 50%
a hex code such as #9300ff
a color name such as "red"
transparent
inherit

direction -- determines which direction the text shall appear in

ltr short for left to right (normal direction)
rtl short for right to left

line height -- affects the vertical space between lines of text

normal
a number to be multiplied by the normal height
define length in cm, px, pt, pc, or %

letter-spacing -- affects the horizontal space between the letters

normal
define length in cm, px, pt, pc, or %

text-align -- determines the alignment of the text

left lines up text against the margin on the left
right lines up the text against the margin on the right
center centers the text on the page
justify stretches the text, using letter-spacing, to reach both the right and left margins

text-decoration -- affects the appearance of text

none
underline
overline
line-through draws a line through the middle of the text, as if to cross it out
blink makes the text blink

text-indent -- scoots the text to the left by a specified amount

define length in cm, px, pt, pc, or %

text-shadow -- allows you to add a shadow to your text

none
an RGB color value such as 225, 225, 225
an RGB color value using % such as 50%, 50%, 50%
a hex code such as #9300ff
a color name such as "red"
transparent
define length in cm, px, pt, pc, or %

text-transform -- affects the case of the text

none
capitalize first letter only
uppercase
lowercase

unicode-bidi -- has to do with overriding text to support multiple languages

normal
embed
bidi-override

vertical-align -- determines vertical alignment of text

baseline
sub
super
top
text-top
middle
bottom
text-bottom
define length in cm, px, pt, pc, or %

white-space -- affects the white space in the selected element

normal
pre
nowrap

word-spacing -- affects the space between words

normal
define length in cm, px, pt, pc, or %

font -- shorthand CSS that affects several aspects of the text font

any font-style value
any font-variant value
any font-weight value
any font-size/line-height value
any font-family value
any caption value
any icon value
any menu value
any message-box value
any small-caption value
any status-bar value
inherit

font-family -- specifies the face of the font

family-name such as Times New Roman
generic-family such as Sans Serif
inherit

font-size -- determines the size of the text

xx-small
x-small
small
medium
large
x-large
xx-large
smaller slightly smaller than the rest of the text
larger slightly larger than the rest of the text
define length in cm, px, pt, pc, or %
inherit

font-style -- affects the kind of emphasis used on the text

normal
italic
oblique bold
inherit

font-variant -- allows some variation in the font

normal
small caps replaces Lowercase letters with smaller versions of Uppercase ones, like this
inherit

font-weight -- affects the boldness of the text

normal
bold
bolder slightly bolder than normal
lighter slightly lighter than normal
100
200
300
400
500
600
700
800
900
inherit

CSS for Lists

list-style -- shorthand CSS that affects various aspects of a list

any list-style-type value
any list-style-position value
any list-style-image value
inherit

list-style-image -- Allows you to link to an image to be used in place of a marker in a list

url( ) place the link to your image in the parentheses
none
inherit

list-style-position -- determines whether the marker will be placed inside or outside the content

inside
outside
inherit

list-style-type -- determines the type of marker used in the list

none
disc a disc-shaped bullet
circle a circle-shaped bullet
square a square-shaped bullet
decimal a numbered list
decimal-leading-zero a numbered list beginning with zero
armenian numbered list in Armenian
georgian numbered list in Georgian
hebrew numbered list in Hebrew
hiragana numbered list in Japanese Hiragana
hiragana-iroha numbered list in Japanese Hiragana-Iroha
katakana numbered list in Japanese Katakana
katakana-iroha numbered list in Japanese Katakana Iroha
lower-alpha ABC-order list in lowercase letters
upper-alpha ABC-order list in uppercase letters
lower-greek ABC-order list in the lowercase Greek alphabet
upper-greek ABC-order list in the uppercase Greek alphabet
lower-latin ABC-order list in the lowercase Latin alphabet
upper-latin ABC-order list in the lowercase Latin alphabet
lower roman numbered list with Roman numerals in lowercase
upper roman numbered list with Roman numerals in uppercase
inherit

CSS for Borders, Margins, Padding, and Outlines

border -- a shorthand CSS property that affects all sides of the border of an element at once

any border-width value
any border-style value
any border-color value

border-bottom -- a shorthand CSS property that affects the bottom border of an element only

any border-bottom-width value
any border-bottom-style value
any border-bottom-color value

border-left -- a shorthand CSS property that effects the left border of an element only

any border-left-width value
any border-left-style value
any border-left-color value

border-right -- a shorthand CSS property that effects the right border of an element only

any border-right-width value
any border-right-style value
any border-right-color value

border-top -- a shorthand CSS property that effects the top border of an element only

any border-top-width value
any border-top-style value
any border-top-color value

border-width -- determines the width of the border

thin
medium
thick
define length in cm, px, pt, pc, or %
inherit

border-style -- this property is required for the border to show up, and determines what kind of border appears

none
hidden
dotted
dashed
solid
groove
double
ridge
inset
outset
inherit

border-color -- determines the color of the border

an RGB color value such as 225, 225, 225
an RGB color value using % such as 50%, 50%, 50%
a hex code such as #9300ff
a color name such as "red"
transparent
inherit

border-top-width -- determines the width of the top border only

border-left-width -- determines the width of the left border only

border-right-width -- determines the width of the right border only

border-bottom-width -- determines the width of the bottom border only

any border-width value

border-top-color -- determines the color of the top border only

border-left-color -- determines the color of the left border only

border-right-color -- determines the color of the right border only

border-bottom-color -- determines the color of the bottom border only

any border-color value

border-top-style -- determines the style of the top border only

border-left-style -- determines the style of the left border only

border-right-style -- determines the style of the right border only

border-bottom-style -- determines the style of the bottom border only

any border-style value

outline -- a shorthand CSS element that effects the outline of a specified elemen

any outline-color value
any outline-style value
any outline-width value
inherit

outline-color -- determines the color of the outline

an RGB color value such as 225, 225, 225
an RGB color value using % such as 50%, 50%, 50%
a hex code such as #9300ff
a color name such as "red"
transparent
invert
inherit

outline-style -- determines the style of the outline

none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit

outline-width -- determines the width of the outline

thin
medium
thick
define length in cm, px, pt, pc, or %
inherit

margin -- a shorthand CSS property that effects margins (the space between the border and the outline) on all sides of the specified element at once

any margin-top value
any margin-left value
any margin-right value
any margin-bottom value

margin-top -- effects the top margin only

margin-left -- effects the left margin only

margin-right -- effects the right margin only

margin-bottom -- effects the bottom margin only

auto
define length in cm, px, pt, pc, or %

padding -- a shorthand CSS property that effects padding (the space between the border ant the text) on all sides of the specified element

any padding-top value
any padding-left value
any padding-right value
any padding-bottom value

padding-top -- effects only the padding on the top

padding-left -- effects only the padding on the left

padding-right -- effects only the padding on the right

padding-bottom -- effects only the padding on the bottom

auto
define length in cm, px, pt, pc, or %

CSS for Size and Positioning

height -- determines the height of an element

max-height -- determines the maximum height of an element

min-height -- determines the minimum height of an element

width -- determines the width of an element

max-width -- determines the maximum width of an element

min-width -- determines the minimum width of an element

auto
define length in cm, px, pt, pc, or %
inherit

position -- determines what kind of positioning shall be used for an element

absolute based on a pixel value that does not change with screen size or resolution
fixed doesn't change position
relative relative to normal, automatic positioning
static normal, automatic positioning
inherit

top -- determines position by the placement of the top of the element

left -- determines position by the placement of the left of the element

right -- determines position by the placement of the right of the element

bottom -- determines position by the placement of the bottom of the element

auto
define length in cm, px, pt, pc, or %
inherit

clip -- uses a rectangle to clip off part of an absolutely-positioned element

rect(x1, y1, x2, y2) replace Xs and Ys with pixel (px) values
auto
inherit

overflow -- effects what will happen when the element is larger than the screen or section that contains it

auto
hidden hides overflowing content
scroll creates a scrollbar which you can slide to view unseen content
visible
inherit

z-index -- allows you to layer elements by creating a virtual z-axis you may specify

a number such as 2
auto
inherit

clear -- determines whether an element will clear a floating element and how

left
right
both
none
inherit

float -- causes an element to float toward a specified side of the page

left
right
none
inherit

Thank you for reading! If you enjoyed this article, you may also like to check out some of my other posts. Here's what I recommend now:
Simple HTML Everyone Should Know
Star Wars The Old Republic, Roleplayers' Survival Guide

Friday, November 20, 2015

Free CSS Cheat Sheet - How to Use Cascading Style Sheets

No comments:

Post a Comment

Readers' Top 10 Favorite Posts

Archive