Web Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Size: px
Start display at page:

Download "Web Site Design and Development Lecture 9. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM"

Transcription

1 Web Site Design and Development Lecture 9 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

2 Floating elements on a web page By default block elements fll the page from top to bottom and inline elements fll the page from left to right You can override this for all block elements and some inline elements, like img, by using the CSS foat property When you use foat, the following content will wrap around the foated element 2

3 foat The foat property specifes if an element should be foated to the left or right of the following content foat will accept the keywords left or right to foat the element to the left or right respectively In order to foat an element, you will have to set it s width unless it is an img element. img has a default width that is based on the width of the image Example foat: left; 3

4 clear The clear property stops the wrapping of an element s content around a foated element. Clear will accept the keywords left, right, both or none. Left will clear if the foated element is foated left, right for right, and both for left and right. None is the default and says to not clear any foating. Example clear: both; 4

5 Questions? 5

6 Using foat for columns header {width: 960px;} aside { width:200px; foat:left; } main { width: 760px; foat: rihht; } footer {width: 960px; clear: both} 6

7 Using foat for columns header {width: 960px;} aside { width: 150px; foat: left; } main { width: 660px; foat: left; } aside { width: 150px; foat: rihht; } footer {width: 960px; clear: both} 7

8 Using foat for columns header {width: 80%;}.col { width: 25%; foat: left; }.col { width: 25%; foat: left; }.col { width: 25%; foat: left; }.col { width: 25%; foat: left; } footer {width: 80%; clear: both} 8

9 Multiple elements foating to the same side As you saw in the previous 2 examples, multiple elements can be foated the same side In situations like this, the elements will show up in the order in which they appear in the HTML document If you only have two elements, like the frst example, with one to the left and one to the right, the order of the elements in the HTML document does not matter 9

10 Let s try! 10

11 Text columns with CSS3 CSS3 introduced four new properties that allow a block of text to be split into columns like you would see in a newspaper These properties are column-count column-hap column-rule column-span 11

12 column-count The column-count property sets how many columns that your text should be divided into column-count will accept either an number of columns or auto. Auto is the default and will divide the contents based on other properties Example column-count: 3; column-count: auto; 12

13 column-gap The column-gap property is the space between columns Column-gap will accept either an absolute or relative value or the keyword normal. Normal sets the gap to the browser s default Example column-hap: 1.5em; column-hap: normal; 13

14 column-rule The shorthand property column-rule specifes a border that goes in the middle of the column-gap The format for column-rule is (uses values like border): column-rule: [width] style [color]; Example column-rule: double; column-rule: 2px solid; column-rule: 4px double black; 14

15 column-span The column-span property specifes that an element should span across it s parent s columns. Column-span will accept the keywords all or none to specify that the element should span across all columns or none respectively This does not currently work in Firefox Example column-span: all; 15

16 Let s try! 16

17 Explicitly positioning elements In addition to foating elements, you can explicitly position them using the position property alongside the top, bottom, left, right and z-index properties 17

18 position The position property specifes the type of positioning to be used Position will accept the following keywords static: elements are placed top to bottom for block elements and left to rihht for inline. This is the default absolute: element is placed relative to it s closest ancestor that is also explicitly positioned fxed: element is placed relative to the browser window relative: element is placed relative to its normal position 18

19 top, bottom, left and right The top, bottom, left and right properties specify the position of the element when using fxed, absolute or relative positioning fxed and absolute positioninh: top, bottom, left and rihht specify how far from the top, bottom, left and rihht an element should be with relation to either the browser window or the positioned ancestor for fxed and absolute respectively relative positioninh: top, bottom, left and rihht specify how much to ofset the default position of the element in each direction 19

20 top, bottom, left and right continued top, bottom, left and right accept absolute and relative values Typically, you will give the positioned element a width and/or height and use a subset of top, bottom, left and right You can specify top, bottom, left and right and leave of width and height and the browser will adjust the width and height to fll the required space 20

21 Top, bottom, left and right examples top: 15px; left: 20%; bottom: 0; right: 2em; 21

