Website Design Using HTML and CSS

Adding Comments:
to help other programmers to keep reminders to hide some codes

Comments Syntax:
<!-- Your comment here -->

Tasks: 1. Think of a website name 2. Create a tagline 3. Create a welcome remark 4. Make a web description 5. Give your contact details

Adding Some Style

Styles in HTML Inline Embedded External Style Sheet

Inline Style
Similar to formatting text in Word documents Applies a style to a single element

Example
<p style=color: red; fontweight: bold;>The Q-B-F-JO the L-D.</p>

declaration, property, value

Span Element
<p><span style=color: blue; font-weight: bold;>The Q-BF-J-O</span>the L-D.</p>

Embedded Style sets out the style to be used on a page placed before the closing </head> tag done by using a style element

<style type=text/css> p{ font-weight: bold; color: red; } </style>

selector, declaration, property, value

External Style Sheets - location to place styles on ALL your web pages

Type and save this as style1.css in your HTML older

/* CSS for YourSite.com */

p{
font-weight: bold; color: blue }

Type this line before the closing head tag of your index.html file
<link href=style1.css rel=stylesheet type=text/css />

Styling Options
Property Color Values Use color keywords or hexadecimal values

Font-family

Arial, Verdana, Tahoma, etc

Keywords: xx-small, x-small, small, medium, large, x-large, xxlarge

Font-size

Relative: a percentage (e.g. 100%); em units (1em) Fixed: pixels (e.g. 20px); points (e.g. 12pt)

Font-weight Font-style Text-decoration

bold, normal normal, italic none, underline, overline, line-through

Inline Style

CSS

Embedded Style

Two Types of Elements Block-level Elements Inline Elements

Block-level Elements normally displayed in its own line used as container for other elements

Block-level Elements h1, h2, h3 h6 p div blockquote ul and ol

Inline Elements sits inside another element may be placed inside another inline element

Inline Elements span em strong cite a

Note: inline elements gives limited styling options: change color and font properties

Note: block-level elements may be used to assign fixed text width and height create padding effects assign a block location

Selectors contextual uses the ID class defines a style that can be used over and over to style different elements

Using a Contextual Selector

#tagline p{ font-style: italic font-family: Georgia }

Using a Class Selector

.crazy { color: # 339999 font-family: Mistral }

Using a Class Selector cont. <p class=crazy>Your text here</p>

Link States a:link a:visited a:hover a:active

Setting the Width Each block-level elements width and height can be assigned using the width and height properties