html css basics ii n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML / CSS – Basics II PowerPoint Presentation
Download Presentation
HTML / CSS – Basics II

Loading in 2 Seconds...

play fullscreen
1 / 23

HTML / CSS – Basics II - PowerPoint PPT Presentation


  • 77 Views
  • Uploaded on

HTML / CSS – Basics II. You have the content . Now make it look nice . Remember the Division?. Content. Presentation. Structure. Layout / Design. Back to the HTML- Structure. < html > < head > <title> Some Title</title> </ head > < body > <p> Some < em > content </ em > </p>

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML / CSS – Basics II' - lavada


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html css basics ii

HTML / CSS – Basics II

Youhavethecontent.

Nowmakeitlooknice.

remember the division
Rememberthe Division?

Content

Presentation

Structure

Layout / Design

back to the html structure
Back tothe HTML-Structure

<html>

<head>

<title>Some Title</title>

</head>

<body>

<p>Some<em>content</em></p>

</body>

</html>

back to the html structure1
Back tothe HTML-Structure

<html>  <body>  <p>  <em>

slide8

Syntax

h1 {

font-size: 16pt;

color: green;

}

slide9

Selector

Syntax

h1 {

font-size: 16pt;

color: green;

}

Declaration

slide10

Selector

Property

Value and Unit

Syntax

h1 {

font-size: 16pt;

color: green;

}

Declaration

Property

Value

slide11

Why “Cascade”?

<html>  <body>  <p>  <em>

htmlbody p em{

font-size: inherit;

font-style: italic;

}

slide12

Include Styles

<link href="styles.css" rel="stylesheet" type="text/css" />

slide14

3 Ways of Inclusion

  • Inline Style
  • Embedded Style Sheets
  • External Style Sheets
slide15

1. Inline Style

<p style="color:red;">I’m red!</p>

Very specific, only this very element

dw

slide16

2. Embedded Style Sheet

<style type="text/css">

<!--

p { font-size: 9pt; }

-->

</style>

Only this document

dw

slide17

3. External Style Sheet

<link href="styles.css" rel="stylesheet" type="text/css" />

All the documents;Change once, apply to all (Hooray!)

dw

slide18

3 Ways of Selection

  • Type Selectors
  • Class and ID Selectors
  • Special Seletion
slide19

1. Type Selectors

p {

color:red;

}

Triggers the style of an HTML tag

dw

slide20

2. Class and ID Selectors

.red {

color:red;

}

Triggers the style of an HTML tag that has the attribute class="red"

Appears as often as you wish

dw

slide21

2. Class and ID Selectors

#menu {

margin:0px;

}

Triggers the style of an HTML tag that has the attribute id="menu"

Appears only once

dw

slide22

3. Special Selection

Contextual

#menu ul { list-style:none; }

Short Hand

#content, #footer { width:750px; }

Pseudoselectors

a:hover { color:green; }

slide23

margin

The Box Model

border

padding

Content

paddingedge

contentedge

marginedge

borderedge