22 z-index The z-index property sets where an element should be in a stack of elements. As you work with position, you will end up with elements that cover other elements, z-index is used to help sort these stacks of elements out. z-index will accept positive and negative numbers as well as auto. Elements with higher numbers are put in front of elements with lower numbers. Auto will use the z-index of the parent element, this is the default. Examples z-index: -1; z-index: 1000; 22

23 Let s try! 23

Web Site Design and Development Lecture 7. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM

Web Site Design and Development Lecture 7. CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Web Site Design and Development Lecture 7 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Box Model All block elements and some inline elements, like img, are placed inside a box This lets you set the height

More information

Using CSS for page layout

Using 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 information

HTML Organizing Page Content

HTML 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 information

FLOATING AND POSITIONING

FLOATING AND POSITIONING 15 FLOATING AND POSITIONING OVERVIEW Understanding normal flow Floating elements to the left and right Clearing and containing floated elements Text wrap shapes Positioning: Absolute, relative, fixed Normal

More information

ITNP43: HTML Lecture 5

ITNP43: HTML Lecture 5 ITNP43: HTML Lecture 5 1 The Box Model Every HTML element (e.g. h2, p etc) lies within a virtual box: Margin area LEFT TOP This is just some text that flows onto two lines. Border RIGHT Padding area BOTTOM

More information

INFS 2150 Introduction to Web Development

INFS 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 information

INFS 2150 Introduction to Web Development

INFS 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 information

Web Site Design and Development Lecture 24

Web Site Design and Development Lecture 24 Web Site Design and Development Lecture 24 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Useful CSS for forms Given the nature of form controls, they come with a lot of default styling but there are still

More information

HTML Organizing Page Content

HTML 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 information

Styles, Style Sheets, the Box Model and Liquid Layout

Styles, 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 information

CSCU9B2: Web Tech Lecture 3

CSCU9B2: Web Tech Lecture 3 CSCU9B2: Web Tech Lecture 3 1 The Box Model Every HTML element (e.g. h2, p etc) lies within a virtual box: Margin area LEFT TOP This is just some text that flows onto two lines. Border RIGHT Padding area

More information

Web Site Design and Development Lecture 13

Web Site Design and Development Lecture 13 Web Site Design and Development Lecture 13 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Normalize.css Normalize.css is a useful project to incorporate into your web pages In their own words, Normalize.css

More information

The Importance of the CSS Box Model

The Importance of the CSS Box Model The Importance of the CSS Box Model Block Element, Border, Padding and Margin Margin is on the outside of block elements and padding is on the inside. Use margin to separate the block from things outside

More information

Adding CSS to your HTML

Adding 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 information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 6. Tables and Columns Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 6. Tables and Columns Objectives Explore the structure of a web table Create table heading and data cells Apply CSS styles to a table Create cells that span multiple

More information

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a

TAG 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 information

Assignments (4) Assessment as per Schedule (2)

