HTML Css Ref

CSE 154: Web Programming
Final Exam “Cheat Sheet”

HTML
Tags Used in the <head> Section
Tag Description
<title> text </title> title shown on page tab
<meta attribute="value" ... /> page metadata
<link href="url" type="text/css" rel="stylesheet" /> links to a CSS style sheet
<script src="url"></script> link to JavaScript code
comment (can appear in head or

body)
Tags Used in the <body> Section
Tag Display Description

<p> text </p> Block paragraph
<h1> text </h1> Block (h1 for largest to
<h2> text </h2> h6 for smallest)
...
<h6> text </h6>
<hr /> Block horizontal rule (line)
<br /> Block line break
<a href="url"> text </a> Block anchor (link)
Inline-
<img src="url" alt="description" /> image
Block
<em> text </em> Inline emphasis (italic)
<strong> text </strong> Inline strong emphasis (bold)
<ol> Block ordered (ol) and unordered (ul) list;
<li> text </li> list item (li)
<li> text </li>
<li>
<ul>
<li> nested item </li>
<li> nested item </li>
</ul>
</li>
</ol>
1
Tags Used in the <body> Section (Continued)

<dl> Block definition list (dl);
<dt> term 1 </dt> term (dt), and its description (dd)
<dd> description 1 </dd>
<dt> term 2 </dt>
<dd> description 2 </dd>
</dl>
<blockquote> Block block-level quotation
<p> text </p> ...
</blockquote>
<q> text </q> Inline inline-level quotation
<code> text </code> Inline computer code (monospace)
<pre> text </pre> Inline pre-formatted text (preserves whitespace)
<table> Block table of data (table)
<caption> text </caption> description of table (caption)
<tr> table row (tr)
<th> heading 1 </th> table heading cell (hr)
<th> heading 2 </th> normal table cell (td)
</tr>
<tr>
<td> cell 1 </td>
<td> cell 2 </td>
</tr>
...
</table>
<div> ... </div> Block block-level section of a page
<span> ... </span> Inline inline-level section of a page
HTML5 Semantic Grouping Tags

<header> Block Container for a header of a document
<footer> Block Container for a footer of a document
<article> Block A standalone piece of content (e.g., entire blog post including title, author, etc.)
<section> Block A piece of content that is part of another (e.g., a chapter section of a reading)
Defines some content aside from the content it is placed in (e.g., a sidebar in an
<aside> Block
article)
Specifies the main content of a document. The content inside should be unique to
<main> Block the document and not contain content that is repeated across pages (e.g., sidebars,
nav links, search bars, etc.)
2
HTML Input Tags
Note that input tags are inline tags.

<button type="type"> Inline clickable button
content type can be submit, reset, button
</button>
<input type="type" name="name"> Inline form input tag
content type can be text, number, submit, reset,
</input> checkbox, radio, file, etc.
<textarea rows="num" cols="num"> inline multi-line text input box
initial text
</textarea>
<label> text </label> inline clickable text label around a form control
<select> inline drop-down selection box (select);
<option> text </option> each option within the box (option);
<option> a labeled group of options (optgroup);
<optgroup label="text">
<option> text </option>
<option> text </option>
</optgroup>
...
</select>
<fieldset> block a grouped set of form fields with a legend
<legend> text </legend> content
</fieldset>
HTML Entities Reference

Result Description Entity Name
non-breaking space
< less than <
> greater than >
& ampersand &
© copyright ©
3
CSS
For the following property and value tables, anything emphasized represents values that should be replaced with
specific units (e.g., length should be replaced with a px, pt, or em for many properties, and color should be
replaced with a valid color value such as a hex or rgb code).
A use of | refers to separation of possible values (where you cannot provide two of these possible values for one
property) and [value value value] refers to a grouping of possible values that can optionally be used together
(e.g., [h-shadow v-shadow blur spread color] for box-shadow).
Selector Types
Name Description Example

