CSS: Layout Part 2. clear. CSS for layout and formatting: clear
|
|
- Lester Parrish
- 6 years ago
- Views:
Transcription
1 CSS: Layout Part 2 Robert A. Fulkerson College of Information Science and Technology University of Nebraska at Omaha CSS for layout and formatting: clear clear Using the clear attribute allows you specify that an element should not be allowed to float next to anything. You can clear an element from items floating to the left or the right or both. Slide #2 The HTML Page (see complete page on website) 4. <title>page!</title> 5. <meta charset="utf-8" /> 6. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 7. <link rel="stylesheet" type="text/css" href="css/layout-c.css" /> 8. <!--[if lt IE 9]> 9. <script src=" 10. </script> 11. <![endif]--> 12. </head> 13. <body> 14. <header>this is a header.</header> Slide #3 1
2 layout-c.css example 11. padding: 10px; /* added to push header down a bit for vert centering */ 17. } Slide #4 layout-c.css example 18. #col2 { 19. width: 28%; 20. padding-top: 10px; 21. margin-left: 72%; 22. } 23. #pic { 24. float: left; 25. padding-right: 10px; 27..firstp { 28. margin-top: 0px; 29. } 30. footer { 31. clear: both; /* move footer past any floats on either side */ 32. height: 75px; /* set it to be as tall as image below */ 33. background: url("../images/back.jpg") repeat-x; /* put in the image */ 34. font: italic 0.75em "Times New Roman", serif; /* set the font */ 35. text-align: center; /* center the text */ 36. padding-top: 25px; /* push the text down a bit to center vertically */ 37. } Slide #5 CSS for layout and formatting: border border border-width border-color border-style Using the border family of attributes allows you decorate your boxes with borders. border-width values: sizes or percentages border-style values: none, dotted, dashed, solid, double, groove, ridge, inset, outset border-color values: a color specified by a color name, hex value, RGB or RGBA value. border values: any of the values above in the order width style color. Slide #6 2
3 The HTML Page (see complete page on website) 4. <title>page!</title> 5. <meta charset="utf-8" /> 6. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 7. <link rel="stylesheet" type="text/css" href="css/layout-b.css" /> 8. <!--[if lt IE 9]> 9. <script src=" 10. </script> 11. <![endif]--> 12. </head> 13. <body> 14. <header>this is a header.</header> Slide #7 layout-b.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; /* look, a border! */ 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #8 layout-b.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; /* look, another border! */ 41. } Slide #9 3
4 CSS for layout and formatting: An unordered list for nav Now, let s add a navigation section after the header. In this navigation section, we ll put an unordered list that we ll convert to a navigation menu that fits in with our page s look. Slide #10 The HTML Page (see complete page on website) 4. <title>page!</title><meta charset="utf-8" /> 5. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 6. <link rel="stylesheet" type="text/css" href="css/layout-b.css" /> 7. <!--[if lt IE 9]> 8. <script src=" 9. </script> 10. <![endif]--> 11. </head> 12. <body> 13. <header>this is a header.</header> 14. <nav><ul><li><a href=" Slide #11 layout-b.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #12 4
5 layout-b.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; 41. } Slide #13 CSS for layout and formatting: display display Using the display attribute allows you change the way a particular element is displayed. Values for display are: block, which is like using a sectioning element, where the element takes up an entire chunk of the browser from the left side to the right side, and unless you move it around with positioning, blocks are stacked on top of blocks, like our original page at the very beginning of this example. inline, which is like putting two words in the middle of a sentence. Inline elements display in the line of other elements and cannot have any properties such as height, width, margin and padding added because they re part of the line of text. inline-block, which displays the element inline but allows you to add properties such as height, width, margin, and padding. none, which hides the element completely from displaying in the page. Slide #14 The HTML Page (see complete page on website) 4. <title>page!</title><meta charset="utf-8" /> 5. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 6. <link rel="stylesheet" type="text/css" href="css/layout-d.css" /> 7. <!--[if lt IE 9]> 8. <script src=" 9. </script> 10. <![endif]--> 11. </head> 12. <body> 13. <header>this is a header.</header> 14. <nav><ul><li><a href=" Slide #15 5
6 layout-d.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #16 layout-d.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; 41. } Slide #17 layout-d.css example 42..menu li { /* set how li elements inside the menu class behave */ 43. display: inline; /* change from block to inline */ 44. } Slide #18 6
7 CSS for layout and formatting: The rest of the CSS for nav This is the final set of CSS we ll look at for this example. In this example, we look at a whole bunch of different properties you can use to create a navigation menu using an unordered list. Many of the properties we ve already looked at before, but we throw them into the CSS all at once instead of introducing them one by one. Slide #19 The HTML Page (see complete page on website) 4. <title>page!</title><meta charset="utf-8" /> 5. <link rel="stylesheet" type="text/css" href="css/normalize.css" /> 6. <link rel="stylesheet" type="text/css" href="css/layout-final.css" /> 7. <!--[if lt IE 9]> 8. <script src=" 9. </script> 10. <![endif]--> 11. </head> 12. <body> 13. <header>this is a header.</header> 14. <nav><ul><li><a href=" Slide #20 layout-final.css example 11. padding: 10px; 17. padding-right: 15px; /* to move the border away from the text */ 18. border-right: 2px inset; 19. margin-bottom: 20px; /* to push the footer away from the content */ 20. } Slide #21 7
8 layout-final.css example 21. #col2 { 22. width: 28%; 23. padding-top: 10px; 24. margin-left: 72%; 25. margin-bottom: 20px; /* to push the footer away from the content */ 27. #pic { 28. float: left; 29. padding-right: 10px; 30. } 31..firstp { 32. margin-top: 0px; 33. } 34. footer { 35. clear: both; 36. height: 75px; 37. font: italic 0.75em "Times New Roman", serif; 38. text-align: center; 39. padding-top: 25px; 40. border-top: 3px double blue; 41. } Slide #22 layout-final.css example 42..menu li { 43. display: inline; 44. } 45..menu { /* change the menu class, which is applied to an unordered list */ 46. list-style-type: none; /* make sure there are no bullets */ 47. margin: 0px; /* set the margin */ 48. padding: 7px 0px; /* TB and LR */ 49. text-align: center; /* center the enter ul in avail space: 800px/85% */ 50. } Slide #23 layout-final.css example 51..menu li a:link,a:visited { /* change how links and visited links look */ 52. color: #ffffff; /* text is white */ 53. background-color: #b291c3; /* background is purplish */ 54. text-align: center; /* center text in each link */ 55. padding: 5px; /* put a little breathing room around it */ 56. text-decoration: none; /* remove underlines */ 57. text-transform: uppercase; /* convert to all uppercase */ 58. } 59..menu li a:hover { change how links being hovered over look */ /* 60. color: #b291c3; /* text is now purplish (from above) */ 61. background-color: #ffffff; /* background is now white */ 62. text-align: center; /* the rest of these need to stay the */ 63. padding: 5px; /* same for consistency between non- */ 64. text-decoration: none; /* hovered elements and hovered */ 65. text-transform: uppercase; /* elements */ 66. } Slide #24 8
9 CSS for layout and formatting There are many properties we haven t looked at in this example, including other types of list-style-type values, text-decoration values and other properties. We also didn t look at fixed, relative or absolute positioning. Those are available, but using a fluid layout like we ve put together here allows you to put together a responsive web design layout that adapts to different media/device types such as tablets, mobile phones, etc. If you re interested in layout and design, you are encouraged to go investigate other types of layout and considerations for good design. Slide #25 9
Introduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More informationCSS Selectors. element selectors. .class selectors. #id selectors
CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors
More information<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***
Chapter 7 Using Advanced Cascading Style Sheets HTML is limited in its ability to define the appearance, or style, across one or mare Web pages. We use Cascading style sheets to accomplish this. Remember
More informationCSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson
CSS: Formatting Text Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for text processing: font-family
More informationINFS 2150 Introduction to Web Development
INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationINFS 2150 Introduction to Web Development
Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout
More informationMake a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1
Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web
More informationAdding CSS to your HTML
Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,
More informationCOSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
More informationParashar Technologies HTML Lecture Notes-4
CSS Links Links can be styled in different ways. HTML Lecture Notes-4 Styling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). a { color: #FF0000; In addition,
More informationPage Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning
Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1
More informationNetworks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015
Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015 What is CSS? o CSS (Style Sheet) defines how HTML elements are formatted and displayed. o It helps you easily change an HTML
More informationHTML and CSS a further introduction
HTML and CSS a further introduction By now you should be familiar with HTML and CSS and what they are, HTML dictates the structure of a page, CSS dictates how it looks. This tutorial will teach you a few
More informationAppendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
More informationStyles, Style Sheets, the Box Model and Liquid Layout
Styles, Style Sheets, the Box Model and Liquid Layout This session will guide you through examples of how styles and Cascading Style Sheets (CSS) may be used in your Web pages to simplify maintenance of
More informationChapter 7 BMIS335 Web Design & Development
Chapter 7 BMIS335 Web Design & Development Site Organization Use relative links to navigate between folders within your own site o Sometimes dividing your site into folders makes maintenance and updating
More informationWeb Design and Development Tutorial 03
Table of Contents Web Design & Development - Tutorial 03... 2 Using and Applying CSS to XHTML... 2 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 3 Parent / Child Elements...
More informationZen Garden. CSS Zen Garden
CSS Patrick Behr CSS HTML = content CSS = display It s important to keep them separated Less code in your HTML Easy maintenance Allows for different mediums Desktop Mobile Print Braille Zen Garden CSS
More informationCSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationCSS Styles Quick Reference Guide
Table 1: CSS Font and Text Properties Font & Text Properties Example(s) font-family Font or typeface font-family: Tahoma font-size Size of the font font-size: 12pt font-weight Normal or bold font-weight:
More informationCreating and Building Websites
Creating and Building Websites Stanford University Continuing Studies CS 21 Mark Branom branom@alumni.stanford.edu Course Web Site: http://web.stanford.edu/group/csp/cs21 Week 6 Slide 1 of 28 Week 6 Agenda
More informationHTML Summary. All of the following are containers. Structure. Italics Bold. Line Break. Horizontal Rule. Non-break (hard) space.
HTML Summary Structure All of the following are containers. Structure Contains the entire web page. Contains information
More informationCSC309 Programming on the Web week 3: css, rwd
CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide
More informationGIMP WEB 2.0 MENUS WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR CREATING AN HTML LIST
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: CREATING AN HTML LIST Most horizontal or vertical navigation bars begin with a simple
More information**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationReading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
More informationBuilding Page Layouts
Building Page Layouts HTML & CSS From Scratch Slides 3.1 Topics Display Box Model Box Aesthetics Float Positioning Element Display working example at: h9ps://;nker.io/3a2bf Source: unknown. Please contact
More informationDAY 4. Coding External Style Sheets
DAY 4 Coding External Style Sheets LESSON LEARNING TARGETS I can code and apply an embedded style sheet to a Web page. I can code and apply an external style sheet to multiple Web pages. I can code and
More informationWelcome Please sit on alternating rows. powered by lucid & no.dots.nl/student
Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS
More informationCascading Style Sheet Quick Reference
Computer Technology 8/9 Cascading Style Sheet Quick Reference Properties Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are
More informationHTML/XML. HTML Continued Introduction to CSS
HTML/XML HTML Continued Introduction to CSS Entities Special Characters Symbols such as +, -, %, and & are used frequently. Not all Web browsers display these symbols correctly. HTML uses a little computer
More informationCascade Stylesheets (CSS)
Previous versions: David Benavides and Amador Durán Toro (noviembre 2006) Last revision: Manuel Resinas (october 2007) Tiempo: 2h escuela técnica superior de ingeniería informática Departamento de Lenguajes
More informationModule 2 (VII): CSS [Part 4]
INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals
More informationExploring Computer Science Web Final - Website
Exploring Computer Science Web Final - Website Objective: Create a website using rollover menus. You will be graded on the following: Is your CSS in a separate file from your HTML? Are your colors and
More informationIntroduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100
Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!
More informationCSS: formatting webpages
CSS: formatting webpages Why CSS? separate content from formatting (style) style can be changed easily without rewriting webpages keep formatting consistent across website allows more advanced formatting
More informationGIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar
GIMP WEB 2.0 MENUS Web 2.0 Menus: Horizontal Navigation Bar WEB 2.0 MENUS: HORIZONTAL NAVIGATION BAR Hover effect: You may create your button in GIMP. Mine is 122 pixels by 48 pixels. You can use whatever
More informationBasic CSS Lecture 17
Basic CSS Lecture 17 Robb T. Koether Hampden-Sydney College Wed, Feb 21, 2018 Robb T. Koether (Hampden-Sydney College) Basic CSSLecture 17 Wed, Feb 21, 2018 1 / 22 1 CSS 2 Background Styles 3 Text Styles
More informationUNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013
UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 SUBJECT CODE : SCSV1223 (Section 05) SUBJECT NAME : WEB PROGRAMMING YEAR/COURSE : 1SCSV TIME : 2.00 4.00 PM DATE : 18 APRIL 2013 VENUE : KPU 10
More informationControlling Appearance the Old Way
Webpages and Websites CSS Controlling Appearance the Old Way Older webpages use predefined tags - - italic text; - bold text attributes - Tables (and a few other elements) use specialized
More informationCSS مفاهیم ساختار و اصول استفاده و به کارگیری
CSS مفاهیم ساختار و اصول استفاده و به کارگیری Cascading Style Sheets A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document : مسایای استفاده از CSS It lets you separate
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationWEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5
WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 LEARNING OUTCOMES In this chapter, you will learn how to... Describe the evolution of style sheets from print media to the Web List
More informationMore CSS. <link href="filename" type="text/css" rel="stylesheet" /> CS380
1 More CSS HTML id attribute 2 coding Horror! Coding Horror! our mission is to combine programming and human factors
More informationescuela técnica superior de ingeniería informática
Tiempo: 2h escuela técnica superior de ingeniería informática Previous versions: David Benavides and Amador Durán Toro (noviembre 2006) Manuel Resinas (october 2007) Last revision:pablo Fernandez, Cambios
More informationCascading Style Sheets CSCI 311
Cascading Style Sheets CSCI 311 Learning Objectives Learn how to use CSS to style the page Learn to separate style from structure Styling with CSS Structure is separated from style in HTML5 CSS (Cascading
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
More informationCascading Style Sheets
4 TVEZEWXYHMNR LSTVSKVEQY-RJSVQEXMOENITSHTSVSZ RETVSNIOXIQ RERGSZER Q^)ZVSTWO LSWSGM PR LSJSRHYEVS^TS XYLPEZR LSQ WXE4VEL] 4VELE)9-RZIWXYNIQIHSZE% FYHSYGRSWXM CSS Cascading Style Sheets Lukáš Bařinka barinkl@fel.cvut.cz
More informationCSS worksheet. JMC 105 Drake University
CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html
More informationWEBSITE PROJECT 2 PURPOSE: INSTRUCTIONS: REQUIREMENTS:
WEBSITE PROJECT 2 PURPOSE: The purpose of this project is to begin incorporating color, graphics, and other visual elements in your webpages by implementing the HTML5 and CSS3 code discussed in chapters
More informationCSS often uses hyphens in CSS property names but JavaScript uses camel case, e.g. color: blue; p { <!DOCTYPE html> <meta charset="utf-8" /> <head>
1 of 9 CS1116/CS5018 Web Development 2 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Recap To find nodes: queryselector, queryselectorall To create new element
More informationDeccansoft Software Services
Deccansoft Software Services (A Microsoft Learning Partner) HTML and CSS COURSE SYLLABUS Module 1: Web Programming Introduction In this module you will learn basic introduction to web development. Module
More informationHIERARCHICAL ORGANIZATION
A clearly defined home page Navigation links to major site sections HIERARCHICAL ORGANIZATION Often used for commercial and corporate websites 1 Repetition DESIGN PRINCIPLES Repeat visual elements throughout
More informationUsing Dreamweaver CC. 6 Styles in Websites. Exercise 1 Linked Styles vs Embedded Styles
Using Dreamweaver CC 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format
More informationHTML & CSS Cheat Sheet
1 HTML & CSS Cheat Sheet Fall 2017 HTML & CSS Cheat Sheet from Typographic Web Design 3 by Laura Franz Web safe fonts vs web fonts You can expect these web safe fonts to work across most platforms and
More informationDownloads: Google Chrome Browser (Free) - Adobe Brackets (Free) -
Week One Tools The Basics: Windows - Notepad Mac - Text Edit Downloads: Google Chrome Browser (Free) - www.google.com/chrome/ Adobe Brackets (Free) - www.brackets.io Our work over the next 6 weeks will
More informationCreating a CSS driven menu system Part 1
Creating a CSS driven menu system Part 1 How many times do we see in forum pages the cry; I ve tried using Suckerfish, I ve started with Suckerfish and made some minor changes but can t get it to work.
More informationWeb Development & Design Foundations with HTML5
Web Development & Design Foundations with HTML5 KEY CONCEPTS Copyright Terry Felke-Morris 1 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets from print
More informationStudy Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo
Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx
More information/* ========================================================================== PROJECT STYLES
html { box-sizing: border-box; *, *:before, *:after { box-sizing: inherit; img { max-width: 100%; border: 0; audio, canvas, iframe, img, svg, video { vertical-align: middle; /* Remove gaps between elements
More informationCSS: Lists, Tables and the Box Model
CSS: Lists, Tables and the Box Model CISC 282 September 20, 2017 Basics of CSS Style Name classes semantically What the style is intended for not what it does Define and apply styles efficiently Choose
More informationInternet Programming 1 ITG 212 / A
Internet Programming 1 ITG 212 / A Lecture 10: Cascading Style Sheets Page Layout Part 2 1 1 The CSS Box Model top margin top border top padding left margin left border left padding Content right padding
More information2005 WebGUI Users Conference
Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.
More informationWeb Engineering CSS. By Assistant Prof Malik M Ali
Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a
More informationWeb Development & Design Foundations with HTML5
1 Web Development & Design Foundations with HTML5 CHAPTER 3 CSS BASICS Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets
More informationCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)
More informationTutorial 4: Creating Special Effects with CSS
Tutorial 4: Creating Special Effects with CSS College of Computing & Information Technology King Abdulaziz University CPCS-403 Internet Applications Programming Objectives Work with CSS selectors Create
More informationWeb Designer s Reference
Web Designer s Reference An Integrated Approach to Web Design with XHTML and CSS Craig Grannell Graphical navigation with rollovers The final exercise in this chapter concerns navigation with graphical
More informationGoSquared Equally Rounded Corners Equally Rounded Corners -webkit-border-radius -moz-border-radius border-radius Box Shadow Box Shadow -webkit-box-shadow x-offset, y-offset, blur, color Webkit Firefox
More informationCreating Layouts Using CSS. Lesson 9
Creating Layouts Using CSS Lesson 9 CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control
More informationDesigning the Home Page and Creating Additional Pages
Designing the Home Page and Creating Additional Pages Creating a Webpage Template In Notepad++, create a basic HTML webpage with html documentation, head, title, and body starting and ending tags. From
More informationHTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web
HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What
More informationAGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES
CLASS :: 13 12.01 2014 AGENDA SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements TEMPLATE CREATION :: Why Templates?
More informationCSS: Cascading Style Sheets
CSS: Cascading Style Sheets Computer Science and Engineering College of Engineering The Ohio State University Lecture 13 Evolution of CSS MIME type: text/css CSS 1 ('96): early recognition of value CSS
More information<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.
CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,
More informationHTML Organizing Page Content
HTML Organizing Page Content CSS for layout Examples http://www.shinybytes.com/newcss.html Generic Elements Used to create a logical grouping of content or elements on the page Can be customized to describe
More informationThe default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows:
CSS Tutorial Part 2: Lists: The default style for an unordered (bulleted) list is the bullet, or dot. You can change the style to either a square or a circle as follows: ul { list-style-type: circle; or
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
More informationLab 1: Introducing HTML5 and CSS3
CS220 Human- Computer Interaction Spring 2015 Lab 1: Introducing HTML5 and CSS3 In this lab we will cover some basic HTML5 and CSS, as well as ways to make your web app look and feel like a native app.
More informationCSS Box Model. Cascading Style Sheets
CSS Box Model Cascading Style Sheets CSS box model Background Width & height Margins & padding Borders Centering content Changing display type (block vs. inline) The Box Model Background Properties Property
More informationUsing CSS for page layout
Using CSS for page layout Advantages: Greater typographic control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control Increased accessibility
More informationBIM222 Internet Programming
BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements
More informationHTML Organizing Page Content
HTML Organizing Page Content HTML 5 Elements Well supported by current desktop and mobile browsers (known issues with IE 8 and earlier) May be used to divide pages into major sections
More informationResponsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002
1 of 13 CS1115/CS5002 Web Development 1 Dr Derek Bridge School of Computer Science & Information Technology University College Cork Mobile vs desktop web sites A few organization have two web sites, one
More informationUsing Dreamweaver CS6
6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just
More information>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 1 functions.php file Copy the following code and paste it at the end of your themes function custom_style_sheet() { wp_enqueue_style( 'custom-styling',
More informationMultimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3
Multimedia Systems and Technologies Lab class 6 HTML 5 + CSS 3 Instructions to use the laboratory computers (room B2): 1. If the computer is off, start it with Windows (all computers have a Linux-Windows
More informationCSS Module in 2 Parts
CSS Module in 2 Parts So as to familiarize yourself with the basics of CSS before moving onto Dreamweaver, I d like you to do the 2 following Modules. It is important for you to AT LEAST do Part 1. Part
More informationENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3. Created: 2/10/2017
ENGINEERING DATA HUB VISUAL DESIGN SPECIFICATIONS VERSION 3 Created: 2/10/2017 Table of Contents ENGINEERING DATA HUB... 1 DESKTOP VIEW... 3 HEADER... 4 Logo... 5 Main Title... 6 User Menu... 7 Global
More informationGuidelines for doing the short exercises
1 Short exercises for Murach s HTML5 and CSS Guidelines for doing the short exercises Do the exercise steps in sequence. That way, you will work from the most important tasks to the least important. Feel
More informationCSS. Shan-Hung Wu CS, NTHU
CSS Shan-Hung Wu CS, NTHU CSS Zen Garden 2 Outline The Basics Selectors Layout Stacking Order 3 Outline The Basics Selectors Layout Stacking Order 4 Grammar selector { property: value; 5 Example /* for
More informationAnatomy of a Style. Cascaded Style Sheets - CSS. CSS Presentation Description Language. Measurement Specification
CSS Presentation Description Language HTML3:(Hyper Text Markup Language) 1990 Interpreted Language by Web Browser Describes both the structure and format of document XHTML and HTML5 Extensible Hyper Text
More informationFish Eye Menu DMXzone.com Fish Eye Menu Manual
Fish Eye Menu Manual Page 1 of 33 Index Fish Eye Menu Manual... 1 Index... 2 About Fish Eye Menu... 3 Features in Detail... 4 Integrated in Dreamweaver... 6 Before you begin... 7 Installing the extension...
More informationTAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a
> > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any
More informationIntroduction to HTML & CSS. Instructor: Beck Johnson Week 5
Introduction to HTML & CSS Instructor: Beck Johnson Week 5 SESSION OVERVIEW Review float, flex, media queries CSS positioning Fun CSS tricks Introduction to JavaScript Evaluations REVIEW! CSS Floats The
More informationhttp://nma.kcc.hawaii.edu/gargiulo/data/johndoe/spring/art128/2014/companyname1_step3/index.html 1 2 3 4 5 company Name 6 7
More information