HTML/CSS Review for Website Course

Common HTML Tags

<blockquote> A section that is quoted from another source;
usually indented and in quotes
<br> A single line break; has no end tag
<container> A div block that already has preset properties
<div> A block/section containing other HTML; divs can be nested (see glossary)
<h1>...<h6> Headings in decreasing order of importance
<hr> A horizontal rule (line) to separate sections;
has no end tag
<i> Italicized text
<p> A block of paragraph text
<span> In-line CSS similar to div tag, used to customize words/phrases within text
<strong> Bold text
<u> Underlined text
&nbsp; Creates a space that is visible on a web page;
in HTML all other white space is ignored.
Not a tag, but helpful anyway!

HTML Images

The HTML tag used to link images to a web page is <img> (this does not have an end tag).

<img width="200"
  src="http://www.fake.com/laptop.jpg"
  alt="Image of laptop">

Attributes:
width="200" or height="500" Optional. Note that the image is proportional, so typically you either set the width or the height, not both.
src="your address" Required. This is the web address of your image.
alt="your words" Optional. Provides alternate text for images that for some reason cannot be displayed.

HTML Links (or hyperlink)

The HTML anchor tag <a> is used to link to a destination URL. Note that an end tag is required.

<a href="www.fake.com/test.html"
  target="_blank">Anchor Text</a>

Attributes:
href="your destination" Required. Your destination web page.
target="_blank" Optional. Opens the link in a new tab.
Anchor Text Required. Users click on the anchor text to reach the link target. This might say something like "Contact Us".

Common CSS Properties

background-color Set the background color of a component
border Add a border to an element. Set the width, style and color as follows:
  border: 2px solid #eeeeee
  border: 1px dashed black
Other styles: double, dotted
border-radius Round the corners of an element's outer border
color Set the color of the text
font-family Specifies the font for an element, such as "Times New Roman" or "Arial". Your Weebly theme provides a list of its supported fonts.
font-size Define the size of the text either in pixels (px), or relative to parent element (%), or in em units which is relative to the current font-size (2em means twice the size of the current font). Using em makes the font scalable across multiple devices.
font-style Set font style: normal, italic
font-weight Set the thickness of the text characters: normal, bold, bolder, lighter
line-height Determines the amount of space above and below the text. Helpful when you find lines in paragraphs or multi-line headers too far apart. Typically set in a unitless value (e.g. line-height: 1.5) so that it is proportional to the font-size.
margin Add space around the outside of an element. To center an element, use
"margin: 0 auto".
padding Clear an area around the content (text, image) inside an element
span Used to group elements for styling purposes (using the class or id attributes). For example, changing color or font weight for certain words within a paragraph <p>.
text-align Specify the horizontal alignment of text in an element (right, left, center)
width Set the width of an element not including padding, borders or margins. The min-width and max-width properties override the width property. Width can be set as % or in pixels (px).

CSS Hovering

The :hover selector is used to select elements when your mouse hovers over them, thereby providing the option to change the styling of the element.

In this example, an h1 header is black by default, but when hovering over the header the color of the text changes to pink.

h1 {
   color: black;
}
h1:hover {
   color: pink;
}