To place an element at a specific position on a page use:

Size: px
Start display at page:

Download "To place an element at a specific position on a page use:"

Transcription

1 1

2 2

3 To place an element at a specific position on a page use: position: type; top: value; right: value; bottom: value; left: value; Where type can be: absolute, relative, fixed (also static [default] and inherit) REMEMBER TRBL (top-right-bottom-left) 3

4 Absolute Positioning Enables you to place an element at specific coordinates Takes element out of normal flow of document Any subsequent content flows into space previously occupied by element position: absolute; left: 15px; top: 10px; Absolute positioning is positioning that has an absolute position on a page. For example, an element may sit on the absolute position of 10 px from the top of the page and 15px from the left of the page. In other words, it has an absolute position on the page and does not change. It is not relative. 4

5 Move an element relative to its default position on the page, where browser would have place the element if style was not applied to it position: relative; Relative positioning is positioning that is relative to another element on a web page. It is not absolute, meaning in relation to the entire page, but is relative to another HTML element. For example, if a absolute positioned div tag is placed inside of a another div tag which is declared with relative positioning, the inner div's tag will not be positioned according to the entire page but according to the boundaries of the outer div tag. 5

6 Fix an element in a precise spot in document window so that while rest of page scrolls, it does not position: fixed; Fixed positioning is positioning which is fixed on a page. This means that even if a user scrolls down a page, the element will be fixed on the screen. It never disappears from a user's view. In other words, it is fixed and viewable always from a user's screen. 6

7 Default No Positioning Added Example Now that we've basically gone over the above definitions, let's do an actual example, so that we can see for ourselves how this works. The best way to show this is to create 2 elements, 2 <div> tag elements. By viewing 2 <div> tags, in relation to each other, we can see how absolute, relative, and fixed positioning works, from a visual point of view, which is most likely the best way to learn this. So we will create 2 <div> tags in HTML with the following coding: <div id="outer"> <div id="inner">some content</div> </div> This is the following CSS code which styles the two <div> tags: #outer { width:300px; height:300px; background:#777; margin:50px; #inner { width:100px; height:100px; background:#999; You can see that the inner lighter gray area is the inner div. And the larger, darker gray area is the outer div. This is how the 2 elements look when one is nested inside the other in its default state. (No positioning has been added to the CSS code.) 7

8 Inner Element Has Absolute Positioning Now we discuss how they will look if we now add absolute positioning to the CSS code of the inner div tag. This means the following line of code is added to the inner div element: position:absolute; The full CSS code for the div tags will now be: #outer { width:300px; height:300px; background:#777; margin:50px; #inner { width:100px; height:100px; background:#999; position: absolute; top:10px; When one div tag is nested in another and the inner div tag is absolute positioned, it's no longer relative according to the outer div element. It's absolute positioned now according to the entire page. So, as in the example above, where we add the line top:10px, the inner div element, even though nested inside the outer div tag, will now be 10px from the top of the page. This means it's no longer contained within the outer div element but is absolute positioned to the page. This only happens when the inner div element is absolute positioned and the outer div is not. You can see that the inner lighter gray area is the inner div. And the larger, darker gray area is the outer div. This is how the 2 elements look when one is nested inside the other with the outer element having no positioning and the inner element being absolute positioned with a 10px margin from the top. 8

9 Outer Div Has Relative Positioning and Inner Div Has Absolute Positioning Now let's go to the case where the outer div has relative positioning and the inner div has absolute positioning. This is now more the desired effect that you're probably looking for. When we declare the outer div tag to have relative positioning and the inner div tag to have absolute positioning, we're saying that the inner tag has absolute positioning relative, not to the page, but to the outer div tag. Since the outer div element is declared to be relative, it functions as a relative element to the inner. Thus, the inner tag does not function absolute to the page but to the outer div element. The full CSS code for the div tags will now be: #outer { width:300px; height:300px; background:#777; margin:50px; position: relative; #inner { width:100px; height:100px; background:#999; position: absolute; top:10px; You can see that the inner lighter gray area is the inner div. And the larger, darker gray area is the outer div. This is how the 2 elements look when one is nested inside the other with the outer element having relative positioning and the inner element being absolute positioned with a 10px margin from the top. 9

