Website Design 1 Professor Danne Woowebdesign.dannewoo.com

ΑRTS 214 – 02Spring 2016Thursday 2:00 pm – 5:50 pm I-Building 213

CSS

CSS Styling

- Color- Type- Boxes

- Lists, Tables and Forms

- Images- Layout

CSS

ol {list-style-type: lower-roman;

}

CSS: Lists, Tables and Forms

Bullet Point Styles

RESULT

CSS: Lists, Tables and Forms

Bullet Point Styles

CSS: Lists, Tables and Forms

List Styles

upper-roman

none

disc

circle

square

01 02 03

A B C

a b c

i. ii.

I II III

1 2 3

lower-alpha

decimal-leading-zero

decimal

lower-roman

upper-alpha

UNORDERED ORDERED

CSS

ul {list-style-image: url("star.png");

}

li {margin: 10px 0px 0px 0px;

}

CSS: Lists, Tables and Forms

Images for Bullets

RESULT

CSS: Lists, Tables and Forms

Images for Bullets

CSS

ul {width: 250px;}

li {margin: 10px;}

ul.illuminations {list-style-position: outside;}

ul.season {list-style-position: inside;}

CSS: Lists, Tables and Forms

Positioning the Bullet Point

RESULT

CSS: Lists, Tables and Forms

Positioning the Bullet Point

CSS

ul {list-style: inside circle;width: 300px;}

li {margin: 10px 0px 0px 0px;}

CSS: Lists, Tables and Forms

List Shorthand

RESULT

CSS: Lists, Tables and Forms

List Shorthand

CSS: Lists, Tables and Forms

Table Styles

background-color

padding

width

text-transform

font-size

letter-spacing

border

text-align

:hover

CSS

td {border: 1px solid #0088dd;padding: 15px;

}

table.one {empty-cells: show;

}

table.two {empty-cells: hide;

}

CSS: Lists, Tables and Forms

Border on Empty Cells

RESULT

CSS: Lists, Tables and Forms

Border on Empty Cells

CSS

td {background-color: #0088dd;padding: 15px;border: 2px solid #000000;}

table.one {border-spacing: 5px 15px;}

table.two {border-collapse: collapse;}

CSS: Lists, Tables and Forms

Gaps Between Cells

RESULT

CSS: Lists, Tables and Forms

Gaps Between Cells

CSS: Lists, Tables and Forms

Styling Forms

CSS: Lists, Tables and Forms

Styling Text Inputs

font-sizecolorbackground-color

:focus:hoverbackground-image

borderborder-radius

padding

CSS: Lists, Tables and Forms

Styling Buttons

colortext-shadowborder-bottom

background-colorborder-radius:hover

CSS

div {border-bottom: 1px solid #efefef;margin: 10px;padding-bottom: 10px;width: 260px;}

.title {float: left;width: 100px;text-align: right;padding-right: 10px;}

.submit {text-align: right;}

CSS: Lists, Tables and Forms

Align Form Controls

RESULT

CSS: Lists, Tables and Forms

Align Form Controls

CSS

a {cursor: move;

}

CSS: Lists, Tables and Forms

Cursor Styles

RESULT

CSS: Lists, Tables and Forms

Cursor Styles

CSS

img.large {width: 500px;height: 500px;}img.medium {width: 250px;height: 250px;}img.small {width: 100px;height: 100px;}

CSS: Images

Controlling Image Size

RESULT

CSS: Images

Controlling Image Size

CSS

img.align-left {float: left;margin-right: 10px;}

img.align-right {float: right;margin-left: 10px;}

CSS: Images

Aligning Images

RESULT

CSS: Images

Aligning Images

CSS

img.align-center {display: block;margin: 0px auto;}

img.medium {width: 250px;height: 250px;}

CSS: Images

Centering Images

RESULT

CSS: Images

Centering Images

CSS

p {background-image: url("images/pattern.gif");

}

CSS: Images

Background Images

RESULT

CSS: Images

Background Images

CSS

body {background-image: url("images/header.gif");

background-repeat: repeat-x;}

CSS: Images

Background Images Repeating

RESULT

CSS: Images

Background Images Repeating

CSS

body {background-image: url("images/tulip.gif");

background-repeat: no-repeat;background-attachment: fixed;}

CSS: Images

Background Images Fixed

RESULT

CSS: Images

Background Images Fixed

CSS

body {background-image: url("images/tulip.gif");background-repeat: no-repeat;background-position: center top;}

body {background-image: url("images/tulip.gif");background-repeat: no-repeat;background-position: 50% 50%;}

CSS: Images

Background Images Positioning

RESULT

CSS: Images

Background Images Positioning

CSS

body {background: #ffffff url("images/

tulip.gif") no-repeat top right;}

CSS: Images

Shorthand

RESULT

CSS: Images

Shorthand

CSS: Images

Image Rollovers and Sprites

CSS

a.button {height: 36px;background-image: url("images/button-sprite.jpg");

text-indent: -9999px;display: inline-block;}a#add-to-basket {width: 174px;background-position: 0px 0px;}a#framing-options {width: 210px;background-position: -175px 0px;}

CSS: Images

Image Rollovers and Sprites

CSS

a#add-to-basket:hover {background-position: 0px -40px;}

a#framing-options:hover {background-position: -175px -40px;}

a#add-to-basket:active {background-position: 0px -80px;}

a#framing-options:active {background-position: -175px -80px;}

CSS: Images

Image Rollovers and Sprites

RESULT

CSS: Images

Image Rollovers and Sprites

CSS: Layout

BLOCK LEVEL INLINE

Lorem IpsumLorem ipsum dolor sitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiam ut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.Morbi justo velit,rutrum velplacerat in,adipiscing vitaesapien.

• Duis inerat neque.• Pellentesque habitantmorbi• Praesent accondimentum neque

Lorem ipsum dolor sitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiam ut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.Morbi justo velit,rutrum velplacerat in,adipiscing vitaesapien.

Suspendisse potenti.Duis ineratneque.Pellentesque habitantmorbi tristiquesenectus etnetus etmalesuada famesacturpisegestas.

Building Blocks

CSS: Layout

Lorem Ipsum

Lorem ipsum dolor sitamet,consectetur adipiscing elit.Nullam sodalespretium ipsum.Etiam ut enim augue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.Morbi justo velit,rutrum vel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,vel scelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.Praesent nisidolor,ornare quis sodales id,lacinia ut mauris.

Suspendisse potenti.Duis inerat neque.Pellentesque habitantmorbi tristique senectus etnetus etmalesuada famesacturpis egestas.

Lorem Ipsum Dolor Consectetur

Duis aute irure dolor inreprehenderit invelit esse cillum dolore eu fugiat nulla pariatur.

Containing Elements

CSS: Layout

Controlling Positioning: Normal Flow

orem Ipsum

Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.

Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.

Praesent nisidolor,ornare quis sodales id,lacinia utmauris.

Lorem Ipsum

CSS: Layout

Controlling Positioning: Relative Positioning

orem Ipsum

Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.

Praesent nisidolor,ornare quis sodales id,lacinia utmauris.

Lorem Ipsum

Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.

CSS: Layout

Controlling Positioning: Absolute Positioning

Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.

Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.

Praesent nisidolor,ornare quis sodales id,lacinia utmauris.

Lorem Ipsum

CSS: Layout

Controlling Positioning: Fixed Positioning

Lorem ipsumdolorsitamet,consectetur adipiscingelit.Nullam sodales pretium ipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis eget nunc.

Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.

Praesent nisidolor,ornare quis sodales id,lacinia utmauris.

Lorem Ipsum

CSS: Layout

Controlling Positioning: Floating Elements

Lorem ipsumdolorsitamet,consecteturadipiscingelit.Nullam sodales pretiumipsum.Etiamut enimaugue.Etiammitortor,pulvinar atdictumfaucibus,mollis

eget nunc.

Morbi justo velit,rutrumvel placerat in,adipiscingvitaesapien.Vivamus sitamet lacusenim,velscelerisque justo.Nuncdignissim vehicula urna acporta.Suspendisse potenti.

Praesent nisidolor,ornare quis sodales id,lacinia utmauris.

LoremIpsum

CSS

body {width: 750px;font-family: Arial, Verdana, sans-serif;color: #665544;}

h1 {background-color: #efefef;padding: 10px;}

p {width: 450px;}

CSS: Layout

Normal Flow

RESULT

CSS: Layout

Normal Flow

CSS

p.example {position: relative;top: 10px;left: 100px;

}

CSS: Layout

Relative Positioning

RESULT

CSS: Layout

Relative Positioning

CSS

h1 {position: absolute;top: 0px;left: 500px;width: 250px;}

p {width: 450px;}

CSS: Layout

Absolute Positioning

RESULT

CSS: Layout

Absolute Positioning

CSS

h1 {position: fixed;top: 0px;left: 0px;padding: 10px;margin: 0px;width: 100%;background-color: #efefef;}

p.example {margin-top: 100px;}

CSS: Layout

Fixed Positioning

RESULT

CSS: Layout

Fixed Positioning

CSS

h1 {position: fixed;top: 0px; left: 0px;margin: 0px; padding: 10px;width: 100%;background-color: #efefef;z-index: 10;}

p {position: relative; top: 70px;left: 70px;}

CSS: Layout

Overlapping Elements: z-index

RESULT

CSS: Layout

Overlapping Elements: z-index

CSS

blockquote {float: right;width: 275px;font-size: 130%;font-style: italic;font-family: Georgia, Times, serif;margin: 0px 0px 10px 10px;padding: 10px;border-top: 1px solid #665544;border-bottom: 1px solid #665544;}

CSS: Layout

Floating Elements

RESULT

CSS: Layout

Floating Elements

CSS

body {width: 750px;font-family: Arial, Verdana, sans-serif;color: #665544;}p {float: left;width: 230px;margin: 5px;padding: 5px;background-color: #efefef;}

CSS: Layout

Floating Elements Side-by-Side

RESULT

CSS: Layout

Floating Elements Side-by-Side

CSS

p {width: 230px;float: left;margin: 5px;padding: 5px;background-color: #efefef;}

.clear {clear: left;

}

CSS: Layout

Clearing Floats

RESULT

CSS: Layout

Clearing Floats

CSS

div {border: 1px solid #665544;}

CSS: Layout

Floating Elements Problem

RESULT

CSS: Layout

Floating Elements Problem

CSS

div {border: 1px solid #665544;overflow: auto;width: 100%;

}

CSS: Layout

Floating Elements Solution

RESULT

CSS: Layout

Floating Elements Solution

CSS

.column1of2 {float: left;width: 620px;margin: 10px;}

.column2of2 {float: left;width: 300px;margin: 10px;}

CSS: Layout

Multi-Column Layouts with Floats

RESULT

CSS: Layout

Multi-Column Layouts with Floats

CSS: Layout

Simple Grid Layout

In Class Assignment

Try to incorporate what we discussed today into your website.

- Lists- Forms- Tables- Images- Layout

Homework

Finish programming your homepage and post your HTML and CSS code to your blogs.