The Importance of the CSS Box Model

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "The Importance of the CSS Box Model"

Transcription

1 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 it, padding moves the contents away from the edges of the block. The difference becomes clear once you apply backgrounds and borders to an element. Unlike padding, margins are not covered by either the background or border because they are the space outside of the actual element. Remember that when you use padding, padding adds to the containers width/height. See example below: Margin and padding values are set clockwise, starting from the top. Page 1

2 Practical example: Here is an <h2> heading between two paragraphs. As you can see, the margin creates white space between the paragraphs, and the padding (where you see the background gray color) gives it some breathing room. Margin and Padding Values In the above example of the heading, the values for the margin and padding would be: margin: 15px 0 15px 0; padding: 15px 15px 15px 15px; To optimize this line of code further, using shorthand cuts down on repetitive code. Applying the shorthand technique would slim the code down to this: margin: 15px 0; /*--top and bottom = 15px right and left = 0 --*/ padding: 15px; /*--top, right, bottom and left = 15px --*/ Here is what the complete CSS would look like for this heading: h2 { background: #f0f0f0; border: 1px solid #ddd; margin: 15px 0; padding: 15px; Padding makes things grow Keep in mind that padding adds to the total width of your element. For example, if you had specified that the element should be 100 pixels wide, and you had a left and right padding of 10 pixels, then you would end up with 120 pixels in total. 100px (content) + 10px (left padding) + 10px (right padding) = 120px (total width of element) Margin, however, expands the box model but does not directly affect the element itself. This tip is especially handy when lining up columns in a layout! Page 2

3 2. Refresher About Floats Floats are a fundamental element in building CSS-based websites and can be used to align images and build layouts and columns. If you recall how to align elements left and right in HTML, floating works in a similar way. The float property specifies whether a fixed-width box should float, shifting it to the right or left, with surrounding content flowing around it. The float: left value aligns elements to the left and can also be used as a solid container to create layouts and columns. Let s look at a practical situation in which you can use float: left. The float: right value would align elements right, with surrounding elements flowing to the left. Page 3

4 Quick tip: Because block elements typically span 100% of their parent container s width, floating an element to the right knocks it down to the next line. This also applies to plain text that runs next to it because the floated element cannot squeeze in the same line. You can correct this issue in one of two ways: 1. Reverse the order of the HTML markup so that you call the floated element first, and the neighboring element second. 2. Specify an exact width for the neighboring element so that when the two elements sit side by side, their combined width is less than or equal to the width of their parent container. Page 4

5 Internet Explorer 6 (IE6) has been known to double a floated element s margin. So, what you originally specified as a 5-pixel margin becomes 10 pixels in IE6. A simple trick to get around this bug is to add display: inline to your floated element, like so:.floated_element { float: left; width: 200px; margin: 5px; display: inline; /*--IE6 workaround--*/ 3. Refresher on Alignment The days of using the <center> HTML tag are long gone. Let s look at the various ways of centeraligning an element. Horizontal Alignment You can horizontally align text elements using the text-align property. This is quite simple to do, but keep in mind when center-aligning inline elements that you must add display: block. This allows the browser to determine the boundaries on which to base its alignment of your element..center { text-align: center; display: block; /*--For inline elements only--*/ To horizontally align non-textual elements, use the margin property. If both margin-left and margin-right are auto, their used values are equal. This horizontally centers the element with respect to the edges of the containing block. Horizontal alignment can be achieved, then, by setting the left and right margins to auto. This is an ideal method of horizontally aligning non-text-based elements; for example, layouts and images. But when center-aligning a layout or element without a specified width, you must specify a width in order for this to work. To center-align a layout: Page 5

6 .layout_container { margin: 0 auto; width: 960px; To center-align an image (image with a class of center): img.center { margin: 0 auto; display: block; /*--Since IMG is an inline element--*/ Vertical Alignment You can vertically align text-based elements using the line-height property, which specifies the amount of vertical space between lines of text. This is ideal for vertically aligning headings and other text-based elements. Simply match the line-height with the height of the element. h1 { font-size: 3em; height: 100px; line-height: 100px; To vertically align non-textual elements, use absolute positioning. The trick with this technique is that you must specify the exact height and width of the centered element. With the position: absolute property, an element is positioned according to its base position (0,0: the top-left corner). In the image below, the red point indicates the 0,0 base of the element, before a negative margin is applied. By applying negative top and left margins, we can now perfectly align this element both vertically and horizontally. Page 6

7 Here is the complete CSS for horizontal and vertical alignment:.vertical { width: 600px; /*--Specify Width--*/ height: 300px; /*--Specify Height--*/ position: absolute; /*--Set positioning to absolute--*/ top: 50%; /*--Set top coordinate to 50%--*/ left: 50%; /*--Set left coordinate to 50%--*/ margin: -150px px; /*--Set negative top/left margin--*/ Page 7

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

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

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

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

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

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

<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

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

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

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

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

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

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

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

CSS Box Model. Cascading Style Sheets

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

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

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

2005 WebGUI Users Conference

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

COMS 359: Interactive Media

COMS 359: Interactive Media COMS 359: Interactive Media Agenda Review CSS Preview Review Transparent GIF headline Review JPG buttons button1.jpg button.psd button2.jpg Review Next Step Tables CSS Introducing CSS What is CSS? Cascading

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

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

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

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

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes

USER GUIDE. MADCAP FLARE 2017 r3. QR Codes USER GUIDE MADCAP FLARE 2017 r3 QR Codes Copyright 2018 MadCap Software. All rights reserved. Information in this document is subject to change without notice. The software described in this document is

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

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

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use

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

3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal />

3. Each of these mark examples contains an error. a. <input name= country value= Your country here. /> b. <checkbox name= color value= teal /> 1. Decide whether each of these forms should be sent via the GET or POST method: A form for accessing your bank account online A form for sending t-shirt artwork to the printer A form for searching archived

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

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

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

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

Introduction to Web Design CSS Reference

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 information

1 of 7 11/12/2009 9:29 AM

1 of 7 11/12/2009 9:29 AM 1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial

More information

ICT IGCSE Practical Revision Presentation Web Authoring

ICT IGCSE Practical Revision Presentation Web Authoring 21.1 Web Development Layers 21.2 Create a Web Page Chapter 21: 21.3 Use Stylesheets 21.4 Test and Publish a Website Web Development Layers Presentation Layer Content layer: Behaviour layer Chapter 21:

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css charlie.jpg Linking to your HTML You need to link to your css in the of your HTML file.

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

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

Back in the good old days type was set by hand using printing presses.

Back in the good old days type was set by hand using printing presses. CSS LINE-HEIGHT What is leading? Back in the good old days type was set by hand using printing presses. Printed material was created by setting out letters in rows. Each letter was created on an individual

More information

Best Practices for Using the Rich Text Editor

Best Practices for Using the Rich Text Editor Best Practices for Using the Rich Text Editor Overview Many pages in ilearn contain large text entry boxes along with many icons and pull down lists (located above the actual text entry area). These icons

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

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

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

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

Website Design (Weekday) By Alabian Solutions Ltd , 2016

Website Design (Weekday) By Alabian Solutions Ltd ,  2016 Website Design (Weekday) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day 1 HTML Part 1 Intro to the web The web Clients Servers

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

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

HTML/XML. HTML Continued Introduction to CSS

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

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

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 7 IDM 221: Web Authoring I 2 Page Layout Part 1 IDM 221: Web Authoring I 3 Part 1 because part 2 is coming next term (RWD, Flexbox, Grids) Posi%on An

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

Website Design (Weekend) By Alabian Solutions Ltd , 2016

Website Design (Weekend) By Alabian Solutions Ltd ,  2016 Website Design (Weekend) By Alabian Solutions Ltd 08034265103, info@alabiansolutions.com www.alabiansolutions.com 2016 TECHNOLOGIES DATE TIME Day1 Section 1 HTML Part 1 12am 5pm Intro to the web The web

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

Dreamweaver CS5 Lab 2

Dreamweaver CS5 Lab 2 Dreamweaver CS5 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

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

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page

CSS Exercises. Create a basic CSS layout Use BlueFish to open layout.html Create a layout using <div> tags Use a browser (Firefox) to view your page CSS Exercises Exercise 1: Create a basic CSS layout Use BlueFish to open layout.html Create a layout using tags Use a browser (Firefox) to view your page Task 1 Open layout.html in BlueFish a blank

More information

CS193X: Web Programming Fundamentals

CS193X: Web Programming Fundamentals CS193X: Web Programming Fundamentals Spring 2017 Victoria Kirst (vrk@stanford.edu) Today's schedule Announcements: - Office Hours now posted Schedule: - HTML and CSS - Inline vs block - Classes and Ids

More information

3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets

3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers

More information

- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations

- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers

More information

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):

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

In this tutorial, we are going to learn how to use the various features available in Flexbox.

In this tutorial, we are going to learn how to use the various features available in Flexbox. About the Tutorial Flexbox (flexible box) is a layout mode of CSS3. Using this mode, you can easily create layouts for complex applications and web pages. Flexbox layout gives complete control over the

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

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

Dreamweaver Tutorials Working with Tables

Dreamweaver Tutorials Working with Tables Dreamweaver Tutorials This tutorial will explain how to use tables to organize your Web page content. By default, text and other content in a Web page flow continuously from top to bottom in one large

More information

Website Editor. User Guide - Table of Contents. Overview. Use Case(s) Accessing the Tool. Editor Tools. Quick Tab Toolbar. Menu Bar.

Website Editor. User Guide - Table of Contents. Overview. Use Case(s) Accessing the Tool. Editor Tools. Quick Tab Toolbar. Menu Bar. 2016 - Fall Edition Website Editor User Guide - Table of Contents Overview Use Case(s) Accessing the Tool Editor Tools Quick Tab Toolbar Menu Bar Adding Content Inserting Content Inserting Images Styling

More information

Step 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor.

Step 1 Download and Install KompoZer Step by step instructions to build your first web page using KompoZer web editor. All Creative Designs HTML Web Tutorial for PC Using KompoZer New version 2012 now available at: http://www.allcreativedesigns.com.au/pages/tutorials.html Step 1 Download and Install KompoZer Step by step

More information

Working with Tables in Word 2010

Working with Tables in Word 2010 Working with Tables in Word 2010 Table of Contents INSERT OR CREATE A TABLE... 2 USE TABLE TEMPLATES (QUICK TABLES)... 2 USE THE TABLE MENU... 2 USE THE INSERT TABLE COMMAND... 2 KNOW YOUR AUTOFIT OPTIONS...

More information

MTA EXAM HTML5 Application Development Fundamentals

MTA EXAM HTML5 Application Development Fundamentals MTA EXAM 98-375 HTML5 Application Development Fundamentals 98-375: OBJECTIVE 3 Format the User Interface by Using CSS LESSON 3.4 Manage the graphical interface by using CSS OVERVIEW Lesson 3.4 In this

More information

Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework

Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Unveiling the Basics of CSS and how it relates to the DataFlex Web Framework Presented by Roel Fermont 1 Today more than ever, Cascading Style Sheets (CSS) have a dominant place in online business. CSS

More information

What is the box model?

What is the box model? CSS BOX MODEL What is the box model? The CSS box model describes the rectangular boxes that are created for every element in the document tree. The box model components Source: Kindly provided by Hicks

More information

ABOUT CSS Class Styles... 13

ABOUT CSS Class Styles... 13 USC Marshall Information Services Expressions Web 4/HTML/CSS Page Layout The first workshop dealt primarily with HTML which we used to provide content. This workshops addresses formatting our content using

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

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 Sheet

Cascading Style Sheet Extra notes - Markup Languages Dr Nick Hayward CSS - Basics A brief introduction to the basics of CSS. Contents Intro CSS syntax rulesets comments display Display and elements inline block-level CSS selectors

More information

By Ryan Stevenson. Guidebook #3 CSS

By Ryan Stevenson. Guidebook #3 CSS By Ryan Stevenson Guidebook #3 CSS Table of Contents 1. How to Use CSS 2. CSS Basics 3. Text Sizes Colors & Other Styling 4. Element Layout Positioning & Sizing 5. Backgrounds & Borders How to Use CSS

More information

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets Dreamweaver Basics Planning your website Organize site structure Plan site design & navigation Gather your assets Creating your website Dreamweaver workspace Define a site Create a web page Linking Manually

More information

Controlling Appearance the Old Way

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

Understanding the Web Design Environment. Principles of Web Design, Third Edition

Understanding the Web Design Environment. Principles of Web Design, Third Edition Understanding the Web Design Environment Principles of Web Design, Third Edition HTML: Then and Now HTML is an application of the Standard Generalized Markup Language Intended to represent simple document

More information

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks

Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Unit 21 - Creating a Navigation Bar in Macromedia Fireworks Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------

More information

Documentation of the UJAC print module's XML tag set.

Documentation of the UJAC print module's XML tag set. Documentation of the UJAC print module's XML tag set. tag Changes the document font by adding the 'bold' attribute to the current font. tag Prints a barcode. type: The barcode type, supported

More information

Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions

Text and Layout. Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11. This presentation 2004, MacAvon Media Productions Text and Layout Digital Multimedia, 2nd edition Nigel Chapman & Jenny Chapman Chapter 11 This presentation 344 345 Text in Graphics Maximum flexibility obtained by treating text as graphics and manipulating

More information

Specification proposal for resizing replacement in R3 GUI framework

Specification proposal for resizing replacement in R3 GUI framework Author: Richard Smolak Revision History Version 0.7 ARS Table of Contents 1. Purpose... 1 2. Overview... 1 3. Specification... 1 3.1. Resizing algorithms... 1 3.2. Box model... 3 3.3. GOB addtional attributes...

More information

Wood Grain Image Textures

Wood Grain Image Textures Do you ever look at the LightWorks help files when trying to figure out how to wrap a wood image to an object in TurboCAD and wonder why it has to be so complex? Uses Arbitrary Plane Wrapping Uses Local

More information

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

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

CSS: Lists, Tables and the Box Model

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

Managing Your Schoolwires Web Site

Managing Your Schoolwires Web Site Managing Your Schoolwires Web Site 1. Sign in at the district web site. 2. Select the school where your teacher or organization s web site is located as shown below. 3. Select the Teacher or Departments

More information

FEWD START SCREENCAST!!!!

FEWD START SCREENCAST!!!! FEWD START SCREENCAST!!!! LET'S GET EVERYTHING SET UP! 1. Navigate to the FEWD 51 Dashboard (saraheholden.com/fewd51) and download the Lesson 5 starter code and slides. You'll want to keep the dashboard

More information

CSC309 Winter Lecture 2. Larry Zhang

CSC309 Winter Lecture 2. Larry Zhang CSC309 Winter 2016 Lecture 2 Larry Zhang 1 Announcements Assignment 1 is out, due Jan 25, 10pm. Start Early! Work in groups of 2, make groups on MarkUs. Make sure you can login to MarkUs, if not let me

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

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

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

To place an element at a specific position on a page use: 1 2 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

More information

Additional catalogs display. Customize text size and colors.

Additional catalogs display. Customize text size and colors. Collapsible Skin The collapsible skin option displays the catalogs and categories in a collapsible format enabling enhanced navigation on Qnet. Categories can be expanded to view all of the sub categories

More information

Layout with Layers and CSS

Layout with Layers and CSS Layout with Layers and CSS Today we're going to make a Web site layout. Preparatory Step 1. Inside your folder create a new folder and name it layout. 2. Inside the layout folder create a new folder and

More information

CSS Module in 2 Parts

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

Web Design and Development ACS Chapter 11. Creating Lists 11/16/2017 1

Web Design and Development ACS Chapter 11. Creating Lists 11/16/2017 1 Web Design and Development ACS-1809 Chapter 11 Creating Lists 11/16/2017 1 Creating Lists Ordered Lists Unordered Lists Definition Lists Combination and Nesting of Lists Style Lists 11/16/2017 2 Ordered

More information