1 / 37

Using Cascading Style Sheets For Design

Using HTML and JavaScript to Develop Website. 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".

alyssa
Download Presentation

Using Cascading Style Sheets For Design

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Using HTML and JavaScript to Develop Website 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"

  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. 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

  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 Competency Alert: You need to know this! • 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

  7. Adding Padding Padding specifies the area from the HTML element to the border • 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> 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 Can be specified in % or absolute value. <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> This shows differences of margin left and padding left

  10. Using Border <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> • Border: appearance of line around box Other borders include: none, ridge, groove, inset, double

  11. 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

  12. Positioning Elements Competency Alert: You need to know this! • 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

  13. 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

  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. Box width, with padding. Align text left in box

  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 Competency Alert: You need to know this!

  16. 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

  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 images is 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; The main content area. Padding around box. Provide a border type Create the float left with dotted border on right and bottom Margin on right provides a little space to right of box.

  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. Create a margin outside box Add border, background. Create area for top left text. Create dotted on top Create a large font, with a box around the class text

  24. 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

  25. A Large Lay Out Example Competency Alert: You need to know this! <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

  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 Define extra padding for topbox, right and for P tag, and P within the topbox, right, and left. #topbox p { padding:10px; } #left p { padding:0 10px; } #right p { padding:0 10px; } p.top { margin-top:20px; } </style> 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. 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

  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> Define tablemenu ID Center table elements, make 25% of screen Make active link background color As you put your cursor over an item, it capitalizes and background changes. Make hover background and change caps

  33. Summary • 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

  34. Hands on Assignment <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> Alter the 2 column layout Change this code from this display to 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: 100% 80% 20%

  37. One Possible Solution HTML><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>

More Related