10 Both Inner and Outer Div Elements Have Absolute Positioning When both inner and outer div elements have absolute positioning, they produce an effect that is similar to the previous slide (with the outer div having relative positioning and the inner div having absolute positioning). They both are in the same place on the page and have the inner div with a 10px margin from the top of the outer div. However, there is one key difference. With the outer div having absolute positioning, it is fixed on the page at that position. Being that it is not relative and it's absolute, it will stay permanently at that position. If there is any text on the page or any element on the page at that position, it will block or overshadow the text. The full CSS code for the div tags will now be: #outer { width:300px; height:300px; background:#777; margin:50px; position: absolute; #inner { width:100px; height:100px; background:#999; position: absolute; top:10px; You can see that the inner lighter gray area is the inner div. And the larger, darker gray area is the outer div. This is how the 2 elements look when one is nested inside the other with the outer element having absolute positioning and the inner element being absolute positioned with a 10px margin from the top. Unless you know what you are doing, this is probably not what you want. 10

11 Making the Outer Div Have Fixed Positioning To make the div element fixed (both outer and inner div elements), all you have to do is set the outer div element to a fixed position. This would be the full lines of CSS code: #outer { position: fixed; width:300px; height:300px; background:#777; margin:50px; #inner { width:100px; height:100px; background:#999; position: absolute; top:10px; One trick to add so that you can scroll down the page and see that is element is really fixed is to length your body tag, by adding the following code: body { height:2000px; With this code, if you scroll down the page, you will see that the div elements always are displayed, even if you scroll down the page. They are fixed and are always shown. 11

12 Specify stacking order with: z-index: value z-index: 1 z-index: 3 z-index: 2 12

13 Two different styles that allow you to hide elements: Display style Visibility style 13