Assignments (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 information

Web Site Design and Development Lecture 6

Web Site Design and Development Lecture 6 Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Inheritance Before we talk about font properties, it needs to be known that font properties are inherited by the descendants

More information

Block & Inline Elements

Block & Inline Elements Block & Inline Elements Every tag in HTML can classified as a block or inline element. > Block elements always start on a new line (Paragraph, List items, Blockquotes, Tables) > Inline elements do not

More information

CSS Selectors. element selectors. .class selectors. #id selectors

CSS 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

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review CSS Layout Preview Review Introducting CSS What is CSS? CSS Syntax Location of CSS The Cascade Box Model Box Structure Box Properties Review Style is cascading

More information

Zen Garden. CSS Zen Garden

Zen 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 information

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning

Page 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 information

Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container

Fundamentals of Web Technologies. Agenda: CSS Layout (Box Model) CSS Layout: Box Model. All HTML elements can be considered as a box or a container ITU 07204: Fundamentals of Web Technologies Lecture 6: CSS Layouts (Intro) Dr. Lupiana, D FCIM, Institute of Finance Management Semester 2 Agenda: CSS Layout (Box Model) 2 CSS Layout: Box Model All HTML

More information

CSS for Page Layout Robert K. Moniot 1

CSS for Page Layout Robert K. Moniot 1 CSS for Page Layout 2015 Robert K. Moniot 1 OBJECTIVES In this unit, you will learn: How to use style sheets for layout Controlling text flow, margins, borders, and padding Controlling visibility of elements

More information

Parashar Technologies HTML Lecture Notes-4

Parashar 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 information

Internet Programming 1 ITG 212 / A

Internet 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 information

Creating Layouts Using CSS. Lesson 9

Creating 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 information

ADOBE 9A Adobe Dreamweaver CS4 ACE.

ADOBE 9A Adobe Dreamweaver CS4 ACE. ADOBE 9A0-090 Adobe Dreamweaver CS4 ACE http://killexams.com/exam-detail/9a0-090 ,D QUESTION: 74 You use an image throughout your Web site. You want to be able to add this image to various Web pages without

More information

12/9/2012. CSS Layout

12/9/2012. CSS Layout Dynamic HTML CSS Layout CSS Layout This lecture aims to teach you the following subjects: CSS Grouping and nesting Selectors. CSS Dimension. CSS Display.. CSS Floating. CSS Align. 1 CSS Grouping and nesting

More information

Chapter 3 Style Sheets: CSS

Chapter 3 Style Sheets: CSS WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON Chapter 3 Style Sheets: CSS 1 Motivation HTML markup can be used to represent Semantics: h1 means that an element is a top-level heading

More information

c122sep2214.notebook September 22, 2014

c122sep2214.notebook September 22, 2014 This is using the border attribute next we will look at doing the same thing with CSS. 1 Validating the page we just saw. 2 This is a warning that recommends I use CSS. 3 This caused a warning. 4 Now I

More information

Cascading Style Sheets CSCI 311

Cascading 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 information

CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC

CSS3 Basics. From   & CSS Visual Dictionary Learning Curve Books, LLC CSS3 Basics From www.w3schools.com & CSS Visual Dictionary Learning Curve Books, LLC CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color

More information

Responsive Web Design (RWD)

Responsive Web Design (RWD) Responsive Web Design (RWD) Responsive Web Design: design Web pages, so that it is easy to see on a wide range of of devices phone, tablet, desktop,... Fixed vs Fluid layout Fixed: elements have fixed

More information

Client-Side Web Technologies. CSS Part II

Client-Side Web Technologies. CSS Part II Client-Side Web Technologies CSS Part II Topics Box model and related properties Visual formatting model and related properties The CSS Box Model Describes the rectangular boxes generated for elements

More information

CSS Layout Part I. Web Development

CSS Layout Part I. Web Development CSS Layout Part I Web Development CSS Selector Examples Choosing and applying Class and ID names requires careful attention Strive to use clear meaningful names as far as possible. CSS Selectors Summary

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

<style type="text/css"> <!-- body {font-family: Verdana, Arial, sans-serif} ***set font family for entire Web page***

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

Building Page Layouts

Building 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 information

There are 3 places you can write CSS.

There are 3 places you can write CSS. EXTRA CSS3. #4 Where to write CSS. There are 3 places you can write CSS. The best option is to write CSS is in a separate.css file. You then link that file to your HTML file in the head of your document:

More information

CSS: Cascading Style Sheets

CSS: 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

CSS: Layout Part 2. clear. CSS for layout and formatting: clear

CSS: Layout Part 2. clear. CSS for layout and formatting: clear CSS: Layout Part 2 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 layout and formatting: clear

More information

Cascading Style Sheets for layout II CS7026

Cascading Style Sheets for layout II CS7026 Cascading Style Sheets for layout II CS7026 Understanding CSS float The CSS float property is also a very important property for layout. It allows you to position your Web page designs exactly as you want

More information

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 6 IDM 221: Web Authoring I 2 The Box Model IDM 221: Web Authoring I 3 When a browser displays a web page, it places each HTML block element in a box.

More information

The Benefits of CSS. Less work: Change look of the whole site with one edit

The Benefits of CSS. Less work: Change look of the whole site with one edit 11 INTRODUCING CSS OVERVIEW The benefits of CSS Inheritance Understanding document structure Writing style rules Attaching styles to the HTML document The cascade The box model CSS units of measurement

More information

Appendix D CSS Properties and Values

Appendix 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 information

CSC Website Design, Spring CSS Flexible Box

CSC Website Design, Spring CSS Flexible Box CSC 122 - Website Design, Spring 2017 CSS Flexible Box CSS Flexible Box Layout Module The CSS flexbox can be used to ensure that elements behave predictably when the page layout must accommodate different

More information

COMSC-031 Web Site Development- Part 2

COMSC-031 Web Site Development- Part 2 COMSC-031 Web Site Development- Part 2 Part-Time Instructor: Joenil Mistal December 5, 2013 Chapter 13 13 Designing a Web Site with CSS In addition to creating styles for text, you can use CSS to create

More information

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5

Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 Perfect Student Midterm Exam March 20, 2007 Student ID: 9999 Exam: 7434 CS-081/Vickery Page 1 of 5 NOTE: It is my policy to give a failing grade in the course to any student who either gives or receives

More information

Responsive web design (RWD) CSS3 Media queries. Mobile vs desktop web sites. Web Development 1 CS1115/CS5002

Responsive 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 information

Web Design and Development Tutorial 03

Web 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 information

CS193X: Web Programming Fundamentals

CS193X: Web Programming Fundamentals CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) Today's schedule Today: - Wrap up box model - Debugging with Chrome Inspector - Case study: Squarespace Layout - Flex

