With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1.

Slides:



Advertisements
Similar presentations
LIS650 lecture 4 Thomas Krichel today Advice CSS Properties –Box properties –List properties –Classification properties Fun with selectors.
Advertisements

1 Cascading Style Sheets Continued Different kinds of selectors in a style sheet –Simple- Pseudo-Class –Contextual- Pseudo-Element –Class Image Styles.
CSS Layout Crash Course An Advance CSS Tutorial. Inline vs. Block Many HTML elements have a default display setting of Block. Block elements take up the.
Chapter 6 More CSS Basics Key Concepts Copyright © 2013 Terry Ann Morris, Ed.D 1.
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.
CSS. Intro to CSS Cascading Style Sheets – styles and enhances appearance of webpage.css extension.
CSS CSS stands for Cascading Style Sheets Styles define how to display HTML elements External Style Sheets can save a lot of work External Style Sheets.
Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.
Very quick intro HTML and CSS. Sample html A Web Title.
Part 5 Introduction to CSS. CSS Display - Block and Inline Elements A block element is an element that takes up the full width available, and has a line.
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.
Links.  Styling Links  Links can be styled with any CSS property (e.g. color, font-family, background-color).  Special for links are that they can.
Cascading Style Sheets By: Valerie Kuna. What are Cascading Style Sheets? Cascading Style Sheets (CSS) are a standard for specifying the presentation.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
Client-Side Internet and Web Programming
1 Pengantar Teknologi Internet W03: CSS Cascading Style Sheets.
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:
Part 3 Introduction to CSS. CSS Text Text Styles h1 {color: green} // rgb(0,255,0), #00ff00 h2{letter-spacing: 0.5cm} // 2px h3 {text-align: right} //
Diliev.com & pLOVEdiv.com  DIliev.com.
กระบวนวิชา 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:
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
TUTORIAL 4: CREATING PAGE LAYOUT WITH CSS Session 4.3.
Using CSS for Page Layout. Types of HTML Elements Block-Level Element –Creates blocks of content e.g. div, h1..h6, p, ul, ol, li, table, form –They start.
Slide 1 of 83 Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td.
1Computer Sciences Department. And use
Doncho Minkov Telerik Web Design Course html5course.telerik.com Technical Trainer
Lesson 03 // Cascading Style Sheets. CSS Stands for Cascading Style Sheets. We’ll be using a combination of Html and CSS to create websites. CSS is a.
THE BOX MODEL Putting layouts together with CSS. The Box Model  How would you describe a box?  Container?  Tags or elements are “containers”  puts.
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
Cascading Style Sheets Positioning Controls Visibility.
Copyright © Osmosys O S M O S Y SO S M O S Y S D e p l o y i n g E x p e r i e n c e & E x p e r t i s e™ CSS Training.
Cascading Style Sheets Positioning Controls Visibility.
Tutorial 4 Creating Page Layouts with CSS
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,
Introduction to Programming the WWW I CMSC Summer 2004 Lecture 8.
WebD Introduction to CSS By Manik Rastogi.
Cascading Style Sheets Boxes
Chapter 13 Colors & backgrounds.
( Cascading style sheet )
CSS Layouts: Grouping Elements
Webpage layout using CSS
Cascading Style Sheets
>> The “Box” Model
Web Systems & Technologies
کارگاه آموزشی توسعه وب بخش دوم - CSS ارائه: عباس نادری
Chapter 7 Page Layout Basics Key Concepts
IS333: MULTI-TIER APPLICATION DEVELOPMENT
Chapter 6 More CSS Basics Key Concepts
Cascading Style Sheets
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
MORE Cascading Style Sheets (The Positioning Model)
Box model, spacing, borders, backgrounds
Cascading Style Sheets
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Float Property Elements that seem to “float" on the right or left side of either the browser window or another element are often configured using.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts
Cascading Style Sheets
How to use the CSS box model for spacing, borders, and backgrounds
CS3220 Web and Internet Programming More CSS
CS3220 Web and Internet Programming More CSS
CSc 337 Lecture 5: Grid layout.
Cascading Style Sheets™ (CSS)
Positioning Boxes Using CSS
CS3220 Web and Internet Programming More CSS
Presentation transcript:

With CSS, a color is most often specified by: a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" a color name - like "red“ Example h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} Background Image body {background-image:url('paper.gif');} body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }

 h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;}  h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */  1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.  The size can be calculated from pixels to em using this formula: pixels/16=em

 a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */

 height Sets the height of an element auto length % inherit 1 height  max-height Sets the maximum height of an element none length % inherit 2 max-height  max-width Sets the maximum width of an element none length % inherit 2 max-width  min-height Sets the minimum height of an element length % inherit 2 min-height  min-width Sets the minimum width of an element length % inherit 2 min-width  width Sets the width of an element auto length % inherit 1 width

bottom Sets the bottom margin edge for a positioned box clip Clips an absolutely positioned element shape cursor Specifies the type of cursor to be displayed url pointer move e-resize ne-resize nw-resize n-resize se-resize sw-resize s-resize w-resize text wait help bottom clip cursor left Sets the left margin edge for a positioned box auto overflow Specifies what happens if content overflows an element's box auto hidden scroll visible position Specifies the type of positioning for an element absolute fixed relative static right Sets the right margin edge for a positioned box auto top Sets the top margin edge for a positioned box auto z-index Sets the stack order of an element number left overflow position right top z-index

  div.img  {  margin:2px;  border:1px solid #0000ff;  height:auto;  width:auto;  float:left;  text-align:center;  }  div.img img  {  display:inline;  margin:3px;  border:1px solid #ffffff;  }  div.img a:hover img  {  border:1px solid #0000ff;  }  div.desc  {  text-align:center;  font-weight:normal;  width:120px;  margin:2px;  }  Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here Image Galery

img { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } img:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ }