Style & CSS

Style & HTML Entities

Today we first talked about entities. Entitites in html are reserved characters that require code to display. for example, since html uses < and > signs in its code, these can’t be inputed as such so for example, To display a less than sign we must write: &lt; or &#60. using these codes will place the correct sign in the browser.

There are several reserved character entities. For some additional examples, click the following link:

http://www.w3schools.com/html/html_entities.asp

You can google html entities also.

Into to CSS

<div> & <span>

Block-Level Elements in html are called <div>. The <div> tag defines a division or a section in an HTML document. divs can be used to group block-elements. This allows the designer to format them with styles.

Inline Elements on the other hand are called <span>. When the text is closed in a span element, you can add styles to the content directly in the line.

These elements allow us to use inline style or style sheets.

CSS stands for Cascaded Style Sheet. It is created in levels and layers similar to a cascading water fall.

STYLE SHEETS

This is an example of how you can style an element in a style sheet:

This will cause all of your h1 headings in you html document to be blue and 12px in size.

h1     { color: blue; font-size: 12px }

The following is an example of how you would create a style sheet in your html doc.

<!DOCTYPE html>

<html>

<head>

<title>Web Design With Style</title>

<meta charset=”utf-8” />

<style type=”text/css”>

h1 {color: blue; font-size: 12px}

</style>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

There are several ways to style. For example:

Styling w/Fonts

  • The following are font family types:
    • Monospace – letters have equal width
      • lllll
      • MMMMM
      • lllll
      • MMMMM
    • sans serif – No wings on letters. Easier to read on screen (Arial)
    • Serif – Wings on letters. Easier to read on print (Times New Roman, Georgia, etc.)
    • Cursive
    • Fantasy

To style your font in a CSS, you would label the element like this:

p { font-family: “Times New Roman”, serif; }

h1 { font-family: “Liberation Sans”, Arial, Helvetica, sans-serif; } if the font name has more than one word, use quotes.

Other sources of web fonts can be found on:

  • Google.com/webfonts for link elements to embed into your webpage.
  • Code.google.com/webfonts for a preview of the font

Some important points to know when coding css fonts are as follows:

  • px = pixel
  • pt = point
  • em = letter and word spacing.
  • #ul {text-decoration: underline; font-style: italic;}
  • #first {font-size: 40px;}
  • Color
  • h1 { color: rgb(125, 0, 225;) or rgb(50%, 0%, 100%);

You can style your background by using the following code:

background-color: {black; }

  • p { color: #0000FF; }
  • ol { color: green; }
  • Check out Kuler.adobe.com for color palets
Advertisements

About cruxstew

I'll update this when I get a chance.
This entry was posted in Uncategorized. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s