More information

Exercise 1: Understand the CSS box model

Exercise 1: Understand the CSS box model Concordia University SOEN 287: Web Programming 1 Winter 2016 Assignment 2 Due Date: By 11:55pm Sunday February 14, 2016 Evaluation: 4% of final mark Late Submission: none accepted Type: Individual Assignment

More information

CSS THE M\SS1NG MANUAL. David Sawyer McFarland. POGUE PRESS" O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo

CSS THE M\SS1NG MANUAL. David Sawyer McFarland. POGUE PRESS O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo CSS THE M\SS1NG MANUAL David Sawyer McFarland POGUE PRESS" O'REILLr Beijing Cambridge Farnham Köln Paris Sebastopol Taipei Tokyo Table of Contents The Missing Credits Introduction xiii I Part One: CSS

More information

COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts

COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts COMP519 Web Programming Lecture 8: Cascading Style Sheets: Part 4 Handouts Ullrich Hustadt Department of Computer Science School of Electrical Engineering, Electronics, and Computer Science University

More information

Graduating to Grid. An Event Apart Orlando

Graduating to Grid. An Event Apart Orlando Graduating to Grid An Event Apart Orlando 2018 And there was great rejoicing. https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6514853-update-css-grid https://caniuse.com/#search=grid

More information

VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012

VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 VISA/APCO/STAC 2P61 WEBSITE CREATION Fall Term 2012 CSS 4 TWO COLUMN LAYOUT MORE ON DIVS Last week: Applied margins borders and padding and calculating the size of elements using box model. Wrote CSS shorthand

More information

epromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION

epromo Guidelines DUE DATES NOT ALLOWED PLAIN TEXT VERSION epromo Guidelines HTML Maximum width 700px (length = N/A) Image resolution should be 72dpi Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than

More information

/* ========================================================================== PROJECT STYLES

/* ========================================================================== 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 information

INFS 2150 / 7150 Intro to Web Development / HTML Programming

INFS 2150 / 7150 Intro to Web Development / HTML Programming XP Objectives INFS 2150 / 7150 Intro to Web Development / HTML Programming Designing a Web Page with Tables Create a text table Create a table using the , , and tags Create table headers

More information

CE419 Web Programming. Session 3: HTML (contd.), CSS

CE419 Web Programming. Session 3: HTML (contd.), CSS CE419 Web Programming Session 3: HTML (contd.), CSS 1 Forms 2 Forms Provides a way to interact with users. Not useful without a server-side counterpart. 3 From Elements

More information

CSS. Shan-Hung Wu CS, NTHU

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

Web Site Design and Development Lecture 5

Web Site Design and Development Lecture 5 Web Site Design and Development Lecture 5 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM CSS CSS stands for Cascading Style Sheets. These style sheets define the look and layout of your HTML elements. A

More information

YouTube Break. https://www.youtube.com/watch?v=lvtfd_rj2he

YouTube Break. https://www.youtube.com/watch?v=lvtfd_rj2he Layout Jeff Avery YouTube Break https://www.youtube.com/watch?v=lvtfd_rj2he Positioning Visual Components Previously, we learned about event handling and model-view-control architecture. Next, we need

More information

Table Basics. The structure of an table

Table Basics. The structure of an table TABLE -FRAMESET Table Basics A table is a grid of rows and columns that intersect to form cells. Two different types of cells exist: Table cell that contains data, is created with the A cell that

More information

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014

1/6/ :28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 1/6/2019 12:28 AM Approved New Course (First Version) CS 50A Course Outline as of Fall 2014 CATALOG INFORMATION Dept and Nbr: CS 50A Title: WEB DEVELOPMENT 1 Full Title: Web Development 1 Last Reviewed:

More information

EECS1012. Net-centric Introduction to Computing. Lecture 5: Yet more CSS (Float and Positioning)

EECS1012. Net-centric Introduction to Computing. Lecture 5: Yet more CSS (Float and Positioning) EECS 1012 EECS1012 Net-centric Introduction to Computing Lecture 5: Yet more CSS (Float and Positioning) Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M.

More information

HTML-5.com itemscopehttp://data-vocabulary.org/breadcrumb<span itemprop="title">html 5</span> itemscopehttp://data-vocabulary.

HTML-5.com itemscopehttp://data-vocabulary.org/breadcrumb<span itemprop=title>html 5</span> itemscopehttp://data-vocabulary. HTML-5.com HTML-5.com is an HTML User's Guide and quick reference of HTML elements and attributes for web developers who code HTML web pages, not only for HTML 5 but for HTML coding in general, with demos

More information

IDM 222. Web Design II. IDM 222: Web Authoring II 1

IDM 222. Web Design II. IDM 222: Web Authoring II 1 IDM 222 Web Design II IDM 222: Web Authoring II 1 Week 6 CSS Grid IDM 222: Web Authoring II 2 CSS Grid Layout (aka "Grid"), is a two-dimensional grid-based layout system that aims to do nothing less than

More information

Web Engineering CSS. By Assistant Prof Malik M Ali

Web 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 information

CSS worksheet. JMC 105 Drake University

CSS 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 information

Create a three column layout using CSS, divs and floating

Create a three column layout using CSS, divs and floating GRC 275 A6 Create a three column layout using CSS, divs and floating Tasks: 1. Create a 3 column style layout 2. Must be encoded using HTML5 and use the HTML5 semantic tags 3. Must se an internal CSS 4.

More information

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin

More information

How to lay out a web page with CSS

How to lay out a web page with CSS How to lay out a web page with CSS A CSS page layout uses the Cascading Style Sheets format, rather than traditional HTML tables or frames, to organize the content on a web page. The basic building block

More information

Web Programming Step by Step

Web Programming Step by Step Web Programming Step by Step Lecture 5 Floating and Positioning Reading: 4.3-4.5 Except where otherwise noted, the contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller. 4.3:

More information

Unit 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 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 information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2)

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) More on Relative Linking. Learning Objectives (2 of 2) Web Development & Design Foundations with HTML5 Ninth Edition Chapter 7 More on Links, Layout, and Mobile Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links

More information

IMY 110 Theme 7 HTML Tables

IMY 110 Theme 7 HTML Tables IMY 110 Theme 7 HTML Tables 1. HTML Tables 1.1. Tables The HTML table model allows authors to arrange data into rows and columns of cells, just as in word processing software such as Microsoft Word. It

More information

CSS. https://developer.mozilla.org/en-us/docs/web/css

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

Navigation. Websites need a formalized system of links to allow users to navigate the site

Navigation. Websites need a formalized system of links to allow users to navigate the site Comm 244 Week 3 Navigation Navigation Websites need a formalized system of links to allow users to navigate the site Navigation Many larger websites have multiple forms of navigation For example, look

More information

CSS: formatting webpages

CSS: 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 information

IMY 110 Theme 11 HTML Frames

IMY 110 Theme 11 HTML Frames IMY 110 Theme 11 HTML Frames 1. Frames in HTML 1.1. Introduction Frames divide up the web browser window in much the same way that a table divides up part of a page, but a different HTML document is loaded

More information

Unit 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 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 information

Comm 244 Week 3. Navigation. Navigation. Websites need a formalized system of links to allow users to navigate the site

Comm 244 Week 3. Navigation. Navigation. Websites need a formalized system of links to allow users to navigate the site Comm 244 Week 3 Navigation Navigation Websites need a formalized system of links to allow users to navigate the site Navigation Many larger websites have multiple forms of navigation For example, look

More information

Web Publishing Intermediate 2

Web Publishing Intermediate 2 Web Publishing Intermediate 2 Building a Three Column Site with divs and float Jeff Pankin Information Services and Technology Table of Contents Course Objectives... 2 The CIG Web Site... 3 Using the Div

More information

Make 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 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 information

CSS FOUNDATIONS IN-DEPTH. The nitty-gritty of css...

CSS FOUNDATIONS IN-DEPTH. The nitty-gritty of css... CSS FOUNDATIONS IN-DEPTH The nitty-gritty of css... What is CSS? Cascading Style Sheets Style sheets define formatting rules that are applied to text, images, forms, and embedded and layout elements. A

More information

When you complete this chapter, you will be able to:

When you complete this chapter, you will be able to: Page Layouts CHAPTER 7 When you complete this chapter, you will be able to: Understand the normal fl ow of elements Use the division element to create content containers Create fl oating layouts Build

More information

Web Design and Implementation

Web Design and Implementation Study Guide 3 - HTML and CSS - Chap. 13-15 Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes

More information

Web Design and Development ACS Chapter 12. Using Tables 11/23/2017 1

Web Design and Development ACS Chapter 12. Using Tables 11/23/2017 1 Web Design and Development ACS-1809 Chapter 12 Using Tables 11/23/2017 1 Using Tables Understand the concept and uses of tables in web pages Create a basic table structure Format tables within web pages

More information

Welcome 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 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 information

2. Write style rules for how you d like certain elements to look.

2. Write style rules for how you d like certain elements to look. CSS for presentation Cascading Style Sheet Orientation CSS Cascading Style Sheet is a language that allows the user to change the appearance or presentation of elements on the page: the size, style, and

More information

What is the Box Model?

What is the Box Model? CSS Box Model What is the Box Model? The box model is a tool we use to understand how our content will be displayed on a web page. Each HTML element appearing on our page takes up a "box" or "container"

More information

Introducing CSS Flexbox Layout

Introducing CSS Flexbox Layout Introducing CSS Flexbox Layout PRESENTED BY Matthew Ellison, UA Europe MATTHEW ELLISON Consultant and trainer for User Assistance tools and technologies since 1993 User of MadCap products since 2006 Certified

More information

Creating and Building Websites

Creating 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 information

What do we mean by layouts?

What do we mean by layouts? What do we mean by layouts? A layout is how you position the elements of your page You can have columns Move paragraphs and sections around And you can do this all without changing the content of your

More information

Cascading Style Sheets (CSS)

Cascading 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 information

To link to an external stylesheet, the link element is placed within the head of the html page:

To link to an external stylesheet, the link element is placed within the head of the html page: CSS Basics An external style sheet is simply a text file (use BBEdit or Textwrangler) containing style rules, saved with the.css extension. It s best practice to keep style sheets for a site grouped within

More information