Universal Any element * { font: 10pt Arial; }
Element Any element of a given type h1 { text-decoration: underline; }
Grouping Multiple elements of different types h1, h2, h3 { color: purple; }
Class Elements with the given class name .example { text-decoration: underline; }
Id Single element with the given id #example { text-decoration: overline; }
Descendant Elements that are children at any #example h1 { text-decoration: underline; }
level of another specified element
Child Elements that are direct children of #example > p { font-weight: bold; }
another specified element
Attribute Elements that have the specified at- input[selected] - inputs that have the selected attribute
tribute
input[name=’test’] - inputs that have a name ’test’
Background Styles
Property Values
background-attachment scroll | fixed
background-color color | transparent
background-image url | none
background-origin border-box | padding-box | content-box
background-position top left | top center | top right |
center left | center center | center right |
bottom left | bottom center | bottom right
[x-% y-% ] | [x-pos y-pos ]
background-size length | % | auto | cover | contain
background-repeat repeat | repeat-x | repeat-y | no-repeat
background-attachment scroll | fixed
4
Border Styles
Note: Replace ’*’ with any side of the border (top, right, left, bottom) for the desired effect.
Example style: ’border: 2px solid red’ applies a solid red border with a width of 2px to all four sides of
the element, while ’border-left: 2px solid red’ only applies that border to the left border’.
Property Values
border, border-* (shorthand) border-width, border-*-width
border-style, border-*-style
border-color, border-*-color
border-width, border-*-width thin | medium | thick | length
border-style, border-*-style none | hidden | dotted | dashed | solid |
double | groove | rigid | inset | outset
border-color, border-*-color color
box-shadow none | inset | [h-shadow v-shadow blur spread color ]
border-radius length
Font and Text Styles
Property Values
font-style normal | italic | oblique | inherit
font-family fontname
font-size length | %
font-weight normal | bold | inherit
text-align left | right | center | justify
text-decoration none | [underline overline line-through blink]
text-shadow none | [color length ]
letter-spacing, word-spacing normal | length | %
text-indent length | %
text-transform none | capitalize | uppercase | lowercase
list-style-type none | asterisks | box | check | diamond | disc | hyphen |
square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | lower-greek | upper-greek |
lower-latin | upper-latin | footnotes
list-style-image none | url
Color Values
Value Description
colorname standard name of color, such as red, blue, purple, etc.
rgb(redvalue, greenvalue,
Example: red = rgb(255, 0, 0) or red = rgb(100%, 0, 0)
bluevalue)
#RRGGBB Example: red = #FF0000
5
Box Model
Property Values
float left | right | none
height, width auto | length | %
min-height, max-height none | length | %
min-width, max-width
margin, margin-* auto | length | %
padding, padding-* length | %
display none | inline | block | inline-block | flex |
list-item | compact | table | inline-table
overflow, overflow-x, overflow-y visible | hidden | scroll |
auto | no-display | no-content
clear left | right | both | none
Flex Box
(on next page)
6
Property Values Element Type Description
display flex Flex Container Sets all children to become ’flex-items’
justify-content Flex container Indicates how to position the flex-items
in the parent container
flex-start
flex-end
center
space-around
space-between
flex-direction row | row-reverse | Flex container Indicates if the container flows horizon-
column | column-reverse tally (row) or vertically (column)
align-items stretch (default) Flex container Indicates how to space the items inside
the container along the cross axis
flex-start
flex-end
center
baseline
flex-basis auto (default) | length | Both Specifies the default size of an element
% before the extra space is distributed
among the flex-items
order number Flex item Specifies the order in which the ele-
ment appears in the flex container (by
default, flex items are laid out in the
source order)
align-self flex-end | flex-start | Flex item Indicates where to place this specific
center | baseline | item along the cross axis
stretch (default)
7

HTML Css Ref

Uploaded by

Copyright:

Available Formats

HTML Css Ref

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Css Ref

Uploaded by

Copyright:

Available Formats

CSE 154: Web Programming

Final Exam “Cheat Sheet”

Tags Used in the <body> Section

Tag Display Description

Tag Display Description

HTML5 Semantic Grouping Tags

Tag Display Description

Tag Display Description

HTML Entities Reference

Name Description Example

Font and Text Styles

You might also like