Html & CSS Code Reference

 

Html – Hyper Text Mark Up Language – Used to describe information on a page and works in conjunction with other scripts

Html defines the content of a web page.

 

File names end in .html or .htm

Html Tags are enclosed in <angle brackets> and most have an opening < > and closing tag  </ >

<!DOCTYPE > Declaration of html version

<!DOCTYPE html> in this case html5 

<html> </html> Tell the web browser the document contains html

<head> </head> Head Section of the file

<title> </title> Title of the Webpage, will be displayed in browser tab and Serp Page Title

<body> </body> What will appear on the Webpage goes between these tags

<!DOCTYPE html> <html> <head> <title></title> </head> <body></body> </html>

<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> Section Headings

<p> </p> Paragraph, also will create a line space

<br/> Line Break – just continues text in a paragraph on the next line rather than a new paragraph

<b></b> Makes text bold

<strong></strong> Makes text bold

<i></i> Makes text italics

<em></em> Makes text italics (emphasize)

<sub></sub> Subscript

<sup></sup> Superscript This is subscript and superscript

<small></small> Small text

<del></del> Deleted text

<ins></ins> Inserted text

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p> My favorite color is blue red!

<hr/> Horizontal Line

 

Linking

<a href=””> <a> Hyper Link Reference to another page

target=”_blank” Opens in a new Tab

<a href=”url” target=”_blank”> Link text </a>

 

Link to External website

<a href=”http://www.example.com/” target=”_blank”> <a> Hyper Link Reference to another page that opens in a new Tab

<a href=”http://www.marketingdenis.com/” target=”_blank”> Click here to visit the MarketingDenis website</a> (Always include a / at the end of the Url)

 

Use Image to link to external website

<img src=””/> Image

width=”” Width in pixels

height=”” Height in pixels

alt=”” Alternate text for the image

title=”” Title of the image

<img src=”Screenshot PS Project.JPG” width=”200″ height=”200″ alt=”Marketing Denis.com Website Image” title=”MarketingDenis.com” />

<Img src=”http://popcultureperversion.files.wordpress.com/2012/07/c71106b1d8d3148323cbab64ef6ec0ed.jpeg” width=”100″ height=”150″ alt=”picture of Katie Holmes” title= “Katie Holmes”/>

Remember to close the tag with the /> as it is a self closing tag.

Below is how to allow an image to be clickable to enlarge it and display in a separate tab as a Hyperlink use the href and img src tags.

<a href=”ScreenshotPSProject.jpg” target=”_blank”><img src=”ScreenshotPSProject.JPG” width=”200″ height=”200″ alt=”Marketing Denis.com Website Image” title=”MarketingDenis.com” /> </a>

Below is how to use insert a clickable image to open another website.

<a href=”http://www.dcu.ie/” target=”_blank”>

<img src=”Webcam_in_DCU.jpg” width=”300″ height=”200″ alt=”Picture of Denis McCaul” title=”Denis McCaul in DCU Library”> </a>

mailto: e-mail hyperlink

<a href=”mailto:[email protected]?Subject=Contact_through_MD_website”> Click here to E-mail Denis </a>

You only need to include ?subject= if you want to pre populate the Subject line of the e-mail

 

The id attribute (Internal page link and Internal website anchors)

<a id=””>      </a> This id tag is where you create the destination of the hyperlink (anchor). Here you also name the anchor (“tips”) and create the text with the section title (space between a and id). You can also use <a name=””>    </a> instead of id 

<a id=”tips”>Useful Tips Section</a>

<a href=”#”>   </a> This tag is placed where you want to position the hyperlink text to click on, to bring you to an anchor on the same page

<a href=”#tips”>Click here to Visit the Useful Tips Section</a>

<a href=”http:// # ”>      </a> This tag is placed where you want to position the hyperlink text to click on, to bring you to an anchor on the same website but located on a different page 

<a href=”http://www.w3schools.com/html_links.htm#tips”>Visit the Useful Tips Section</a>

(The “tips” text used here in the example to name and reference the anchor in the link is case sensitive so must be identical.)

 

Head Section Elements

The head section is contained within the html tags and precedes the body tags.

It contains things like page title, links to style sheets, meta information (page description) etc.

<head> section can contain the elements

<title> <style> <meta> <link> <script> <noscript> <base>

</head>

You don’t have to close all the tags

<title></title>

<title>Title of the document</title>

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

 

<base> This tells the browser  where to look for the image links and rule for opening hyperlinks

<base href=”http://www.w3schools.com/images/”>

<base target=”_blank”> This will apply to all hyperlinks on the page without having to write target=”

Note: It DOES NOT close with </base>

<link> The <link> tag is most used to link to style sheets:

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

<style></style>

<style type=”text/css”>
body {background-color:yellow}
p {color:blue}
</style>

The <style> tag is used to define style information for an HTML document.

Inside the <style> element you specify how HTML elements should render in a browser:

<meta>

<meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>

<meta name=”description” content=”Free Web tutorials on HTML and CSS”>

<meta name=”author” content=”Hege Refsnes”>

<meta http-equiv=”refresh” content=”30″>

<script> The script tag is used to define a client-side script, such as a JavaScript.

Page Layout & Styling

<div> </div>

<div id=” “> These id divs are generally used for sections or elements that occur only once within a page such as a banner, menu, footer,

In the style sheet selectors relating to an id start with a #

#selector {property: value;}

or

<div class=” “> These class divs are typically used multiple times within the same page such as paragraphs, H1’s,

In the style sheet selectors relating to an id start with a .

.selector {property: value;}

CSS

Cascading Style Sheet – Defines the look and feel of the Web page

selector {declaration}

selector { property: value;     property: value;     property: value; }

Inline – using the style attribute in HTML elements in the <body> section

< (html tag) style = ” – : ; ” >   </(html tag) >

Internal – using the <style> element in the <head> section

<style type=”text/css”>  (html tag) {  – : ;  } </style>

External – using an external CSS file in the  <head> section

<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>

 

Inline

<            style = ” – : ; ” >

background-color

<body style= “background-color:yellow; “>

<p style= “background-color:#f2f2f2;” > This is a paragraph. </p>

Text – Color, Margin, Font family, Font size, Alignment

<p style= “color:blue;  margin-left:20px; “> This is a paragraph. </p>

<h1 style= “font-family:verdana;”> A heading </h1>

<p style= “font-family:arial; color:red; font-size:20px; “>A paragraph.</p>

<h1 style= “text-align:center;” > Center-aligned heading </h1>

Internal

<head>

<title>My Practice Site</title>

<style type=”text/css”>

body {background-color:#f2f2f2;}

p {margin:20px;}

</style>

</head>

External

<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

 

 

Images

<img src=””>

An image from a folder that you cannot click on

<img src=”/images/pulpit.jpg”>

An image from another website that you cannot click on

<img src=”http://www.w3schools.com/images/w3schools_green.jpg” >

An image as a Hyperlink to another website

<a href=”http://www.marketingdenis.com” target=”_blank”>

<img src=”smiley.gif” alt=”HTML tutorial” width=”32″ height=”32″>

</a>

An image as a Hyperlink to open on its own page

<a href=”ScreenshotPSProject.jpg” target=”_blank”>

<img src=”ScreenshotPSProject.JPG” />

</a>

An image with attributes

<img src=”ScreenshotPSProject.JPG” border=”0″ alt=”Our trip to Pulpit rock” title=”Pulpit rock” width=”304″ height=”228″style=”float:right;” >

An image with different clickable areas (Image Map)

<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”>

<map name=”planetmap”>

  <area shape=”rect” coords=”0,0,82,126″ alt=”Sun” href=”sun.htm”>

  <area shape=”circle” coords=”90,58,3″ alt=”Mercury” href=”mercur.htm”>

  <area shape=”circle” coords=”124,58,8″ alt=”Venus” href=”venus.htm”>

</map>

(the co-ordinates are x y axis covering the picture, not the web page. For the rectangle shape 0,0,82,126 the rectangle is denoted by the top left 0, 0 and bottom right 82px across 126px down )

Tables

<table></table>

<table border =”” cellpadding=”” cell spacing=”” ></table>

<caption></caption> The Table Caption above the table

<th></th> The first row (or column, depending) table header cells (Appear centred and in Bold) 

<tr></tr> A Table row

<td></td> The data in a table cell

<th colspan=””></th> When you want a cell to span multiple columns underneath it

<th rowspan=””></th> When you want a cell to span multiple rows beside it

<td><a href=”http://www.”>Insert Text </a></td> When you want to hyperlink the cell data

Cell Padding is internal in the cell between the cell content and the border of the cell

Cell Spacing is the space between the cells

Styling – <colgroup> <col> <thead> <tbody> <tfoot>

Example

 

<table border=”10″ cellpadding=”5″ cellspacing=”5″>

<caption><strong>Premiership Table 2011/12 Mon Dec 10th</strong></caption>

<th>Pos</th><th>Team</th><th>Games</th><th>Points</th>

<tr>

<td>1</td><td>Manchester United</td><td>16</td><td>39</td>

</tr>

<tr>

<td>2</td><td>Manchester City</td><td>16</td><td>33</td>

</tr>

</table>

</p>

 

Lists

Ordered, Unordered and Definition

<ol></ol> Ordered list

<ul></ul> Unordered list

<li></li> List item

<dl></dl> Definition list

<dt></dt> Definition item

<dd> – </dd> Definition description

<ol type=a></ol> Ordered list with abc instead of 123

<ul type=A></ol> Un-ordered list with ABC instead of 123

 

Ordered list

<ol>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ol>

 

Un-Ordered list

<ul>

  <li>Coffee</li>

  <li>Tea</li>

  <li>Milk</li>

</ul>

 

Definition list

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

 

Nested unordered list

  • Coffee
  • Tea
    • Black tea
    • Green tea
  • Milk

<ul>

  <li>Coffee</li>

  <li>Tea

    <ul>

    <li>Black tea</li>

    <li>Green tea</li>

    </ul>

  </li>

  <li>Milk</li>

</ul> 

Web Browsers

The purpose of a web browser (such as Google Chrome, Internet Explorer, Firefox, Safari) is to read HTML documents and display them as web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page:

When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

 

HTML tags are not case sensitive: <P> means the same as <p>. Many web sites use uppercase HTML tags.

W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.

HTML is a language for describing web pages.

  • HTML stands for Hyper Text Markup Language
  • HTML is a markup language
  • A markup language is a set of markup tags
  • The tags describe document content
  • HTML documents contain HTML tags and plain text
  • HTML documents are also called web pages

HTML markup tags are usually called HTML tags

  • HTML tags are keywords (tag names) surrounded by angle brackets like <html>
  • HTML tags normally come in pairs like <b> and </b>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, with a forward slash before the tag name
  • Start and end tags are also called opening tags and closing tags

<tagname>content</tagname>

HTML Elements

“HTML tags” and “HTML elements” are often used to describe the same thing.

But strictly speaking, an HTML element is everything between the start tag and the end tag, including the tags:

HTML Element:

<p>This is a paragraph.</p>

  • An HTML element starts with a start tag / opening tag
  • An HTML element ends with an end tag / closing tag
  • The element content is everything between the start and the end tag
  • Some HTML elements have empty content
  • Empty elements are closed in the start tag
  • Most HTML elements can have attributes

Most HTML elements can be nested (can contain other HTML elements).

 

 

<!DOCTYPE html> The DOCTYPE declaration defines the document type, in this case HTML5

The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are many different documents on the web, and a browser can only display an HTML page 100% correctly if it knows the HTML type and version used.

 

<html>

<body>

<h1>Chapter 1 – Getting Started</h1>

Main Heading HTML headings are defined with the <h1> to <h6> tags.

<h2> </h2>
<h3> </h3>
<h4> </h4>

<h5> </h5>

<h6> </h6>

Search engines use your headings to index the structure and content of your web pages.

Since users may skim your pages by its headings, it is important to use headings to show the document structure.

Browsers automatically add some empty space (a margin) before and after each heading.
<p>My first paragraph.</p> HTML paragraphs are defined with the <p> tag.

Browsers automatically add some empty space (a margin) before and after each paragraph.

 

<a href=””> </a> Hyper links are defined with the <a> tag.
<a href=”http://www.w3schools.com”>Click this link for the w3 Schools website</a>

 

HTML images are defined with the <img> tag.

<img src=”” width=”” height=””>

<img src=”w3schools.jpg” width=”104″ height=”142″>

The html elements in the “” are called Attributes.

  • HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes come in name/value pairs like: name=”value” like href=”http://” or img src=””
  • Attribute values should always be enclosed in quotes.
  • Double style quotes are the most common, but single style quotes are also allowed.
  • Tip: In some rare situations, when the attribute value itself contains quotes, it is necessary to use single quotes: name=’John “ShotGun” Nelson’
  • Attribute names and attribute values not case sensitive but use lower case.

 

<br> is an empty element without a closing tag (the <br> tag defines a line break).

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:

<p>This is<br>a para<br>graph with line breaks</p>

The <br> element is an empty HTML element. It has no end tag.

In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br />, is the proper way of closing empty elements in XHTML (and XML).

The <hr>tag creates a horizontal line in an HTML page.

The hr element can be used to separate content:

<p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.

Comments are written like this:

<!–  –>

<!– This comment will not be displayed–>

Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

 

Html Text Formatting

 

<b> </b> (Bold) or

<strong> </strong> (Strong)

 

<p>

<b> This text is bold, </b>

<strong> This text is strong </strong>

</p>

This text is bold, This text is strong (they appear the same)

 

 

<i> </i> Italics or

<em> </em> (emphasized)

 

<p>

<i> This text is italic, </i>

<em> This text is emphasized </em>

</p>

This text is italic, This text is emphasized (they appear the same)

<small></small> Small script

<p><small>This text is small</small></p>

This text is small

<sub></sub> Subscript

<sup></sup> Superscript

<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>

This is subscript and superscript

<pre></pre> Pre Formatted Text

<pre>

This is

preformatted text.

It preserves      both spaces

and line breaks.

</pre>

The following codes are often used to display computer code:

<code>Computer code</code>

<kbd>Keyboard input</kbd>

<samp>Sample text</samp>

<var>Computer variable</var>

How to define contact information for the author/owner of an HTML document.

<address></address>

<address>

Written by W3Schools.com<br>

<a href=”mailto:[email protected]”>Email us</a><br>

Address: Box 564, Disneyland<br>

Phone: +12 34 56 78

</address>

 

e-mail

<a href=”mailto:[email protected]”>Email us</a>

 

Title Attribute

The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation.

<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>

<p>Can I get this <abbr title=”as soon as possible”>ASAP</abbr>?</p>

 

Text Direction – To write text backwards (sdrawkcab) right to left

<bdo dir=”rtl”>

Here is some Hebrew text

</bdo>

Bdo stands for bi-directional override

 

</body>

</html>

 

  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph

 

HTML ELEMENT TAGS – REFERENCE SHEET
Basic Tags
<html></html> Creates an HTML document
<head></head> Container for the page title and other info that isn’t seen on the page itself
<body></body> Sets off the visible portion of the document

Text Tags
<pre></pre> Creates preformatted text
<h1></h1> Creates the largest headline
<h6></h6> Creates the smallest headline
<strong></strong> Creates bold text
<i></i> Creates italic text
<tt></tt> Creates teletype, or typewriter-style text
<cite></cite> Creates a citation, usually italic
<em></em> Emphasizes a word (with italic or bold)
<strong></strong> Emphasizes a word (with italic or bold)
<font size=”3″> font is size 3 </font> Sets size of font, from 1 to 7
<font color=”green”> font color is green </font> Sets font color

Links
<a href=”URL”></a> Creates a hyperlink
<a href=”URL” target=”new”></a> Opens the link in a new browser window or tab
<a href=”mailto:EMAIL”></a> Creates a mailto link
<a href=”URL”><img src=”URL”> </a> Creates an image/link
<a name=”NAME”></a> Creates a target location within a document
<a href=”#NAME”></a> Links to that target location from elsewhere in the document

Formatting
<p></p> Creates a new paragraph
<p align=”left”></p> Aligns a paragraph to the left (default), right, or center.
<br /> Inserts a line break
<blockquote></blockquote> Indents text from both sides
<dl></dl> Creates a definition list
<dt> Precedes each definition term
<dd> Precedes each definition
<ol></ol> Creates a numbered list
<ul></ul> Creates a bulleted list
<li></li> Precedes each list item, adds a number or symbol depending upon type of list
<div class=”class name”></div> Format large blocks via stylesheets only
<img src=”name”> Adds an image
<img src=”name” align=”left”> Aligns image: left, right, center; bottom, top, middle
<img src=”name” border=”1″> Sets size of border around an image
<hr /> Inserts a horizontal rule
<hr size=”3″ /> Sets size (height) of rule
<hr width=”80%” /> Sets width of rule, in percentage or absolute value
<hr noshade /> Creates a rule without a shadow

Tables
<table></table> Creates a table
<tr></tr> Sets off each row in a table
<td></td> Sets off each cell in a row
<th></th> Sets off the table header (a normal cell with bold, centered text)
Table Attributes
<table border=”1″> Sets width of border around table cells
<table cellspacing=”1″> Sets amount of space between table cells
<table cellpadding=”1″> Sets amount of space between a cell’s border and its
contents
<table width=”500″ or “80%”> Sets width of table, in pixels or as a percentage of
document width
<tr align=”left”> or <td align=”left”> Sets alignment for cell(s) (left, center, or
right)
<tr valign=”top”> or <td valign=”top”> Sets vertical alignment for cell(s) (top,
middle, or bottom)
<td colspan=”2″> Sets number of columns a cell should span (default=1)
<td rowspan=”4″> Sets number of rows a cell should span (default=1)
<td nowrap> Prevents the lines within a cell from being broken to fit

 

CSS – Good Cheat Sheet one pager

http://www.lesliefranke.com/files/reference/csscheatsheet.html

 

CSS online styling code generator for Text 

http://csstxt.com/

 

CSS Box Model

Css box model image by Rich Hauck

 

 

 

 

 

 

 

 

 

This is a good explanation from W3Schools.com

Margin – Clears an area around the border. The margin does not have a background color, it is completely transparent

Border – A border that goes around the padding and content. The border is affected by the
background color of the box

Padding – Clears an area around the content. The padding is affected by the background color of the box

Content – The content of the box, where text and images appear

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

Width and Height of an Element
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add the padding, borders and margins.

The total width of the element in the example below is 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

Let’s do the math:
250px (width)

+ 20px (left and right padding)
+ 10px (left and right border)
+ 20px (left and right margin)
= 300px

Assume that you had only 250px of space. Let’s make an element with a total width of 250px:

Example
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;

When setting CSS properties there are two ways to remember the order that the values are applied.

1. Clockwise

Top Right Bottom Left

2. Treble

Top Right Bottom Left

In the Html file we will label the element using a Div tag. Either <div id=”box”></div> which would need a #box in the CSS file or <div class=”box”></div> which would need a .box in the CSS file.

Example 1 – Same settings for each of the four sides

.box {

width: 300px ;
height: 300px;
background: #d00000;
border: 10px solid #000000; (width style colour)
margin: 20px; (20pixel margin top bottom left & right)
padding: 40px; (40pixel margin top bottom left & right)
}

Example 2 – Individual settings for each of the four sides

.box {

width: 300px ;
height: 300px;
background: #d00000;
border: 10px solid #000000; (width style colour)
margin: 30px 0px 0px 30px; (30px top, 0px right, 0px bottom, 30px left margin)
padding: 30px 0px 0px 30px; (30px top, 0px right, 0px bottom, 30px left padding)
}

Example 3 – Same settings for top and bottom plus same setting for left and right 

.box {

width: 300px ;
height: 300px;
background: #d00000;
border: 10px solid #000000; (width style colour)
margin: 30px 0px ; (30px top and bottom, 0px left and right)
padding: 15px 0px ; (15px top and bottom, 0px left and right)
}

Example 4 – Just set one side

 

.box {

width: 300px ;
height: 300px;
background: #d00000;
border: 10px solid #000000; (width style colour)
margin-left: 5px; (5px left margin)
padding-top: 26px; (26px top padding)
}

 

 

The Box Model –

 

 

Padding

Borders

Margin 

Dimensions (Width)
Padding

padding-top, padding-right, padding-bottom, padding-left
Possible Values

• [percentage]

• [length] – (“0” is default)
• inherit
• padding can have:
• one value, such as 10px, to specify equal padding on every side
• two values, such as 10px 5px, to specify top/bottom (first value) and right/left
(second value) padding
• three values, such as 10px 5px 2px, to specify top (first value), right/left (second
value) and bottom (third value) padding
• four values, such as 10px 5px 2px 1px to specify top, right, bottom and left padding
respectively
Example
#flump { padding: 10em 2em; }
border, border-top, border-right, border-bottom, border-left
Possible Values
• [combination of border-width, border-style, border-color]
Example
.this { border-top: 1px solid black; }
.that { border: 1em dotted #fc0; }

Border-Style

border-top-style, border-right-style, border-bottom-style, border-left-style
Possible Values
• none – no border.
• dotted – A series of dots (IE will display this as dashes if the border width is one
pixel).
• dashed – A series of dashes.
• solid – A solid line.
• double – Two solid lines.
• groove – Patterned border that is supposed to represent a carved groove (opposite of
ridge). Renders differently in different browsers.
• ridge – Patterned border that is supposed to represent an embossed ridge (opposite of
groove). Renders differently in different browsers.
• inset – Patterned border that is supposed to represent an inset depression (opposite of
outset). Renders differently in different browsers.
• outset – Patterned border that is supposed to represent an outset extrusion (opposite of
inset). Renders differently in different browsers. • hidden – Used with tables. Same as “none”, except where there are conflicting
borders. Not supported by IE.
• border-style can have:
• one value, such as solid, to specify the style of the entire border
• two values, such as solid dotted, to specify the style of top/bottom (first value) and
right/left (second value) borders
• three values, such as solid dotted dashed, to specify the style of top (first value),
right/left (second value) and bottom (third value) borders
• or four values, such as solid dotted dashed groove, to specify the style of top, right,
bottom and left borders respectively
Example
.curtains { border-right-style: solid; }
.blinds { border-style: dotted dashed; }

Border-Color

border-top-color, border-right-color, border-bottom-color, border-left-color
Possible Values
• [color]
• transparent
• border-color can have:
• one value, such as red, to specify the color of the entire border
• two values, such as red blue, to specify the color of top/bottom (first value) and
right/left (second value) borders
• three values, such as red blue green, to specify the color of top (first value), right/left
(second value) and bottom (third value) borders
• four values, such as red blue green black, to specify the color of top, right, bottom
and left borders respectively
Example
.flamingo { border-right-color: red; }
#peach { border-color: #cc3421; }
#tree { border-color: #fc0 blue #cf0; }

Border-Width

border-top-width, border-right-width, border-bottom-width, border-left-width
Possible Values
• [length]
• thin
• medium
• thick
• border-width can have:
• one value, such as 10px, to specify the width of the entire border
• two values, such as 10px 5px, to specify the width of top/bottom (first value) and
right/left (second value) borders
• three values, such as 10px 5px 2px, to specify the width of top (first value), right/left
(second value) and bottom (third value) borders
• four values, such as 10px 5px 2px 1px, to specify the width of top, right, bottom and
left borders respectively Example
#bender { border-left-width: 2px; }
#fry { border-width: 1px 4px 1px 100px; }

Margin

margin-top, margin-right, margin-bottom, margin-left
Possible Values
• [percentage]
• [length]
• inherit
• auto
• margin can have:
• one value such as 10px to specify an equal margin on every side
• two values, such as 10px 5px, to specify the top/bottom (first value) and right/left
(second value) margin
• three values, such as 10px 5px 2px, to specify the top (first value), right/left (second
value) and bottom (third value) margin
• four values, such as 10px 5px 2px 1px to specify the top, right, bottom and left
margins respectively
Example
#badger { margin-top: 3em; }
#wolverine { margin: 1em 100px; }
#pineapple { margin: 1em 3em 10px 0.5em; }

Width
Possible Values
• [percentage]
• [length]
• inherit
• auto

Example
#jelly { width: 212px; }

Height
Possible Values
• [percentage] • [length]
• inherit
• auto (default)

Example
#pickle {
padding: 1em;
height: 3em;
}

 

Html5 Layout & Positioning 

First the Html file 

<!DOCTYPE html>

<html>

<head>
<link rel=”stylesheet” href=”liviah.style.css”>
<title>Hello World</title>
</head>

<body>

<div id=”wrapper”>

<header></header>

<section></section>

<aside></aside>

<footer></footer>

</div>

</body>

</html>

 

Now the CSS file 

body {
margin: 0;
}

#wrapper {
width:600px;
border: 10px solid #d00000;
overflow: auto;
}

header {
width:600px;
height:100px;
background:#000000;
}

section {
width:400px;
height:400px;
background:#333;
float: left;
}

aside {
width:200px;
height:400px;
background:#c0c0c0;
float: right;
}

footer {
width:600px;
height:50px;
background:#ffff00;
clear: both;
}

 

CSS Cheat Sheet

Text and Fonts

Font
Specifies font characteristics of a box and can combine font-style, font-variant, font-weight, font-size, line-height and font-family. The font size can be followed by the line height by separating them with a “/”.
Possible Values
• [combination of font-style, font-variant, font-weight, font-size, line-height and fontfamily]

Example
font: italic bold 1.5em/2 arial, Helvetica, sans-serif;

font-family
Specifies the font name of a box. This can be a comma-separated list, of which the browser will use the first font it recognizes. Font names that are made up of more than one word must be placed within quotation marks.
Possible Values
• inherit
• [font name]
• [multiple font names separated by commas]

Example
font-family: “Times New Roman”, Times, serif;

Font-size
Specifies the size of a font in a box.
Possible Values
• inherit
• [percentage]
• [length]
• larger
• smaller
• xx-small
• x-small
• small
• medium (default)
• large
• x-large
• xx-large

Example
body {
font-family: arial, Helvetica, sans-serif;
font-size: 80%;
}
h1 { font-size: 1.5em; }

Font-weight
Specifies the boldness of a font. Browsers tend not to have any levels other than 400 (the same as
normal), 700 (the same as bold) and 900.
Possible Values
• inherit
• normal
• bolder
• bold
• lighter
• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900

Example
.chubbybaby { font-weight: bold; }

Font-Style
Specifies whether the text in a box is italic or not.
Possible Values
• inherit
• normal
• italic
• oblique

Example
.tophat { font-style: italic; }

Font-Variant
Specifies whether the lowercase letters in a box should be displayed in small uppercase.
Possible Values
• inherit
• normal (default)
• small-caps

Example
h1 {font-variant: small-caps;}

Line-Height
Specifies the height of a line of text.
Possible Values
• [number]
• [percentage]
• [length]
• inherit
• normal

Example
p { line-height: 1.5 }

Letter-Spacing
Specifies the spacing in-between letters.
Possible Values
• [length]
• inherit
• normal (default)

Example
#header { letter-spacing: 1em; }

Word-Spacing
Specifies the spacing between words.
Possible Values
• [length]
• inherit
• normal (default)

Example
p { word-spacing: 2em; }

Text-Align
Specifies the alignment of text inside a block box.
Possible Values
• inherit
• left
• right
• center
• justify

Example
p { text-align: justify; }

Text-decoration
Specifies whether text is underlined, over-lined or has a strikethrough.
Possible Values
• inherit
• none
• underline
• overline
• line-through
• blink – Not supported by IE. Note: blinking text is notoriously disliked by users and
is bad from an accessibility point of view.

Example
a:hover { text-decoration: none; }
text-transform
Specifies the case of letters.
Possible Values
• inherit
• capitalize – Capitalises the first letter of every word.
• uppercase – Forces every letter into uppercase.
• lowercase – Forces every letter into lowercase.
• none (default)

Example
h1 { text-transform: uppercase; }

Vertical-Align
Specifies the vertical position of an inline box.
Possible Values
• [length] – raises (positive value) or lowers (negative value) the box. 0 is equal to the
baseline.
• [percentage] – raises (positive value) or lowers (negative value) the box with regard
the value of line-height. 0% is equal to the baseline, 100% is one times the lineheight etc.
• inherit
• baseline (default) – aligns the baseline of a box with the baseline of its parent box.
• sub – lowers the baseline to subscript level.
• super – raises the baseline to superscript level.
• top – aligns to the top of the line.
• text-top – aligns to the top of the font of the parent box.
• middle – aligns to the middle of the font of the parent box.
• bottom – aligns to the bottom of the line.
• text-bottom – aligns to the bottom of the font of the parent box.

Example
h2 em {
font-size: 0.5em;
vertical-align: text-top;
}

Colours and Backgrounds

Color
Specifies the foreground (text and border) colour in a box.
Possible Values
• inherit
• [color]
Example
p { color: red; }
#squirrel { color: #ff6600; }

Background-Color
Specifies the background color of a box.
Possible Values
• inherit
• transparent (default)
• [color]
Example
#dooberry { background-color: red; }

Background
Combines background-color, background-image, background-repeat, background-attachment
and background-position in one property.
Possible Values
A combination of some or all of the values for background-color, background-image,
background-repeat, background-attachment and background-position.
Example
background: red url(images/poobah.gif) no-repeat top left;

Background-Image
Specifies the background image of a box. Possible Values
• inherit
• none (default)
• [URI]

Example
#plow { background-image: url(someimage.jpg); }

Background-Repeat
Specifies how a background image will repeat itself within a box.
Possible Values
• inherit
• repeat (default) – tiled, repeating the image both horizontally and vertically.
• repeat-x – repeating the image horizontally only.
• repeat-y – repeating the image vertically only.
• no-repeat – not repeating the image at all, showing just one instance.

Example
#header { background-repeat: repeat-x; }

Background-Position
Specifies the position of a background image within its containing element. The value can be single, such as top or double such a top right.
Possible Values
• top
• right
• bottom
• left
• center
• [combination]
• [percentage]
• [length]

Example
.winehouse { background-position: bottom right; }

Background-Attachment
Specifies the attachment of the background image to the containing element. For example, if a
background image is applied to a page normally the image will scroll with the rest of the page, but if
the property is set to fixed then the image will stay in the same position as the user scrolls the page up and down.

Possible Values

• inherit
• scroll (default) – the background image will scroll with the rest of the content.
• fixed – the background image will remain stationary as the rest of the content is
scolled.

Example
body { background-attachment: fixed; }

The Box Model – dimensions, padding, margin and borders padding, padding-top, padding-right, padding-bottom, padding-left
Possible Values
• [percentage]
• [length] – (“0” is default)
• inherit
• padding can have:
• one value, such as 10px, to specify equal padding on every side
• two values, such as 10px 5px, to specify top/bottom (first value) and right/left
(second value) padding
• three values, such as 10px 5px 2px, to specify top (first value), right/left (second
value) and bottom (third value) padding
• four values, such as 10px 5px 2px 1px to specify top, right, bottom and left padding
respectively

Example
#flump { padding: 10em 2em; }

Border, border-top, border-right, border-bottom, border-left
Possible Values
• [combination of border-width, border-style, border-color]
Example
.this { border-top: 1px solid black; }
.that { border: 1em dotted #fc0; }
border-style, border-top-style, border-right-style, border-bottom-style, border-left-style
Possible Values
• none – no border.
• dotted – A series of dots (IE will display this as dashes if the border width is one
pixel).
• dashed – A series of dashes.
• solid – A solid line. • double – Two solid lines.
• groove – Patterned border that is supposed to represent a carved groove (opposite of
ridge). Renders differently in different browsers.
• ridge – Patterned border that is supposed to represent an embossed ridge (opposite of
groove). Renders differently in different browsers.
• inset – Patterned border that is supposed to represent an inset depression (opposite of
outset). Renders differently in different browsers.
• outset – Patterned border that is supposed to represent an outset extrusion (opposite of
inset). Renders differently in different browsers.
• hidden – Used with tables. Same as “none”, except where there are conflicting
borders. Not supported by IE.
• border-style can have:
• one value, such as solid, to specify the style of the entire border
• two values, such as solid dotted, to specify the style of top/bottom (first value) and
right/left (second value) borders
• three values, such as solid dotted dashed, to specify the style of top (first value),
right/left (second value) and bottom (third value) borders
• or four values, such as solid dotted dashed groove, to specify the style of top, right,
bottom and left borders respectively

Example
.curtains { border-right-style: solid; }
.blinds { border-style: dotted dashed; }
border-color, border-top-color, border-right-color, border-bottom-color, border-left-color
Possible Values
• [color]
• transparent
• border-color can have:
• one value, such as red, to specify the color of the entire border
• two values, such as red blue, to specify the color of top/bottom (first value) and
right/left (second value) borders
• three values, such as red blue green, to specify the color of top (first value), right/left
(second value) and bottom (third value) borders
• four values, such as red blue green black, to specify the color of top, right, bottom
and left borders respectively

Example
.flamingo { border-right-color: red; }
#peach { border-color: #cc3421; }
#tree { border-color: #fc0 blue #cf0; }

Border-width, border-top-width, border-right-width, border-bottom-width, border-left-width
Possible Values
• [length]
• thin
• medium
• thick
• border-width can have:
• one value, such as 10px, to specify the width of the entire border • two values, such as 10px 5px, to specify the width of top/bottom (first value) and
right/left (second value) borders
• three values, such as 10px 5px 2px, to specify the width of top (first value), right/left
(second value) and bottom (third value) borders
• four values, such as 10px 5px 2px 1px, to specify the width of top, right, bottom and
left borders respectively

Example
#bender { border-left-width: 2px; }
#fry { border-width: 1px 4px 1px 100px; }

Margin, margin-top, margin-right, margin-bottom, margin-left
Possible Values
• [percentage]
• [length]
• inherit
• auto
• margin can have:
• one value such as 10px to specify an equal margin on every side
• two values, such as 10px 5px, to specify the top/bottom (first value) and right/left
(second value) margin
• three values, such as 10px 5px 2px, to specify the top (first value), right/left (second
value) and bottom (third value) margin
• four values, such as 10px 5px 2px 1px to specify the top, right, bottom and left
margins respectively

Example
#badger { margin-top: 3em; }
#wolverine { margin: 1em 100px; }
#pineapple { margin: 1em 3em 10px 0.5em; }

Width
Possible Values
• [percentage]
• [length]
• inherit
• auto
Example
#jelly { width: 212px; }

Height
Possible Values
• [percentage]
• [length]
• inherit
• auto (default)

Example
#pickle {
padding: 1em;
height: 3em;
}

Min-width
Specifies the minimum width of a box. Not supported by IE.
Possible Values
• [percentage]
• [length]
• inherit
• none

Example
#bung { min-width: 300px; }

Max-width
Specifies the maximum width of a box. Not supported by IE.
Possible Values
• [percentage]
• [length]
• inherit
• none

Example
#bong { max-width: 780px; }

Min-height
Specifies the minimum height of a box. Not supported by IE (where height acts the same).
Possible Values
• [percentage]
• [length]
• inherit
• none

Example
#beng { min-height: 5em; }

max-height

Specifies the maximum height of a box. Not supported by IE. Possible Values

• [percentage]
• [length]
• inherit
• none

Example
#bing { max-height: 300px; }

