Archive for the ‘Cheat Sheets’ Category

File Under: Cheat Sheets, HTML

Special Characters

To make special characters and accented letters show up on your pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

The most common character entities have been collected by the International Organization for Standardization and compiled in the ISO Latin Alphabet No. 1 table, which includes special characters, letters with diacritical marks (accents, umlauts, etc.), and scientific and currency symbols. The Latin-1 table contains 255 characters.  
Continue Reading “Special Characters” »

File Under: Cheat Sheets, HTML

Color Charts


When you’re adding a color to your web page with HTML, sometimes you can just type in the name of the color. But more often than not, you’ll need to use what’s called the hex code, which is something that the browser will be able to understand. Choose a color from the list below and look to its left to get the hex code. If we wanted our background to be red, for example, we’d type bgcolor=”#FF0000″. Try it out!


Continue Reading “Color Charts” »
File Under: Cheat Sheets, CSS

Inline Stylesheet Code

If you want to use stylesheets to format one particular piece of content on a web page, you can apply an inline style.

Here’s the code:

<a href="http://www.webmonkey.com" style="font: 9px Geneva, Verdana, sans-serif; padding: 0 1.0em 1px 0; border: 1px solid #000; background: #31757B; color: #fff; text-decoration: none; font-weight:bold" title="">
<span style="background: #000; border-right: 1px solid #000; color: #fff; padding: 1px 0.75em; margin-right: 0.1em; font-weight:bold;">Go To</span> Webmonkey!</a>

File Under: Cheat Sheets, CSS

CSS Properties


Name of
Property
Rule syntax

Possible values
font-family <selector> {font-family:<value>} <family-name> (specify) or <generic-family> [serif, sans-serif, cursive, fantasy, monospace]


font-style <selector> {font-style:<value>} normal, italic

font-weight <selector> {font-weight:<value>} normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900


font-size <selector> {font-size:<value>} <absolute-size>, <relative-size>, <length>, <percentage>


font $
<selector> {font:<value>} , , ,

Color and Background
Name of
Property
Rule syntax Possible values

color <selector> {color:<value>}

<color>


background-color <selector> {background-color:<value>}

<color>


background-image <selector> {background-image:url(<value>)} URL (relative or absolute path)

background $
<selector>{background:<value>} <background-color> (i.e., <color>)

Text properties
Name of
Property
Rule syntax Possible values

Text-decoration <selector>{text-decoration:<value>} underline, line-through

text-transform <selector>{text-transform:<value>} capitalize, uppercase, lowercase, none

text-align <selector>{text-align:<value>} left, right, center, justify

text-indent <selector>{text-indent:<value>} <length>, <percentage>
Box properties

Name of
Property
Rule syntax Possible values
margin $

<selector>{margin:<value>} <length>, <percentage>, auto(sequence:t r b l)

margin-top

<selector>{margin-top:<value>} <length>, <percentage>, auto

Margin-right

<selector>{margin-right:<value>} <length>, <percentage>, auto

margin-bottom

<selector>{margin-bottom:<value>} <length>, <percentage>, auto

margin-left <selector>{margin-left:<value>} <length>, <percentage>, auto

padding $
<selector>{padding:<value>} <length>, <percentage>, (sequence:t r b l)

padding-top
<selector>{padding-top:<value>} <length>, <percentage>


padding-right
<selector>{padding-right:<value>} <length>, <percentage>


padding-bottom
<selector>{padding-bottom:<value>} <length>, <percentage>


padding-left
<selector>{padding-left:<value>} <length>, <percentage>


border-color
<selector>{border-color:<value>} <color>


border-style
<selector>{border-style:<value>} solid, double, groove, ridge, inset, outset


border $
<selector>{border:<value>} <border-width>, <border-style>, <color>

Block-level and Replaced Elements
width <selector>{width:<value>} <length>, <percentage>, auto


height <selector>{height:<value>} <length>, auto

float <selector>{float:<value>} left, right

clear <selector>{clear:<value>} none, left, right
Position (CSS – P)
Name of
Property
Rule syntax Possible values
position <selector>{position:<value>} absolute, relative

top

<selector>{top:<value>} <length>, <percentage>, auto

left

<selector>{left:<value>} <length>, <percentage>, auto

visibility

<selector>{visibility:<value>} hidden, visible, inherit

z-index <selector>{z-index:<value>}

<number>, auto

overflow <selector>{overflow:<value>} visible, hidden, auto


$ = Shorthand Property

File Under: Cheat Sheets, CSS

CSS Attributes

Class and ID

Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:

	.foo {property 1:value 1; property 2:value 2} 

A very simple example:

	<style>

    P {font-family:sans-serif; font-size:10pt}
    H1 {font-family:serif; font-size:30pt}
    H2 {font-family:serif; font-size:24pt}
    .red {color:red}
    .green {color:green}
    .blue {color:blue}

    </style> 

The tags and classes can then be used in combination:

	<h1 class="red">This is rendered as 30-point red serif text.</h1>
	<p class="red">This is rendered as 10-point red sans-serif text.</p> 

Or not:

	<p>This is rendered as 10-point sans-serif text in the default color.</p> 

The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:

	#foo {property 1:value 1; property 2:value 2}
	<h2 id="foo">Text rendered in the foo style.<h2> 

Text-Level Attributes:<SPAN> and <DIV>

The <span> tag is generally used to apply a style to inline text:

	<p>This text is rendered as foo-style and this is not. 

The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:

    <div class="foo">
    <p>The "foo" style will be applied to this text, and to <a href="page.html">this text</a> as well.
    </div> 

The style attribute provides a way to define a style for a single instance of an element:

<p style="font-size:10pt; color:red">This text is rendered as red, 10-point type</p>

The class, ID, and style attributed can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents.