1 Lesson 11. 2 Style Sheets Box Model Content (text,image,table) Margin Padding Border Box.

Slides:

Advertisements

Similar presentations

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.

Advertisements

More CSS CS HTML id attribute 2 Coding Horror! Our mission is to combine programming and “human” factors with geekiness! output  A unique ID for.

Cascading Style Sheets Color and Background Controls Border and Margin Controls (Boxes)

9-May-15 More CSS. 2 A different emphasis CSS is the same for XML as it is for HTML and XHTML, but-- XML contains no display information If you want your.

Today’s objectives Site performance Padding, Margins, Borders

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

CSS provides a way to stray away from the traditional methods of using tables to lay out pages. Success with this technique depends on understanding of.

Tutorial 4: Creating page layout with css

Tutorial 5 Working with the Box Model. XP Objectives Understand the box model Create padding, margins, and borders Wrap text around an image Float a block-level.

CSS: Class 1 Background Images, Controlling Position of Background Images, Add Padding to Page Elements, Add Borders to Elements on a Page.

方框的CSS樣式.

 2003 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

CSS. What does it stand for? Cascading Style Sheets.

Cascading Style Sheets Part 3 Fall, 2007 Modified by Linda Kenney Nov. 12, 2007.

CSS Box Model margin border padding content 23. Box Model Properties PropertyValid valuesExample border-widththin, medium, thick, numberborder-width:

14-Jul-15 CSS Applications to XML. 2 A different emphasis CSS is the same for XML as it is for HTML, but-- HTML already does a pretty good job of layout.

Dreamweaver -- CSS. Dreamweaver -- MX New icons are added in MX Most of the features commonly used in web design, and are same as FrontPage. New feature.

Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:

CSS The Definitive Guide Chapter 8.  Allows one to define borders for  paragraphs  headings  divs  anchors  images  and more.

CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.

Today’s objectives  Assignment 1  Padding, Margins, Borders  Fluid Layout page  Building accessible Table  Element size with padding and border 

Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.

INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images.

Part 4 Introduction to CSS. CSS Table Table Borders table, td, th { border:1px solid black; } Firstname Lastname Bader Ali Paul Manuel The example below.

Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.

Cascading Style Sheets Chapters 5-6 Color and Background Controls Border and Margin Controls.

Web Foundations THURSDAY, OCTOBER 3, 2013 LECTURE 6: CSS CONTINUED.

>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.

 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.

 Cascading Style Sheets (CSS) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.

Advanced Web Development Instructor: Thomas Bombach.

1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  CSS Box Model  CSS properties for border  CSS properties for.

Table Styling. Using CSS to Style Tables: So far, our table styling - such has "width" and "border" - has not used CSS. CSS provides us with many tools.

CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.

CSS Table Styling. Up to this point, as we haven't applied any CSS styling to our tables, our example tables have not been too pleasing to the eye. CSS.

CSS Box Model. What is the Box Model? Each XHTML element appearing on our page takes up a "box" or "container" of space. Each box size is affected not.

End User Computing Applied CSS: Building our course homepage Sujana Jyothi Department of Computer Science

CIS 228 The Internet 10/18/11 Grouping XHTML. CSS Selectors Rule: selector-group { property-declaration* } Selector-group: selector *, Selector: simple-selector.

Tutorial #5 Working with the Box Model. Tutorial #4 Review - CSS Create a homework page Final Project Discussion Exam on Blackboard Styling Lists (List-style-type,

CSS. What does it stand for? ___________________.

CSS. What does it stand for? Cascading Style Sheet.

Chapter 6 - Cascading Style Sheets™ (CSS)

Cascading Style Sheets Boxes

( Cascading style sheet )

CSS Table Styling.

Content (text,image,table)

CSS Layouts: Grouping Elements

>> The “Box” Model

CSS Applications to XML 19-Sep-18.

CSS Table Styling.

CSS Table Styling.

Cascading Style Sheets

CSS Borders and Margins.

Second CSS Lecture Applications to XML

More CSS Page layout Boriana Koleva Room: C54

More CSS 22-Feb-19.

CSS Boxes CS 1150 Fall 2016.

CSS Applications to XML 20-May-19.

CSS Applications to XML 3-Jul-19.

Cascading Style Sheets™ (CSS)

Presentation transcript:

1 Lesson 11

2 Style Sheets Box Model Content (text,image,table) Margin Padding Border Box

3 Dimensions - Example  This is some text contained in a box. This paragraph is contained in a box 100 pixels high. This paragraph is contained in a box 100 pixels wide.

4

5 Example - Padding Padding  Mind is everything; what you think you become!

6

7 Border Properties Border-width Border-style Border-color

8 Values for border styles solid double groove ridge inset outset none

9

10 DIV {margin-bottom: 20px} This is an example of border style using a thin border. This is a medium size border with groove style. This is an example of thick border with border style outset.

11

12 Example - border  This line is written in a box having inset style border and a border width of 1 centimeter. This line is written in a box having ridge style border and different border colors.

13 Example - Margins P{margin-top:100px;margin-bottom:100px;margin- left:200px;margin-right:200px} The great thing in this world is not so much where we are, but in what direction we are moving This heading appears with a bottom margin of 100 pixels

14