1 using cascading style sheets for design cascading style sheets sound intimidating. in reality,...

1

Using Cascading Style Sheets For Design

Cascading Style Sheets sound intimidating. In reality, however, CSS is one of the most convenient tools available to Web developers Rachel Andrew. "The CSS Anthology: 101

Essential Tips, Tricks & Hacks"

Using HTML and JavaScript to Develop Website

2

What we are talking about…

We will look at: » Quick CSS review» Creating Boxes

– Padding– Margin

» Border» Positioning» Creating Call-out box » Using Two Column Output» Using Float» - Floating images» - Float Left» - Float Right» A Large Layout Example.. . » A Little More On Navigation Buttons

3

CSS Review

We saw that CSS can» Used externally or embedded or inline» Centralize the setting of style information (e.g., default

color or text size)» Provide classes and IDs for special situations» Provide a simple roll-over navigation . . .

4





5

Competencies

Be able to » Create boxes » Allow text to flow around images» Use CSS to create layouts

Competency Alert:You need to

know this!

Common Problem Area!

People seem to forget this

6

Creating boxes with CSS

When use CSS all html elements are essentially boxes: » The ‘box’ spans the length of the html element:

<HTML><HEAD><STYLE TYPE="text/css">h1 { background: teal }i { background: blue } </style><TITLE> ID Example </TITLE></HEAD><BODY><P><h1> 3 ways </h1> There are 3 ways to define style sheets:<ol><li><i>Inline styles.</i> These are added to the HTML tags<li><b> Internal stylesheets: </b> defined at beginning of document.</div><li><b> External stylesheets:</b> defined in <i>an external file</i>.</ol></body></html>

<H1> spans the length of page

<I> spans only the html element


know this!

7

Adding Padding You can specify:

» padding-top, padding-bottom» padding-left, padding-right

<HTML><HEAD><STYLE TYPE="text/css">h1 { background: teal; padding-top: 36 px; padding-bottom: 36 px; padding-left: 36 px; padding-right: 36 px;}i { background: blue; padding-top: 36 px; } </style><TITLE> Padding Example </TITLE></HEAD><BODY><P><h1> 3 ways </h1> There are 3 ways to define style sheets:<ol><li><i>Inline styles.</i> These are aadded to the HTML tags<li><b> Internal stylesheets: </b> defined at beginning of document.</div><li><b> External stylesheets:</b> defined in <i>an external file</i>.</ol></body></html>

Padding specifies the area from the HTML element to theborder

Note: Can specify equal padding all around element with: padding: 12px

8

Adding Padding You can also specify:

padding alone for equal spacing around element

<HTML><HEAD><STYLE TYPE="text/css">h4 { padding: 10%; background: blue}</style><TITLE> Padding Example </TITLE></HEAD><BODY><P>There are 3 ways to define style sheets: <h4>Inline styles. These are added to the HTML tags </h4></body></html>

Here 10% guarantees a minimum of 10% of available window for element.

9

Using Margin

Margin: the location of element outside of it

<HTML><HEAD><STYLE TYPE="text/css">h4 { margin-left: 10%; background: blue}h3 { margin-left: 5%; background: green}h3.left { margin-left: 0%; background: red}h3.both { margin-left: 10%; background: pink; padding-left: 10%}</style><TITLE> Padding Example </TITLE></HEAD><BODY><P>There are 3 ways to use style sheets:<h4>Inline styles. These are added to the HTML tags </h4><h3>Embedded styles - Style information at top</h3><h3 class=left>External styles - The are external files </h3><h3 class=both>This specifies both padding and margin </h3></body></html>

Can be specified in % or absolute value.

This shows differences of margin left and padding left

10

