Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Colors & Backgrounds Instructor: Joseph DiVerdi,

Slides:



Advertisements
Similar presentations
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
Cascading Style Sheets
/k/k 1212 Cascading Style Sheets Part one Marko Boon
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
Chapter 3 – Designing your web pages Dr. Stephanos Mavromoustakos.
Introduction to CSS.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 4 Key Concepts 1 Copyright © Terry Felke-Morris.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
CSS cont. October 5, Unit 4. Padding We can add borders around the elements of our pages To increase the space between the content and the border, use.
SM5312 week 11: CSS Menus & Navigation Bars1 An Introduction to Cascading Style Sheets CSS Menus and Navigation Bars Nick Foxall.
INTRODUCTORY Tutorial 7 Creating Liquid Layouts. XP Objectives Discern the differences among various types of layouts Create a liquid layout Create a.
CSS BASICS. CSS Rules Components of a CSS Rule  Selector: Part of the rule that targets an element to be styled  Declaration: Two or more parts: a.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
CSS(Cascading Style Sheets )
Web Pages and Style Sheets Bert Wachsmuth. HTML versus XHTML XHTML is a stricter version of HTML: HTML + stricter rules = XHTML. XHTML Rule violations:
กระบวนวิชา 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.
CSS normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
CSS Cascading Style Sheets Brief Introduction
Web Design with Cascading Style Sheet Lan Vu. Overview Introduction to CSS Designing CSS Using Visual Studio to create CSS Using template for web design.
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.
Introduction to Cascading Style Sheets (CSS) Module 2: HTML Basics LESSON 4.
4.01 Cascading Style Sheets
Cascading Style Sheets 1 Color and Backgrounds. Cascading Style Sheets 2 Color and Backgrounds Computer color basics Expression of color values using.
Learning HTML. HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Class – specifies a class.
Introduction to CSS CSS Syntax - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Syntax & Semantics Instructor: Joseph DiVerdi,
1 Background and Text Links CGS3066 Rory J. De Simone.
1 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles are normally stored in Style Sheets  Styles.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
HTML, Part Showing Pictures: The Image Tags Image Tag Format –src short for source –alt for text –Can use absolute or relative pathname.
Adding Graphics to Web Pages. CSS does not have any properties specifically aimed at formatting images Use properties you have already learned, i.e.,
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Adobe Dreamweaver CS3 Revealed CHAPTER THREE: WORKING WITH TEXT AND IMAGES.
HTML tags Some popular ones. Paragraph: separated by a single line of white space Line break NOTE: no end tag is used for this tag Headlines ( through.
INTRODUCTION TO CSS. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features of CSS Features of CSS  Creating Style Sheet Creating Style Sheet.
DIV, Span, CSS.
Fundamentals of WWW Imaging Fort Collins, CO Copyright © XTR Systems, LLC Fundamentals of Web Imaging Instructor: Joseph DiVerdi, Ph.D., MBA.
HTML GUIDE Press F5 and then Click on the links on the left to get to the section you want Section 1: Getting Started Section 2: Moving Banner Section.
Macromedia Dreamweaver 8 Revealed AND GRAPHICS WORKING WITH TEXT.
CSU - DCE Webmaster I HTML - Tables - Fort Collins, CO Copyright © XTR Systems, LLC Designing Web Sites using HTML - Introduction to Tables Instructor:
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.
CSU - DCE Introduction to CSS CSS Colors - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Specifying Color Instructor: Joseph.
Cascading Style Sheets I Embedded Style Sheets. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
CSU - DCE Introduction to CSS CSS Length - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Specifying Length Instructor:
CSU - DCE Introduction to CSS CSS URLs - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Specifying URLs Instructor: Joseph.
Web Design (15) CSS Opacity, Link Colours & Background Images.
CSU - DCE Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Text Control Instructor: Joseph.
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,
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Chapter 4 Frames and Cascading Style Sheets. Frames Frames divide a browser window into two or more separate pieces or panes, with each pane containing.
4.01 Cascading Style Sheets
CSS Layouts: Grouping Elements
Advanced CSS BIS1523 – Lecture 20.
Cascading Style Sheets
Cascading Style Sheets - Building a stylesheet
Colors.
Fixed Positioning.
Introduction to HTML II
Introduction to Cascading Style Sheets (CSS)
Cascading Style Sheets™ (CSS)
Tutorial 3 Working with Cascading Style Sheets
Cascading Style Sheets - Building a stylesheet
Lesson 3: Cascading Style Sheets (CSS) and Graphical Elements
Cascading Style Sheets
4.01 Cascading Style Sheets
Presentation transcript:

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Colors & Backgrounds Instructor: Joseph DiVerdi, Ph.D., MBA

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Body Colors BODY Tag Accepts Several Color Attributes –Text Color –Background Color (or Image) –Link Unvisited or Not Yet Followed –Active (Link) Depressed Mouse Cursor –Visited (Link) Been There, Done That, Got the T-shirt, Saw the Movie... CSS Properties Can Replace These Attributes

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Body Colors Emulate standard HTML behavior BODY {color: black; background-color: white; } A:link {color: red; } A:visited {color: purple; } A:active {color: blue; } Even More Complicated Effects Can Be Achieved

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Body Colors BODY { color: black; background-color: white; } A:link { color: red; } A.external:link { color: green; } A:visited { color: purple; } A.external:visited { color: aqua; } A:active { color: blue; }... Viewers Can Easily Tell the Difference Between Intra-site Links & Off-site Links by Colors

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specifying Element Colors Each Element Can Have Foreground & Background Colors Specified It Is Also Possible to Specify Transparent to Allow the BODY Background to Show Transparent Is the Default for Many Elements H1 { color: black; background-color: transparent; } Specify Both to Pass CSS Validation

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images Background Images Are Included Using URL BODY { color: black; background-color: white; background-image: url(/~diverdi/images/stone.jpeg); } Always Specify Foreground & Background Colors –In Case of Leakage

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Element Background Images Can Be Applied to Individual Elements –Used to Really Emphasize Links With CLASS A.GRID { background-image: url(smallgrid.gif); } –Used to Create a Selective Paragraph Effect P.STAR { background-image: url(/stars.gif); } –Add a Background for a Table Cell TD.NAV { background-image: url(grid.gif); }

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Image Controls Several Different Properties Discussed –Background Repeat –Background Position –Background Attachment –Combined Background

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Repetition Active for Images Smaller Than Monitor background-repeat: repeat | repeat-x | repeat-y | no-repeat Independent Control Over Both Dimensions Moderate Support Across Browsers & OSes –Better With Higher Version Browsers See Figures 6-27 to 6-31 of Textbook For Examples

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Position Shifts Image Whether Repeated or Not background-position: top | center | bottom left | center | right Independent Control Over Both Dimensions Consistent Support Across OSes Significant Differences Among Browsers See Figures 6-27 to 6-47 of Textbook –Watch Out for Poor Support of Negative Offset

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Images Provided on Course Web Site –stone.jpeg Provides Continuous Background JPEG Image Does Not Offer Transparency –Background Color Is Not Visible BODY { background-image: url(/image/stone.jpeg); background-color: red; color: black; }

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Images Provided on Course Web Site –camel.gif Transparent GIF Permits Background Color to Show BODY { background-image: url(/image/camel.gif); background-color: red; color: black; }

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Images Provided on Course Web Site –camel.gif Note Effects of background-repeat Note Effects of background-position BODY { background-image: url(/image/camel.gif); background-repeat: no-repeat; background-position: top left; background-color: red; color: black; }

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Scrolling Control Scrolling of Background Image background-attachment: fixed | scroll Force a Single Copy of a Background Image to Remain Fixed in the Display Window Consistent Support Across OSes Significant Differences Among Browsers See Figure 6-55 of Textbook

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Image Provided on Course Web Site –camel.gif BODY { background-image: url(/image/camel.gif); background-position: center center; background-attachment: fixed; } Oooooohhhh!

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images CSS Background Properties Permit the Use of a Very Small Background Image to Support a Very Wide Range of Monitor Sizes –Use 10 Pixel High Image As Background –Background Is Automatically Repeated Vertically How Wide Should It Be? –As Narrow As Possible –Only Enough to Define "Sidebar" Pixels –Background Color Will Fill in Remainder

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images Using a Background Image to Achieve an Attractive Gradient Background –That Works Well On A Wide Variety of Monitors –That Doesn't Require Browser Detection –That Doesn't Hog Network Resources Keep It Simple...

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Background Images

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background How High Should Background Image Be? –Image Is Repeated Vertically –Page is Always Covered No Matter How High Image Can Be Only One Pixel High To Minimize File Size In Practice, Use Roughly Ten Pixel High Image –Longer Download Than One Pixel High Image –Faster Rendering Than One Pixel High Image

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background How Wide Should Background Image Be? –Need to Accommodate Different Size Monitors And Those Viewers Who Don't Maximize Windows

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background Make a Wide Background Image –Because If Monitor is Wider Than Image Image Repeats Horizontally Background Bleeds –So Go Even Wider –However For Monitors Narrower Than The Widest Can't See All Gradient Waste of Bandwidth –How Wide Is Wide Enough? Is 1200 Pixels Enough? Maybe... See Figure 6-27 on Page 172 of Textbook

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background Pick a Width –For The Actual Gradient Perhaps 100 or 200 Pixels –It's a Compromise Get Over It Position Background Image at Top & Left Select Background Color to Match Gradient Right Repeat Vertically (Y) Do Not Repeat Horizontally (X)

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Gradient Background BODY { color: black; background-color: rgb(100%, 50%, 50%); background-image: url(/~diverdi/image/background.jpeg); background-position: top left; background-repeat: repeat-y; }

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Experiment With Image Provided on Course Web Site –background.jpeg BODY { color: black; background-color: rgb(100%, 50%, 50%); background-image: url(/~diverdi/image/background.jpeg); background-position: top left; background-repeat: repeat-y; }

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specified using Background Shorthand for All Background Properties H1 { background: white url(/image/background.jpeg) repeat-y scroll top left; } Like Font, Syntax Is a Bit Complicated...

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Specified using Background H1 { background: || || ; } All Properties Are Optional Order Is Totally Arbitrary Support Is Almost the Same as for Individual Properties

Introduction to CSS CSS Backgrounds - Fort Collins, CO Copyright © XTR Systems, LLC Hands On Test the Various Background Properties Using Your Web Pages Test the Syntax of the Combined Background Property Using Your Web Pages Verify That Various Combinations Conform to the Rules Provided