14 <!DOCTYPE html> <html> <head> <style> h1.visible {visibility: visible h1.hidden {visibility: hidden </style> </head> <body> <h1 class="visible">this is a visible heading</h1> <h1 class="hidden">this is an invisible heading</h1> <p>notice that the invisible heading still takes up space.</p> </body> </html> visibility: hidden Object is hidden but still is part of the page flow display: none Object is hidden and is removed from the page flow 14

15 NO CSS (commented out) 15

16 16

17 With CSS next page 17

18 18

19 19

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

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

CSS stands for Cascading Style Sheets Styles define how to display HTML elements

CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically

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

Positioning in CSS: There are 5 different ways we can set our position:

Positioning in CSS: There are 5 different ways we can set our position: Positioning in CSS: So you know now how to change the color and style of the elements on your webpage but how do we get them exactly where we want them to be placed? There are 5 different ways we can set

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

Web Authoring and Design. Benjamin Kenwright

Web Authoring and Design. Benjamin Kenwright CSS Div Layouts Web Authoring and Design Benjamin Kenwright Outline Review Why use Div Layout instead of Tables? How do we use the Div Tag? How to create layouts using the CSS Div Tag? Summary Review/Discussion

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

INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations

INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations Hun Myoung Park (2/2/2018) Layout & Position: 1 INTERNATIONAL UNIVERSITY OF JAPAN Public Management and Policy Analysis Program Graduate School of International Relations DCC5382 (2 Credits) Introduction

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

Create a cool image gallery using CSS visibility and positioning property

Create a cool image gallery using CSS visibility and positioning property GRC 275 A8 Create a cool image gallery using CSS visibility and positioning property 1. Create a cool image gallery, having thumbnails which when moused over display larger images 2. Gallery must provide

More information

COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS

COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS COMM 2555: Interactive Digital Communication / Spring 2018 Lab 9: Basic layout techniques with CSS Goals Practice working with the CSS box model, positioning and layout Step 1. Create your infrastructure

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

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

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

Thinking inside the box

Thinking inside the box Intro to CSS Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside

More information

NAVIGATION INSTRUCTIONS

NAVIGATION INSTRUCTIONS CLASS :: 13 12.01 2014 NAVIGATION INSTRUCTIONS SIMPLE CSS MENU W/ HOVER EFFECTS :: The Nav Element :: Styling the Nav :: UL, LI, and Anchor Elements :: Styling the UL and LI Elements CSS DROP-DOWN MENU

More information

Chapter 3 CSS for Layout

Chapter 3 CSS for Layout Chapter 3 CSS for Layout Chapter two introduced how CSS is used to manage the style of a webpage, this chapter explores how CSS manages the layout of a webpage. Generally a webpage will consist of many

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

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

CSS: Layout, Floats, and More

CSS: Layout, Floats, and More CSS: Layout, Floats, and More CISC 282 September 27, 2017 Pseudo Selectors CSS selectors are typically document-related Reflect an element's context in the page Nesting, containing block, tag, class(es)...

More information

What if we want the child elements to calculate the offset from the boundaries of the document? CSS LAYOUT. The position Property.

What if we want the child elements to calculate the offset from the boundaries of the document? CSS LAYOUT. The position Property. What if we want the child elements to calculate the offset from the boundaries of the document? CSS LAYOUT The position Property Manesh Jhawar According to W3Schools, The position property specifies the

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

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

Introduction to Cascading Style Sheet (CSS)

Introduction to Cascading Style Sheet (CSS) Introduction to Cascading Style Sheet (CSS) Digital Media Center 129 Herring Hall http://dmc.rice.edu/ dmc-info@rice.edu (713) 348-3635 Introduction to Cascading Style Sheets 1. Overview Cascading Style

More information

Class 3 Page 1. Using DW tools to learn CSS. Intro to Web Design using Dreamweaver (VBUS 010) Instructor: Robert Lee

Class 3 Page 1. Using DW tools to learn CSS. Intro to Web Design using Dreamweaver (VBUS 010) Instructor: Robert Lee Class 3 Page 1 Using DW tools to learn CSS Dreaweaver provides a way for beginners to learn CSS. Here s how: After a page is set up, you might want to style the . Like setting up font-family, or

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

Micronet International College

Micronet International College Name: /50 Class: Micronet International College Level 4 Diploma in Computing Designing and Developing a Website (DDW) Test 2 (20%) QUESTION 1 a) JPEG is a commonly used image file format on the web. What

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

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

Chapter 11 CSS2. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.

Chapter 11 CSS2. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Chapter 11 CSS2 Presented by Thomas Powell Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A. Powell CSS2 CSS2 (http://www.w3.org/tr/rec-css2/ ) was finalized in May 1998

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 14 Lecture outline Discuss HW Intro to Responsive Design Media Queries Responsive Layout

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

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

PIC 40A. Midterm 1 Review

PIC 40A. Midterm 1 Review PIC 40A Midterm 1 Review XHTML and HTML5 Know the structure of an XHTML/HTML5 document (head, body) and what goes in each section. Understand meta tags and be able to give an example of a meta tags. Know

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

INTRODUCTION TO HTML5! CSS Styles!

INTRODUCTION TO HTML5! CSS Styles! INTRODUCTION TO HTML5! CSS Styles! Understanding Style Sheets HTML5 enables you to define many different types of content on a web page, including headings, paragraphs, lists, images, input fields, canvases,

More information

CSS: The Basics CISC 282 September 20, 2014

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

Chapter 6: CSS Layouts

Chapter 6: CSS Layouts Chapter 6: CSS Layouts Learning Outcomes: Identify the four types of CSS positioning: static, relative, fixed and absolute Identify the use of CSS floats Be able to implement HTML and CSS to construct

More information

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

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS

Overview. Part I: Portraying the Internet as a collection of online information systems HTML/XHTML & CSS CSS Overview Part I: Portraying the Internet as a collection of online information systems Part II: Design a website using HTML/XHTML & CSS XHTML validation What is wrong?

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

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

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

Tutorial 4: Creating Special Effects with CSS

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

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address

c122sep814.notebook September 08, 2014 All assignments should be sent to Backup please send a cc to this address All assignments should be sent to p.grocer@rcn.com Backup please send a cc to this address Note that I record classes and capture Smartboard notes. They are posted under audio and Smartboard under XHTML

More information

4/17/2013. Outline. List Styles. List Styles INTRODUCTION TO WEB DEVELOPMENT AND HTML

4/17/2013. Outline. List Styles. List Styles INTRODUCTION TO WEB DEVELOPMENT AND HTML Outline INTRODUCTION TO WEB DEVELOPMENT AND HTML List Styles Table Styles Focus, Active, Before and After Pseudo-classes Content and Counters Display and Visibility Positioning and Flow Lecture 12: Advance

More information

Designing the Home Page and Creating Additional Pages

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

SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS

SEEM4570 System Design and Implementation. Lecture 1 Cordova + HTML + CSS SEEM4570 System Design and Implementation Lecture 1 Cordova + HTML + CSS Apache Cordova Apache Cordova, or simply Cordova, is a platform for building native mobile apps using HTML, CSS and JavaScript E.g.

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

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

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

HTML and CSS a further introduction

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

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website.

Before you begin, make sure you have the images for these exercises saved in the location where you intend to create the Nuklear Family Website. 9 Now it s time to challenge the serious web developers among you. In this section we will create a website that will bring together skills learned in all of the previous exercises. In many sections, rather

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

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

ADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model)

ADDING CSS TO YOUR HTML DOCUMENT. A FEW CSS VALUES (colour, size and the box model) INTRO TO CSS RECAP HTML WHAT IS CSS ADDING CSS TO YOUR HTML DOCUMENT CSS IN THE DIRECTORY TREE CSS RULES A FEW CSS VALUES (colour, size and the box model) CSS SELECTORS SPECIFICITY WEEK 1 HTML In Week

More information

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2

Web Programming and Design. MPT Senior Cycle Tutor: Tamara Week 2 Web Programming and Design MPT Senior Cycle Tutor: Tamara Week 2 Plan for the next 4 weeks: Introduction to HTML tags, creating our template file Introduction to CSS and style Introduction to JavaScript

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

Cascading Style Sheets (Part II)

Cascading Style Sheets (Part II) Cascading Style Sheets (CSSs) (Part II) Page Layout with Styles...1 Offsetting Elements...1 Positioning Elements Absolutely...3 Positioning Elements in 3D...4 Displaying and Hiding Elements...5 Setting

More information

c122jan2714.notebook January 27, 2014

c122jan2714.notebook January 27, 2014 Internet Developer 1 Start here! 2 3 Right click on screen and select View page source if you are in Firefox tells the browser you are using html. Next we have the tag and at the

More information

Higher Computing Science

Higher Computing Science Higher Computing Science Web Design & Development Booklet 2A (of 3) Implementation Examples Contents Introduction Page What s included in this Booklet? 3 Implementation Stage 1 - Website Layout 4 Coding

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

Tutorial 3: Working with Cascading Style Sheets

Tutorial 3: Working with Cascading Style Sheets Tutorial 3: Working with Cascading Style Sheets College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology Objectives Review the history and concepts of CSS Explore

More information

Implementing a chat button on TECHNICAL PAPER

Implementing a chat button on TECHNICAL PAPER Implementing a chat button on TECHNICAL PAPER Contents 1 Adding a Live Guide chat button to your Facebook page... 3 1.1 Make the chat button code accessible from your web server... 3 1.2 Create a Facebook

More information

Introduction. Table Basics. Access 2010 Working with Tables. Video: Working with Tables in Access To Open an Existing Table: Page 1

Introduction. Table Basics. Access 2010 Working with Tables. Video: Working with Tables in Access To Open an Existing Table: Page 1 Access 2010 Working with Tables Introduction Page 1 While there are four types of database objects in Access 2010, tables are arguably the most important. Even when you're using forms, queries, and reports,

More information

AGENDA :: MULTIMEDIA TOOLS :: (1382) :: CLASS NOTES

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

Dynamic Dates with CSS Sprites+

Dynamic Dates with CSS Sprites+ Dynamic Dates with CSS Sprites+ Boston PHP @Microsoft N.E.R.D. Chris Ladd chris@ladditude.com @chrisladd http://www.mariomayhem.com/downloads/sprites/super_mario_bros_sprites.php http://www.mariomayhem.com/downloads/sprites/super_mario_bros_sprites.php

More information

B3: A first introduction to CSS 17/02/2006

B3: A first introduction to CSS 17/02/2006 ! " % % 1 & & ' ( 6 +,-.!! %! 5 7 % ) * +,-. /! ) (& & (& &! ' % 1 '!%!3! 4! % & (& & % % 55 %! " & Font Text Lists Color Background Border & Margin Positioning Visability Letter form, size, boldface,

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

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

THE HITCHHIKERS GUIDE TO HTML

THE HITCHHIKERS GUIDE TO HTML THE HITCHHIKERS GUIDE TO HTML Computer Science I Designing technology solutions Mr. Barrett http://thestrategicblogger.com/ What is HTML Hyper Text Markup Language (HTML) is a markup language for describing

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

GIMP WEB 2.0 MENUS. Web 2.0 Menus: Horizontal Navigation Bar

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

Page Layout Using Tables

Page Layout Using Tables This section describes various options for page layout using tables. Page Layout Using Tables Introduction HTML was originally designed to layout basic office documents such as memos and business reports,

More information

Interactive Design Working with SVGs

Interactive Design Working with SVGs Interactive Design Working with SVGs What are SVGs SVG stands for Scalable Vector Graphic, it is a fi le format available from many vector programs such as Adobe Illustrator. The above artwork was created

More information

READSPEAKER ENTERPRISE HIGHLIGHTING 2.5

READSPEAKER ENTERPRISE HIGHLIGHTING 2.5 READSPEAKER ENTERPRISE HIGHLIGHTING 2.5 Advanced Skinning Guide Introduction The graphical user interface of ReadSpeaker Enterprise Highlighting is built with standard web technologies, Hypertext Markup

More information

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 9 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to

More information

ADDING FUNCTIONS TO WEBSITE

ADDING FUNCTIONS TO WEBSITE ADDING FUNCTIONS TO WEBSITE JavaScript Basics Dynamic HTML (DHTML) uses HTML, CSS and scripts (commonly Javascript) to provide interactive features on your web pages. The following sections will discuss

More information

Introduction to HTML & CSS. Instructor: Beck Johnson Week 5

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

Chapter 9 Introducing JQuery

Chapter 9 Introducing JQuery Chapter 9 Introducing JQuery JQuery is a JavaScript library, designed to make writing JavaScript simpler and so it is useful for managing inputs and interactions with a page visitor, changing the way a

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

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 3 From Last time Introduction to Set Theory implicit and explicit set notation Jaccard

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

SEEM4570 System Design and Implementation Lecture 04 jquery

SEEM4570 System Design and Implementation Lecture 04 jquery SEEM4570 System Design and Implementation Lecture 04 jquery jquery! jquery is a JavaScript Framework.! It is lightweight.! jquery takes a lot of common tasks that requires many lines of JavaScript code

More information

The Marketer s Guide to. Responsive Design

The  Marketer s Guide to. Responsive Design The Email Marketer s Guide to Responsive Design A new design trend is in town You ve heard of it. You ve seen it in action. But how do you actually do it? You probably have a few questions about responsive

More information

Creating a CSS driven menu system Part 1

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

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

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

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

Creating BrightPlates Templates

Creating BrightPlates Templates Creating BrightPlates Templates ON THIS PAGE Generating an HTML Template Editing the HTML for BrightPlates Building Templates for HD/LS Players Additional Steps for Portrait Templates HTML Best Practices

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

ID1354 Internet Applications

ID1354 Internet Applications ID1354 Internet Applications CSS Leif Lindbäck, Nima Dokoohaki leifl@kth.se, nimad@kth.se SCS/ICT/KTH What is CSS? - Cascading Style Sheets, CSS provide the means to control and change presentation of

More information

Developing Apps for the BlackBerry PlayBook

Developing Apps for the BlackBerry PlayBook Developing Apps for the BlackBerry PlayBook Lab # 2: Getting Started with JavaScript The objective of this lab is to review some of the concepts in JavaScript for creating WebWorks application for the

More information