Using Border Border: appearance of line around box<HTML><HEAD><STYLE TYPE="text/css">h4 { margin-left: 10%; background: blue; border: solid}h3 { margin-left: 5%; background: green; border:outset}h3.left { margin-left: 0%; background: red; border: dotted}h3.both { margin-left: 10%; background: pink; padding-left: 10%; border:dashed}</style><TITLE> Padding Example </TITLE></HEAD><BODY><P>There are 3 ways to use style sheets:<h4>Inline styles. These are added to the HTML tags </h4><h3>Embedded styles - Style information at top</h3><h3 class=left>External styles - The are external files </h3><h3 class=both>This specifies both padding and margin </h3></body></html>

Other borders include:none, ridge, groove, inset, double

11





12

Positioning Elements

Position refers to where the element is placed WITHIN THE CURRENT block» The upper left-hand corner is position 0,0» Absolute allows you to specify location

<HTML><HEAD><TITLE> Padding Example </TITLE></HEAD><BODY>

<div class="test" style="position: absolute; left: 120px; top: 106px; background:blue"> There are 3 ways to use style sheets:Inline styles. These are added to the HTML tags </div>Embedded styles - Style information at top!

</body></html>

Specify a left location and top location


know this!

13





14

Creating a Call-out box<html><head><style>body {

margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;font-family: verdana, arial, helvetica, sans-serif;color: #ccc;background-color: #333;text-align: center;}

#content {width: 400px; padding: 10px;margin-top: 20px;margin-bottom: 20px;margin-right: auto;margin-left: auto; background: #666;border: 5px solid #ccc;text-align:left; width: 370px;}

</style><div id=content> Announcing Hammers at 50% Off!</div></body>

Will treat entire box as text and centers it.

Align text left in box

Box width, with padding.

15

Creating a simple 2 column layout

<HTML><HEAD><STYLE TYPE="text/css">.top { margin: 10PX; padding: 5%; background: yellow; height: 100px;}.left { position: absolute; left: 10px; top: 170px; width: 48%;}.right { position: absolute; right: 10px; top: 170px; width: 48%;}</style><TITLE> 2-column Example </TITLE></HEAD><BODY><div class=top> Ladies and gentlemen. Here is the news about CSS</div><div class=right> This is an article about content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div><div class=left> This is a left content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div>

Define each block location and then just use the class


know this!

16





17

To Float or Not to Float . . .

Use float for elements that can vary in exact placement.» Can specify a box to float to left side or right.

Box floats left, and the text wraps.

No float.

18

Floating images

<HTML><HEAD><STYLE TYPE="text/css">img { float: right;}</STYLE><TITLE>A Simple Layout</TITLE></HEAD><BODY><img src=homer.gif>Here is an example of a layout with and without float.Using float with imagesis particurally important. It helps to layout things. Without using the CSS float property, things don't look quite right. There used to be a way to do this within HTML, thought the align tags are depreciated now. Anyway I am just checking to see how things look with and without things. </body></html>

Here used float right instead of left

Here moved image tag a couple lines down to show how text wraps at top too.

19

Float can be useful for boxes

Use float for elements that can vary in exact placement.» Can specify a box to float to left side or right.

Box floats left, and the text wraps.

No float.

20

Using Float<HTML><HEAD><LINK REL="STYLESHEET" HREF="layout1.css" TYPE="text/css"><TITLE>A Simple Layout</TITLE></HEAD><BODY><h1 class="float-left">Using the CSS Float for Layout. </h1>

<p class="top">The <b> CSS Float </B> attribute can be used, for layout of boxes. It shows how to create simple layout that is clean and different than what you do with tables.</p><div class="content">This area here would be the main section where I would have lots of valuable content.For score and seven years ago our four fathers ... <>p?</body></html>

21

Float Style .content { margin: 2.5em 3%; font: 1em Georgia, Palatino, Serif; padding: 1.5em; border: 8px groove #c0c0c0; background: #f5f5f5; }

h1.float-left { float: left; width: 9em; margin: 0 0.2em 0 0; background: #eee8aa; border-right: 2px dotted #cd853f; border-bottom: 2px dotted #cd853f; border-top: 2px dotted #cd853f; border-left: 2px dotted #cd853f;}p.top { margin-top: 0; padding: 0.2em; border-top: 3px dotted #696969; background: #ffffe0;}: #ffffe0;

Create the float left with dotted border on right and bottom

The main content area.

Margin on right provides a little space to right of box.

Padding around box. Provide a border type

22

Float Right and Drop Down . . .

<HTML><HEAD><LINK REL="STYLESHEET" HREF="layout2.css" TYPE="text/css"><TITLE>A Simple Layout</TITLE></HEAD><BODY><h2 class="right">Here is a simple float right. </h1>

<p class="default-margin">The <b> CSS Float </B> attribute can be used, for layout of boxes. It shows how to create simple layout that is and different than what you do with tables.</p><div class="content"><span class="drop-cap">T</span>his area here would be the main section where I would have lots of valuable content.For score and seven years ago our four fathers .... Notice how the drop T is used here. </p></body></html>

23

Float Right Layout Example . . .

h2.right { float: right; width: 5em; margin: 0 0 0 0.2em; padding-left: 0.2em; background: #c6c6c6; border-left: 2px dotted #2e8b57; border-bottom: 2px dotted #2e8b57;}

p.default-margin { margin-top: ; padding: 0.4em; border-top: 3px dotted #696969; background: #f0fff0;}

span.drop-cap { float: left; font-size: 1.7em; padding: 0 0.15em; margin: 0 0.15em 0 0; background: #90ee90; border: 3px outset #2e8b57;}

Allow text to float right.

Add border, background.

Create a margin outside box

Create a large font, with a box around the class text

Create area for top left text.

Create dotted on top

24





25

A Large Lay Out Example

<body> <div id=“topbox"> <h1>Happy Harry's Hardware Online</h1></div> <div id="left"> <p class="top">Navigation links: <br> <br> <a href=disney.com> Disney </a> <br> <br> <a href=http://www.cnn.com> CNN </a> <br> <br> <a href=http://indelible-learning.com> Indelible Learning </a> </p> </div> <div class="center_box"> <h1>Tool Of The Week</h1> Our tool of the week is the hammer. You might not realize the value of the hammer. It can drive nails AND take them out. The hammer can be used for many carpenter tasks. </div> <div class="center_box"> <b> Sales </b> Right now we have hammers on sale. <a href="" > Cick here </a> to buy one. </div> <div id="right"> <p class="top">Our site is recommended by <b> The Hardware Guy </b> </div></body>

Top part has id=topbox

Id=left for navigation items

Id=center_box for main content.

Id=right for right hand box


know this!

26

The layout CSS<html> <head> <title>Happy Harry's Hardware On-line </title><style type="text/css" media="screen"> body { margin:0; padding:0; font:1em georgia, "Book Antiqua", palatino,serif; color:#000; background:#fff; height:100%; } h1 { font-size:24px; font-family: helvetica, arial, sans-serif; font-weight: bold; color: #699; background-color: transparent; margin:20px 0; } #topbox { text-align: center; height: 70px; background-color: #c6c6c6; border:1px solid #333; padding:0; }

Default body properties.

Default h1 properties.

Define a top box.

27

The layout CSS #left { position:absolute; left:0; top:90px; padding:0; width:200px; height:100%; color:#333; background:#eaeaea; border:1px solid #333; } .center_box { position: relative; top:20px; margin-left:220px; margin-right:220px; margin-bottom:20px; color:#333; background:#ffc; border:1px solid #333; padding:10px; } #right { position:absolute; right:0; top:90px; padding:0; width:200px; height:100%; color:#333; background:#eaeaea; border:1px solid #333; }

Create left box with absolute position, height 100% of window, width 200px.

Create center_box, create margin around it, position it relative to where it would have been (20px). Give it margins

Define right box. Position it 200PX wide starting on right.

28

The layout CSS

#topbox p { padding:10px; } #left p { padding:0 10px; } #right p { padding:0 10px; } p.top { margin-top:20px; }</style>

Define extra padding for topbox, right and for P tag, and P within the topbox, right, and left.

Create center_box, create margin around it, position it relative to where it would have been (20px). Give it margins

29

Tables VS CSS For Layouts

Control – CSS offers more precise control. Purpose – CSS was designed for page style

including layout. HTML was never designed for a layout tool.W3C says “Authors should use style sheets for layouts and positioning”. http://www.w3.org/TR/WCAG10-HTML-TECHS/#tables-layout

Speed – Its much easier to set up and redesign layouts with CSS VS tables.

30





31

Creating Navigation From CSS

<TITLE> 2-column Example </TITLE></HEAD>< BODY><html><head><title> A Sample menu </title></head><body><h1>Table Menus</h1><p>Here is a simple roll-over navigation technique using CSS<code class="centre"><table id="tablemenu" border=2 cellspacing="2" ><tr><td><a href="">first link</a></td><td><a href="">second link!</a></td><td><a href="">third link</a></td></tr></table>

As you put your cursor over an item, it capitalizes and background changes. Use id=tablemenu to define TD

elements. Rest of table made as normal

32

Creating Navigation From CSS

<<HTML><HEAD><STYLE TYPE="text/css">#tablemenu { width: 100%; margin: 0 auto; border-collapse:collapse; table-layout:fixed; background-color:#66CCFF; td { width:25% text-align: center; padding=8px; } a { text-decoration:none; display:block; font: 14px Arial, sans-serif; font-weight:bold; } a:active{ color: #6633FF; background-color:#66CCFF; } a:hover { color: #6600FF; background-color:#66FFFF; font-variant:small-caps; } }</style>

As you put your cursor over an item, it capitalizes and background changes.

Define tablemenu ID

Center table elements, make 25% of screen

Make active link background color

Make hover background and change caps

33

Summary




34

Hands on Assignment

Alter the 2 column layout<HTML><HEAD><STYLE TYPE="text/css">.top { margin: 10PX; padding: 5%; background: yellow; height: 100px;}.left { position: absolute; left: 10px; top: 170px; width: 48%;}.right { position: absolute; right: 10px; top: 170px; width: 48%;}</style><TITLE> 2-column Example </TITLE></HEAD><BODY><div class=top> Ladies and gentlemen. Here is the news about CSS</div><div class=right> This is an article about content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div><div class=left> This is a left content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div>

Change this code from this displayto this display

Box is 400 Px wide and centered

Border and 50% each

35

One possible Solution<HTML><HEAD><STYLE TYPE="text/css">.align { text-align: center; }.top { margin: 10PX; padding: 5%; background: yellow; height: 100px; text-align:left; width: 400px; font-size: 22pt;}.left { position: absolute; left: 10px; top: 170px; width: 50%; border: solid;}.right { position: absolute; right: 10px; top: 170px; width: 50%; border: dotted;}</style><TITLE> 2-column Example </TITLE></HEAD>

<BODY><div class=align><div class=top> Announcing . . . </div></div><div class=right> This is an article about content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div><div class=left> This is a left content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div>

36

Another Exercise . . . Change the layout again to look like the following:

80%

20%

100%

37

One Possible SolutionHTML><HEAD><STYLE TYPE="text/css">.align { text-align: center; }.top { margin: 10PX; padding: 0; background: yellow; height: 100px; text-align:left; width: 100%; font-size: 22pt; }.left { position: absolute; left: 10px; top: 170px; width: 80%; length: 100%; border: solid;}.right { position: absolute; right: 10px; top: 170px; width: 15%; border: solid;}</style><TITLE> 2-column Example </TITLE></HEAD>

<BODY><div class=align><div class=top> Announcing . . . </div></div><div class=right> This is an article about content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div><div class=left> This is a left content. You see on the web content rules. Why will people both to visit? Is your content fresh? </div>

1 using cascading style sheets for design cascading style sheets sound intimidating. in reality,...

Documents