Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.

Slides:



Advertisements
Similar presentations
WEB PAGES: CREATING AND MAINTAINING ** Frank Romanelli Instructor: Wednesday: 10:15 -11:15 Week 3.
Advertisements

CSS Basics Style and format your web site using CSS.
Cascading Style Sheets
HyperText Markup Language (HTML) Uses plain text to add markup instructions to a file. If you can't produce it with a standard keyboard, it can't go into.
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.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
กระบวนวิชา 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.
1 CSS Styling with Fonts and Colors. 2 CSS Cascading Style Sheets and fonts CSS provides Style or Presentation options for our html pages CSS properties.
Tutorial 3 Designing a Web Page.
Colors and the Web September 16 Unit 5. Primary Colors In grade school taught that red, yellow and blue are primary –Works okay for mixing paint Colors.
WEB PAGES: CREATING AND MAINTAINING ** Tom Keane & Mayis SeapanInstructors: HTML Tags to format your text.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
HTML BASIC
Contains 16,777,216 Colors. My Car is red My Car is red How do I add colors to my web page? Notepad Browser Works with the “Standard” colors: Red, Green,
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
Choose Text Styles Sparingly for Emphasis with or without COLOR Bold Italic Underline Combination.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
HTML Colors Color is one of the most important ideas of the Principles of Design. It is used to separate and emphasis elements in a design. Insert a picture.
THE COLORS OF LIGHT RED, GREEN and BLUE
Lesson 13 – Color and Typography. 2 Objectives Discuss basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Chapter 12 Cascading Style Sheets: Part II The Web Warrior Guide to Web Design Technologies.
Copyright © 2003 Pearson Education, Inc. Slide 4-1 Created by, Stephanie Ludi, Rochester Institute of Technology—NY Basic Web Page Construction Graphics.
Kevin Murphy Web Color Basics Masters Project CS 490.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Formatting Text and Lists Essentials for.
Chapter 6 An Introduction to HTML Pages Tag Nesting You can put two tags together to combine the effects Bold and underlined But make sure.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
Introduction to Programming the WWW I CMSC Winter 2003 Lecture 3.
Color Theory And Photography
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
_______________________________________________________________________________________________________________ PHP Bible, 2 nd Edition1  Wiley and the.
Web Colors. Web Colors: Up until now, we have been using only pre- defined color names, such as "orange" and "lightblue". As web designers, we need the.
Colors. Color of HTML Elements You can control the color of the following elements: You can control the color of the following elements: All text within.
Hexadecimal Codes 1. RGB Color Wheel 2 Before we begin Hexadecimal is a number system Based on using 0 – F to represent 0 – 15 Hex is used to represent.
Applying Color in CSS Web Design – Sec 4-5 Part or all of this lesson was adapted from the University of Washington’s “ Web Design & Development I ” Course.
ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.
Computer Science 101 Color, Fonts, Links, Design.
# Red Green Blue Digital Color RGB to HEX.
 To specify blue as the background color for a page, put bgcolor=“blue” inside the tag. Of course, you can use many colors other than blue. You can choose.
Microsoft Expression Web 3 – Illustrated Unit F: Enhancing a Design with CSS.
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.
Web Colors and Fonts.
12/20/20151 Color Fall, 2010 Modified by Linda Kenney 10/26/10.
HTML & Color How to Use Color  Backgrounds-  Usually a light color is best  Should have a color based on a theme or plan  Can have a dark.
Elements of Design 1.02 Investigate Design Principles and Elements.
Intro to Color Theory. Objectives Identify and discuss various color models including RGB, CMYK, Black/white and spot color. Investigate color mixing.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
CSS Cascading Style Sheets *referenced from
Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.
CNIT 131 Graphics.
CS3220 Web and Internet Programming CSS Basics
Cascading Style Sheets Color and Font Properties
The Internet 10/11/11 Fonts and Colors
4.01 HTML, CSS and Color.
Web Development & Design Foundations with HTML5 8th Edition
Design Concepts: Module A: The Science of Color
Web Development & Design Foundations with HTML5
Programming the Web using XHTML and JavaScript
Web Design M. Jacie Yang Assistant Professor
4.01 HTML, CSS and Color.
CSS – Properties & Values
Hexadecimal Binary Made Easier.
Web Design 3080 : Week 3 Introduction to Dreamweaver Lecture
Tutorial 3 Working with Cascading Style Sheets
CS3220 Web and Internet Programming CSS Basics
CSS Styles Fonts and Colors.
Web Colors.
4.01 HTML, CSS and Color.
Presentation transcript:

Most of the attributes of the body element specify colors for the Web page. Note: The background attribute won’t be useful till we learn about graphics.

RGB (Red,Green,Blue) colors 256 colors per byte 3 bytes = over 16 million colors (one byte for each of Red,Green,Blue) Most computer monitors use 3-byte (24-bit) color.

Hexadecimal (base 16) Color Values Hex digits, 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F Each RGB component is a 2-digit hex number. Base 16Base 10 equivalent 000(no saturation of color) CC204 FF255(full saturation of color) Each of the 256 colors for an RGB color component is then concisely represented as a 2-digit hex color. The 6 values for a color component shown above are called Web Safe colors. That means that older computers would render them consistently.

RGB Hex Color Values Used as values for HTML attributes to set colors in Web pages. Preceded with a # character to tell the browser that a hex color follows. Examples: #FF Bright pure red, full saturation of red -- none of the other colors # Dark pure red, almost no red -- none of the other colors Computer colors (like visible light) are additive -- the more color saturation is added, the brighter the color. In contrast, mixing paint is subtractive -- as more colors are added, the mixture gets darker.

Since computer colors are additive, # is black (no saturation of any colors) and #FFFFFF is white (full saturation of each color) Since more color saturation gives lighter colors, it is easy to predict pure colors (Red,Green,Blue), like the reds of the last slide. Grays are also easy to predict -- equal saturations of each of Red, Green, and Blue: #333333, #CCCCCC Other mixtures are harder to predict just by thinking about it. Another option is to use a color picker utility. Just Google the phrase html color picker and you will see lots of them.

Fonts for computers are simply files containing specifications which tell software exactly how to draw the characters. Serif font Sans-Serif font Some fonts come with the operating system, and software packages install other fonts. A a Web page is limited only to those fonts installed on the computer on which the page is being viewed.

These font faces are generally safe in Web pages since they will be available on most any computer.

The font element is deprecated, meaning that the W3C may remove it from the HTML standard in the future. It is easy to format text with this element. However, CSS provides all of the same formatting control, and much more.

HTML code: black and blue The result: black and blue HTML code: regular monospace The result: regular monospace Note: The font element with Courier above does the same thing as the tt (teletype) element, since Courier is a monospace font.

When a list of font faces is supplied, the browser uses the first one it finds. If it finds none of them, it simply uses it's default. Good priority list for a serif font: face="Georgia, Times, Times New Roman" Good priority list for a sans-serif font: face="Verdana, Arial, Trebuchet MS, Helvetica" Note: Gerogia and Verdana were both made to look good on computer monitors.

Font sizes can be given in absolute or relative values. Examples of absolute values: size="3" (typical default for browsers) size="2" (smaller) size="4" (bigger) Examples of relative sizes size="-1" (one step smaller than the default) size="+1" (one step larger than the default) Using relative sizes is usually the best idea. That way, your page does not depend upon the default size for which a particular browser is set.