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.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets. Next Level Cascading Style Sheets (CSS) - control the look and feel of your HTML documents in an organized and efficient manner.
Advertisements

CSS The basics { }. CSS Cascading Style Sheets - language used to – describe html appearance & formatting Style Sheet - file that describes – how html.
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
WEB DESIGN – SEC 4-11 PART OR ALL OF THIS LESSON WAS ADAPTED FROM THE UNIVERSITY OF WASHINGTON’S “ WEB DESIGN & DEVELOPMENT I ” COURSE MATERIALS PSEUDO-CLASS.
Web Colors. Web Colors Using CSS Thus far, we have set our text and background colors using actual color names, such as:.example { background-color: gray;
4.01 HTML, CSS and Color. Introduction This presentation includes the following topics: Additive color theory Color Names RGB Colors Hex Colors.
Design, Formatting, CSS, & Colors 27 February, 2011.
Lecture 5. CSS 2 What style will be used when there is more than one style specified for an HTML element? Generally speaking we can say that all the styles.
Math Further HTML and Web design Gavin Shaddick
HTML Lesson 2 TBE 540 Farah Fisher. Prerequisites Access web pages and navigate Use search engines to locate specific information Download graphics from.
Workshop: CSS-Part I Cascading Style Sheets add style to your HTML web pages.
4.01 Cascading Style Sheets
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,
Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.
© Maths Support Service 2007 Binary and Hexadecimal Numbers Next Slide AE98FD AE98FD.
Why HTML. View Code This is my home page. My name is Ali. I’m studying Educational Technology. Save as Text.
Color Selection in Web Design Web Design – Sec 4-4 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Explanation of Web 6, Web 7 and Web 9 at my site Please be sure to bring up the speaker notes for the explanation Intro - Web 6, Web 7 and Web 9.
CMYK vs. RGB Design. Primary colors The colors that make up the base for every other color created. Depending on whether you are looking at it from science,
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 3 Key Concepts 1 Copyright © Terry Felke-Morris.
Styles with Cascading Style Sheets (CSS) Web Design – Section 4-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design.
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.
Intro to Dreamweaver Web Design Section 7-1 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course.
Kevin Murphy Web Color Basics Masters Project CS 490.
Unit 1 — HTML BASICS Lesson 2 — HTML Organization Techniques.
Introduction To CSS.. HTML Review What is HTML used for? Give some examples of formatting tags in HTML? HTML is the most widely used language on the Web.
 This presentation introduces the following: › 3 types of CSS › CSS syntax › CSS comments › CSS and color › The box model.
HTML CRASH COURSE. What is HTML?  Hyper Text Markup Language  The language used to make web pages  Written by using tags.
What are the five colors in the legend? Enter the information below (5 points) 0000FF = = FFFFFF = 00FF00 = FF0000 = Color Theory Legend: income.
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.
Number Systems CIT Network Math
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.
Web Design I Spring 2009 Kevin Cole Gallaudet University
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.
Web Design Colour Schemes Kelvin High School April 2009.
Linking to an External Style Sheet Web Design Section 4-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Computer Science 101 Color, Fonts, Links, Design.
# Red Green Blue Digital Color RGB to HEX.
Stylizing a Navigation Menu with CSS Web Design – Section 4-13 Part or all of this lesson was adapted from the University of Washington’s “Web Design &
12/20/20151 Color Fall, 2010 Modified by Linda Kenney 10/26/10.
HEXADECIMAL NUMBERS.
Announcements Chapter 8 for today. 2 More Digitization Light, Sound, Magic: Representing Multimedia Digitally © Lawrence Snyder, 2008.
Elements of Design 1.02 Investigate Design Principles and Elements.
Why HTML. This is my home page. My name is Ali. I’m studying Technology Education.
Cascading Style Sheets (CSS) EXPLORING COMPUTER SCIENCE – LESSON 3-5.
WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.
Stylizing a Navigational Menu Web Design Section 6-3 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Lesson 13 – Color and Typography. 2 Objectives Understand basic color theory. Understand the color wheel. Understand how color is presented on a computer.
Why HTML. This is my home page. My name is Ali. I’m studying Technology Education.
Web Colors.
Basic HTML Tags Ryan Frazier April 30,2004 CSC113.
The Box Model in CSS Web Design – Sec 4-8
4.01 HTML, CSS and Color.
Hexadecimal Sweet Sixteen!.
Web Development & Design Foundations with HTML5 8th Edition
The Box Model in CSS Web Design – Sec 4-8
4.01 HTML, CSS and Color.
The Box Model in CSS Web Design – Sec 4-8
Web Development & Design Foundations with HTML5
Web Colors.
Hexadecimal Binary Made Easier.
Instructions for creating a template in MS Frontpage
Training & Development
What Color is it?.
Web Colors.
4.01 HTML, CSS and Color.
Presentation transcript:

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 materials

Objectives The student will –be able to identify two methods for expressing color in CSS. –be able to identify a few basic colors, including black and white, by their hexadecimal codes –be able to implement a color scheme on a web site using CSS to define background and font colors for HTML elements.

Expressing Colors in CSS Color Names: AquaBlackBlueFuchsia GrayGreenLimeMaroon NavyOlivePurpleRed SilverTealWhiteYellow

There are now 140 named colors in HTML – chart.phphttp:// chart.php

Expressing Colors in CSS Hex Triplet: –Using color names is handy and easy to understand, but most computer screens today are capable of displaying over 16 million colors. –We identify them using a hex triplet. A hex triplet is a six-digit number, where each pair of digits represents (in order) the value of red, green, and blue.

Expressing Colors in CSS Each pair of digits is a hexadecimal number (base 16), where 00 is the lowest value and FF is highest. Here are some examples: –#FF0000 has the maximum amount of red, but no green or blue (result: red) –# mixes a lot of red, no green, and a lot of blue (result: darkish purple) –# has no color (result: black) –#FFFFFF has maximum amounts of all colors (result: white)

Rest of Today You need to choose a color scheme for your web site. You need to set the following colors: Use Color Scheme Designer to create a color scheme.Color Scheme Designer See the homework for additional instructions.

Other CSS Settings Consider adding these settings to your CSS file: