Scribd
Upload
445 views34 pages

HTML and CSS Web Design Basics

The document provides information on using HTML and CSS for website design. It discusses adding comments in HTML, different styles (inline, embedded, external style sheets), and properties that can be styled like color, font-family, font-size, font-weight, and text-decoration. It also covers different types of elements (block-level and inline), selectors (contextual and class), and link states.

Uploaded by

michael_dalisay
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
445 views34 pages

HTML and CSS Web Design Basics

The document provides information on using HTML and CSS for website design. It discusses adding comments in HTML, different styles (inline, embedded, external style sheets), and properties that can be styled like color, font-family, font-size, font-weight, and text-decoration. It also covers different types of elements (block-level and inline), selectors (contextual and class), and link states.

Uploaded by

michael_dalisay
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

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 [Link] in your HTML older


/* CSS for [Link] */

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

Type this line before the closing head tag of your [Link] file
<link href=[Link] 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

You might also like