Positioning and Display
position
Specifies how a box should be positioned.
Possible Values
• inherit
• static (default) – Follows the normal flow.
• relative – Relative position that is offset from the initial normal position in the flow.
• absolute – Taken out of the flow and offset according to the containing block.
• fixed – The same as absolute only the fixed box will remain fixed in the viewport and not
scroll (or will appear on every printed page). Not supported by IE.

Example
#oogabooga {
position: relative;
left: 1em;
top: 1em;
}

top
For absolutely positioned boxes, specifies how far from the top of the containing box (which is the first
containing relatively positioned box or the page itself) the box should be.
For relatively positioned boxes, specifies how far from the top a box should be shifted.
Possible Values
• [percentage]
• [length]
• inherit
• auto (default)
Example
#forsale {
position: absolute;
top: 25%;
} right
For absolutely positioned boxes, specifies how far from the right of the containing box (which is the
first containing relatively positioned box or the page itself) the box should be.
For relatively positioned boxes, specifies how far from the right a box should be shifted.
Possible Values
• [percentage]
• [length]
• inherit
• auto (default)
Example
#tolet {
position: relative;
right: 2em;
}
bottom
For absolutely positioned boxes, specifies how far from the bottom of the containing box (which is the
first containing relatively positioned box or the page itself) the box should be.
For relatively positioned boxes, specifies how far from the bottom a box should be shifted.
Possible Values
• [percentage]
• [length]
• inherit
• auto (default)
Example
#justaveit {
position: absolute;
bottom: 2em;
}
left
For absolutely positioned boxes, specifies how far from the left of the containing box (which is the first
containing relatively positioned box or the page itself) the box should be.
For relatively positioned boxes, specifies how far from the left a box should be shifter.
Possible Values
• [percentage]
• [length]
• inherit
• auto (default)
Example
#sold {position: absolute;
left: 150px;} clip
Specifies the area of an absolutely positioned box that should be visible.
Possible Values
• inherit
• auto (default) – no clipping.
• rect([top] [right] [bottom] [left]) – clips to the shape of a rectangle defined by the four
coordinates (offset from the top left corner).
Example
#spod {
position: absolute;
clip: rect(10px 50px 30px 10px);
}
overflow
Specifies what should happen to the overflow – the portions of content that do not fit inside a box.
Possible Values
• inherit
• visible (default) – overflow spills over the box.
• hidden – overflow can not be seen.
• scroll – the box scrolls to accommodate the overflow.
• auto – similar in practice to scroll, the box scrolls to accommodate the overflow.
Example
#content {
width: 500px;
overflow: hidden;
}
z-index
Specifies the order of relative or absolutely positioned boxes in the z-axis. The higher the number, the
higher that box will be in the stack.
Possible Values
• inherit
• auto (default)
• [number]
Example
div { position: absolute; }
#kidkoala { z-index: 2 }
#mrscruff { z-index: 1 } float
Specifies whether a fixed-width box should float, shifting it to the right or left with surrounding content
flowing around it.
Possible Values
• inherit
• left – floats the box to the left with surrounding content flowing to the right.
• right – floats the box to the right with surrounding content flowing to the left.
• none (default)
Example
#boondoggle {
width: 20em;
float: left;
}
clear
Specifies how box is placed after a floated box.
Possible Values
• inherit
• none (default) – Floated elements are not cleared – content will flow around them.
• left – clears all left-floated elements and places the element underneath.
• right – clears all right-floated elements and places the element underneath.
• both – clears all floated elements and places the element underneath.
Example
#canoe { float: left; }
#fish { clear: left; }
display
Specifies the display type of a box.
Possible Values
• none – no display at all.
• inline – An inline box.
• block – A block box.
• inline-block – effectively a block box inside an inline box. Not supported by Mozilla at
time of writing. IE will only apply inline-block to elements that are traditionally inline
such as span or a but not p or div. Loopy.
• run-in – Either an inline or block box depending on the context. If a block box follows the
run-in box, the run-in box becomes the first inline box of that block box, otherwise it
becomes a block box itself. Crazy. Not supported by IE/Win or Mozilla at the time of
writing.
• list-item – the equivalent of the default styling of the HTML li element.
• table – a block-level table – the equivalent of the default styling of the HTML table
element. Not supported by IE.
• inline-table – an inline-level table. Not supported by IE.
• table-row-group – the equivalent of the default styling of the HTML tbody element. Not
supported by IE. • table-header-group – the equivalent of the default styling of the HTML thead element. Not
supported by IE.
• table-footer-group – the equivalent of the default styling of the HTML tfoot element. Not
supported by IE.
• table-row – the equivalent of the default styling of the HTML tr element. Not supported
by IE.
• table-column-group – the equivalent of the default styling of the HTML colgroup element.
Not supported by IE.
• table-column – the equivalent of the default styling of the HTML col element. Not
supported by IE.
• table-cell – the equivalent of the default styling of the HTML td or th elements. Not
supported by IE.
• table-caption – the equivalent of the default styling of the HTML caption element. Not
supported by IE.
Example
.darwin { display: block; }
.lamarck { display: none; }
.linnaeus { display: table; }
visibility
Specifies whether a box is visible or not.
Possible Values
• inherit
• visible (default)
• hidden – nothing will be visible but unlike display: none, the element and its dimensions
will still affect layout.
• collapse – same as hidden except when applied to rows, row groups, columns or column
group boxes, when it should have the same visual representation of display: none whilst
maintaining the cell heights or widths that will effect row heights and column widths.
Those browsers that “support” this value (IE does not) actually render collapse the same
as hidden no matter what the situation.
Example
p.flummox { visibility: hidden; }
Lists
list-style
Specifies the style of a list item marker, combining list-style-type, list-style-position and list-styleimage.
Possible Values
• [combination of list-style-type, list-style-position and list-style-image]
Example
list-style: square inside; list-style-type
Specifies the style of the list marker bullet or numbering system within a list.
Possible Values
• inherit
• none – no list marker.
• disc – solid circle.
• circle – empty circle.
• square – solid square.
• decimal – 1, 2, 3, 4 etc.
• decimal-leading-zero – 01, 02, 03 … 10, 11 etc. Not supported by IE.
• lower-roman – i, ii, iii, iv etc.
• upper-roman – I, II, III, IV etc.
• lower-greek – Greek characters. Not supported by IE.
• lower-latin – a, b, c, d etc. Not supported by IE.
• upper-latin – A, B, C, D etc. Not supported by IE.
• armenian
• georgian
Example
ul { list-style-type: square; }
list-style-image
Specifies an image to be used as the list marker for a list item.
Possible Values
• [URI]
• inherit
• none (default)
Example
li { list-style-image: url(images/myface.jpg); }
list-style-position
Specifies whether the list marker for a list item should appear inside or outside the list-item box.
Possible Values
• inherit
• inside
• outside (default)
Example
li { list-style-position: inside; }

 

Font-Size 

rem = a new updated tag of em that formats text size more consistently throughout the page.

For this to work on the top of the CSS file write

html {
font-size: 62.5%
}

(which takes the default text size of 16px and makes it 10px so that calculating text size is easier.) and below put

body {font-size: 1.6rem; font-size: 1.6em; font-size: 16px;}

 

em = Element approximately equal to the height of a character.

Most browsers display font size at roughly 16px by default.
Fonts will scale to whatever size of the device that the page is being displayed on.

body {
font-size: 62.5%
}

em {font-size: 1.6em;}

 

% = Percentage of line height

body {
font-size: 62.5%
}

percent {font-size: 100%;}

em and % are best used when you want to create a scalable or responsive website.

 

px = Pixel
pt = Point

px and pt are pretty much the same and best used when you want to have a very set, specific font size regardless of the size of the device or browser magnification.

px {font-size: 10px;}

percent {font-size: 100%;}

 

Colour

 

Background Colour

In the CSS sheet you can apply a background colour to the whole page say in the body

body {background: #1234ab}

or

body {background-color: #1234ab}

and you can do this for any section (div) of the page

#header {background-color: #ff66aa}

You can use background or background-color but you must spell color the American way.

 

Text Colour

In the CSS sheet you can apply a text colour to the whole page say in the body just using color

body {color: #1234ab}

and you can do this for any section (div) of the page

#header {color: #1234ab}

you must spell color the American way.

 

Colour can be defined as a

Hex colour #ff0019

{color: #ff0019;}

or RGB 255 0 25

{color: rgb(255,0,25)}

When using RGB you do not include a semi colon after the closing bracket )

There are also 16 valid pre-defined colour names

aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

 

Font Types

System fonts are font that are pre-installed on your hardware (PC, Laptop, Mac, Tablet, Mobile such as Arial, Times New Roman, Verdana, Tahoma, Georgia etc.

http://www.tutorialspoint.com/html/html_fonts_ref.htm

 

Font Family

body { font-family: ‘arial narrow’, arial, helvetica, sans-serif; }

If the font has a multiple barrel name you need to put apostrophes ‘ ‘ around it as above. This ensures that all browsers will apply it.

 

Use an external font 

http://www.font2web.com/

http://www.freefontconverter.com/

http://www.font2web.com/

Download the font to a folder on your computer.

Then go to http://font2web.com/ and upload the font to convert and download the CSS code required. It will download as a zipped file containing the multiple font file formats.

Take these multiple file formats and upload them to the same folder where your Html and Css file is.

Then take the CSS code from the Zip file and paste it into the CSS file as its own declaration, not nested.

@font-face { font-family: ‘ExampleFontName’; etc etc etc   }

Make sure that the url in the code is pointing to the folder location where the fonts are.

Then go to whatever CSS element you want the font in

body { font-family: ‘ExampleFontName’, arial, verdana, helvetica; }

 

Font Weight & Style

If some text is bold by default such as a h1 then you can change it using the font weight property.

h1 { font-weight: normal; }

It only has two values, bold or normal.

You can make it Italic by

h1 { font-weight: italic; } (it only applies to Italics)

 

Text Decoration

To remove the underline from links

a { text-decoration: none; }

The four available values are none, underline, overline, line-through.

 

Text Spacing

body { letter-spacing: .2em; word-spacing: .5em; line-height: 1.2em; text-align: left } (also right, center or justify available for text-align. Left is default)

setting the spacing values to zero will revert to the default text setting or just delete them.

 

IMAGES

To place an image on the page just insert into the Html file

<img src=”images/logo.png”> (inside the “” you either place a Url or the file location, usually an images folder.)

You do not need to use a closing tag.

 

The title attribute value is displayed on the page in place of the image should the image not be
available.

<img src=”” title=”this is the company logo”>

 

The alt attribute acts like a cursor tooltip when hovering over the image with the mouse.

<img src=”” title=”” alt=”picture of the company logo”>

 

Image Size

It is important to define the size of an image as if it does not display the space originally allocated to it will collapse and can disrupt the rest of the page layout.

If you do not specify the image size it will display at its actual size. If you define just the height or the width it will still maintain aspect ratio.

The best way to apply display settings is through CSS. This means that you need to apply a class to the image.

<img src=”” alt=”” title=”” class=”logo”>

Then in the CSS file

.logo { width:200px; height:252px; }

 

Scalable Image

In the Html file

<img src=”” alt=”” title=”” class=”logo”>

In the CSS file

.logo { width:100%;   height:auto;    max-width:300px; }

 

Positioning Images 

The img element by default is an inline level element. (Inline means that if you place the image in the middle of a sentence that is where it will display, in that line in the middle of the sentence.)

Images can be positioned using display inline, block, flush left, flush right etc. and using the CSS float property, along with other box model properties including margin, padding, border.

 

Block display will put the image on its own line without any text either side.

.logo { display: block; }

 

To make it float to the right

.logo { float: right; } (To stop text butting up against it add in Margin properties.

You can also give it a background colour, border, padding etc.

.logo { background: #e8eae9; border: 1px solid #c6c9cc; float: right; margin: 8px 0 0 20px; padding: 4px; }