Lecture 4 Cascading Style Sheep.

Slides:

Advertisements

Similar presentations

CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.

Advertisements

Cascading Style Sheets

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

Today CSS HTML A project.

MIS 425 Lecture 2 – HTML Navigation, Colors, tables and Styles Instructor: Martin Neuhard

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

Chapter 7 Page Layout Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.

Very quick intro HTML and CSS. Sample html A Web Title.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

CSS Link Styling. The Anchor Element: Link text between the opening and closing can be styled using CSS. Some of the properties that can be set are: font-family,

Session 4: CSS Positioning Fall 2006 LIS Web Team.

SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Web Development & Design Foundations with XHTML Chapter 7 Key Concepts.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

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

1 Lesson 5 Introduction to Cascading Style Sheets HTML and JavaScript BASICS, 4 th Edition Barksdale / Turner.

กระบวนวิชา CSS. What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to.

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

ADVANCED CSS William Neely CEO, Piecewise.com. CSS FONTS AND TEXT CSS ‣ Line-height allows to indicate the amount of space between lines; allows for equal.

Unit 20 - Client Side Customisation of Web Pages

Tutorial 4: Creating page layout with css

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Lecture Cascading Style Sheets (CSS) Internal Style Sheets Classes.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

Cascading style sheets (CSS)

Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 6 Key Concepts 1 Copyright © Terry Felke-Morris.

HTML5 Sections Old structuring elements –body, div, address, blockquote –headings: h1, h2, h3, … –ul, ol, table New structuring elements –header, footer,

Introduction to Programming the WWW I CMSC Winter 2003 Lecture 7.

Lecture 2 - HTML and CSS Review SFDV3011 – Advanced Web Development 1.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Week 8 – Part 2 Page Layout Basics Key Concepts 1.

Course created by Sarah Phillips BBCD Melbourne BAPDCOM Version 1 – April 2013.

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

Web Development & Design Foundations with HTML5 7th Edition

WEB DEVELOPMENT IMMERSIVE BUILDING PAGE LAYOUTS. 2 Box Model Scaling Positioning Boxes Box Aesthetics HTML 5 Semantic Tags CSS Resets TOPICS GENERAL ASSEMBLYWEB.

HTML with Style!. What is a Style Sheet? CSS? Style Sheet CSSCascading Style Sheets A “language” for defining style rules. Rules that tell the browser.

CSS Cascading Style Sheets A very brief introduction CSS, Cascading Style Sheets1.

ACM 262 INTRODUCTION TO WEB DESIGN Week-7 ACM 262 Course Notes.

Introduction to Programming the WWW I CMSC Summer 2003 Lecture 6.

NASRULLAHIBA.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and.

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

CSS Layout Cascading Style Sheets. Lesson Overview  In this lesson, we’ll cover:  Brief CSS review  Creating sections with the tag  Creating inline.

CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.

Cascading Style Sheets (CSS) Internal Style Sheets Classes

Working with Cascading Style Sheets

CSS Layouts: Positioning and Navbars

>> Introduction to CSS

Web Development & Design Foundations with HTML5 8th Edition

Cascading Style Sheets (Layout)

Web Systems & Technologies

Web Development & Design Foundations with HTML5 7th Edition

Chapter 7 Page Layout Basics Key Concepts

Web Development & Design Foundations with HTML5 8th Edition

Web Development & Design Foundations with HTML5

Basics of Web Design Chapter 7 Page Layout Basics Key Concepts

Inserting and Working with Links

Creating a Webpage with External CSS

Web Development & Design Foundations with H T M L 5

Web Development & Design Foundations with HTML5

Web Design and Development

Cascading Style Sheets (CSS)

Web Development & Design Foundations with HTML5

* Lecture 3 Style.

Web Client Side Technologies Raneem Qaddoura

Understanding and Defining Web Page Layout

Presentation transcript:

Lecture 4 Cascading Style Sheep

Six Sheep Pages Each Example Exists to Illustrate one or more aspect of HTML / CSS interaction. CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 01 Default flow of elements, layout Link to external style sheets HTML div elements – use often Hyperlinks Creating and using CSS Style Classes Use of “target” with a link Open stock images - Morguefile CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 01 CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 02 Background Colors Framing elements Borders – very useful Margins and spacing – a first glimpse First introduction to Margins Text color Text size Start thinking about color CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 02 CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 03 Centering of major page elements Floating elements, figures Arrived at in a very indirect fashion Floating elements, figures Strange dance between float and clear Visually distinct headers Caution: You will at first confuse centering elements (div) with centering text. CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 03 CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 04 Navigation - Styling Links Text Decoration – or lack thereof Psuedo Classes Link Visited Hover Active Implements ‘rollover’ behavior CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 04 CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 05 Moving up to HTML5 The header, nav and footer elements What you saw built from scratch is so common it became part of the spec. Shadowing on text A slightly cleaner integration of navigation with header. CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 05 CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 06 Structural Changes Look and feel changes Unique ‘id’ elements where appropriate Look and feel changes Shift to a cleaning less block look External font links – Google Fonts Color choice by someone with talent Another chance to think about colors CSU CT 310 Web Development ©Ross Beveridge 5/1/2019

Sheep 06 CSU CT 310 Web Development ©Ross Beveridge 5/1/2019