This site contains affiliate links. Learn more.

Friday, November 20, 2015

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
<Head> <link rel="stylesheet" type="text/css" href="YourStyleSheet.css" /> </Head>

   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
<h1 style="YOUR DEFINITION GROUPS HERE">...</h1>

   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
  • 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
  • aRGB color value using % such as 50%, 50%, 50%
  • hex code such as #9300ff
  • 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
  • aRGB color value using % such as 50%, 50%, 50%
  • 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
  • aRGB color value using % such as 50%, 50%, 50%
  • hex code such as #9300ff
  • 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
  • aRGB color value using % such as 50%, 50%, 50%
  • hex code such as #9300ff
  • 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
Where do I Even Start? Six Tips for Tackling Big Jobs
Star Wars The Old Republic, Roleplayers' Survival Guide

No comments:

Post a Comment

Readers' Top 10 Favorite Posts