More CSS Page layout Boriana Koleva Room: C54

Slides:

Advertisements

Similar presentations

LIS650 lecture 4 Thomas Krichel today CSS Properties –Box properties-- List properties –Table properties-- Classification properties –(Audio.

Advertisements

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.

Layout using CSS. Using multiple classes In the head:.important{font-style:italic;}.title{color:red;} In the body: Here's a type of paragraph that is.

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.

CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.

More CSS - Page layout + HTML5 new features Boriana Koleva Room: C54

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.

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.

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

 CSS Presentation and layout is based on the CSS Box Model.  The CSS Box Model states that every element on a page is a rectangular box.  This includes:

MORE Cascading Style Sheets (The Positioning Model)

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.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

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

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.

Lecture 6 More Advanced HTML Boriana Koleva Room: C54

Layout with Styles Castro Chapter 11. Tables vs. CSS You can produce “liquid layouts” (layouts that stretch as the browser is resized) using tables or.

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.

11/12/2015 Box Model Reed Crouch. 11/12/2015  HTML elements can be considered as boxes. In CSS, the term "box model" is used when referring to layout.

CONTROLLING Page layout

Tutorial 4 Creating Page Layouts with CSS

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.

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

Understanding CSS Cascading Style Sheets control the presentation of content in HTML pages Style Sheets separate formatting from the content –Styles defined.

CSS. What does it stand for? ___________________.

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

CHAPTER 15 Floating and Positioning. FLOAT VS. POSITION  Floating an element moves it to the left or right, allowing the following text to wrap around.

Laying out Elements with CSS

( Cascading style sheet )

CSS Layouts: Positioning and Navbars

CSS Layouts: Grouping Elements

Webpage layout using CSS

>> The “Box” Model

3.5 Property Value Forms - There are 60 different properties in 7 categories: - Fonts - Lists - Alignment of text - Margins - Colors - Backgrounds - Borders.

CSS Applications to XML 19-Sep-18.

Objectives Create a reset style sheet Explore page layout designs

Web Development & Design Foundations with HTML5 7th Edition

Creating Layouts Using CSS

Cascading Style Sheets

CSS Borders and Margins.

Second CSS Lecture Applications to XML

MORE Cascading Style Sheets (The Positioning Model)

HTML5 Level I Session III

HTML5 Level I Session III

More CSS 22-Feb-19.

Floating and Positioning

CSS Boxes CS 1150 Fall 2016.

CSS Applications to XML 20-May-19.

CS3220 Web and Internet Programming More CSS

CSS Applications to XML 3-Jul-19.

Positioning Boxes Using CSS

CGS 3066: Web Programming and Design Fall 2019 CSS Part 2

Presentation transcript:

More CSS Page layout Boriana Koleva Room: C54 Email: bnk@cs.nott.ac.uk

Overview The Box Model Using div tags with the box model Borders Margins and padding Using div tags with the box model

The Box Model Each element in a document is considered to be a rectangular box consisting of content area, padding, a border and margins

Borders Every element has a border-style property Controls whether the element has a border and if so, the style of the border border-style values: none, dotted, dashed, and double border-width values: thin, medium (default), thick, or a length value in pixels Border width can be specified for any of the four borders (e.g., border-top-width)

Borders border-color – any color Border color can be specified for any of the four borders (e.g., border-top-color http://www.cs.nott.ac.uk/~bnk/WPS/border.html

Margins The space between the border of an element and its neighbor element The margins around an element can be set with margin-left, etc. - just assign them a length value <img src = "c210.jpg" style = "float: right; margin-left: 0.35in; margin-bottom: 0.35in" />

Padding The distance between the content of an element and its border Controlled by padding, padding-left, etc. http://www.cs.nott.ac.uk/~bnk/WPS/marpads.html

div tags with the box model An example of a two-column page layout Left-column navigation Right-column logo and content http://www.cs.nott.ac.uk/~bnk/WPS/twocolumn.html