ECA 228 Internet/Intranet Design I Cascading Style Sheets.

Slides:



Advertisements
Similar presentations
Session Objectives Setting the font family Setting the font size Working with Web fonts Setting font faces and sizes Setting font and text appearances.
Advertisements

1 Dynamic HTML: Cascading Style Sheets™ (CSS). 2 Introduction Cascading Style Sheets (CSS) –Specify the style of your page elements –Spacing, margins,
/k/k 1212 Cascading Style Sheets Part two Marko Boon
CSS Properties  Font  Color & Background  Text  List  Box Model  Visual Formatting Model (normal & float)  User Interface & Downloadable Font 
Cascading Style Sheets (Formatting. Slide 2 Lecture Overview At this point, you have learned how and where to create styles You have not learned much.
Tutorial 4 Formatting Text. XP New Perspectives on Blended HTML, XHTML, and CSS2 Objectives Create a spread heading Indent text Change the line spacing.
CS4370/6370 Web Development Cascading Style Sheets (CSS)
CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Web Design & Development Cascading Style Sheets (CSS)
CS134 Web Design & Development Cascading Style Sheets (CSS) Mehmud Abliz.
Cascading Style Sheets Cyndi Hageman. Applying a Style Sheet  In-line style – used within the HTML tag  Embedded Style Sheet – located in the HTML document.
CSE CASCADING STYLE SHEETS CSS Faculty of Computer Science and Engineering.
Multimedia and the World Wide Web HCI 201 Lecture Notes #7B.
Lecture CSS: Cascading Style Sheets. What are Styles? Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics.
Cascading Style Sheets (CSS) Bartosz Sakowicz. CSS syntax Basic CSS syntax: selector { property:value } E.g.: P {font-family: Arial} H1 {font-size: 20pt}
+ Text & Font Styles Unit 3 Lesson Different Font Categories Sans Serif – block style fonts Example - Rockwell Easy to read and good to use when.
Selectors thru Borders. CSS – Cascading Style Sheets – is a way to style HTML HTML is the content base of a web page CSS provides the presentation qualities.
CSS1-1 Cascading Style Sheets (CSS) Xingquan (Hill) Zhu
Cascading Style Sheets Example
Cascading Style Sheets CS3505. What are CSS? Method for adding style attributes consistently to HML tags Cascading because styles are applied in order.
Cascading Style Sheets Billy Toy Cascading Style Sheets Syntax review How to Implement style sheets Background properties Text properties.
 2000 Deitel & Associates, Inc. All rights reserved. Chapter 14 – Dynamic HTML: Cascading Style Sheets (CSS) Outline 14.1Introduction 14.2Inline Styles.
CSS Dvijesh Bhatt.
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
CSS Typography, Fonts, Spacing, Borders, Backgrounds, Opacity
1.NET Web Forms CSS: Style Sheets © 2002 by Jerry Post.
Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
WORKING WITH CASCADING
New Perspectives on XML, 2nd Edition Tutorial 5 1 TUTORIAL 5 WORKING WITH CASCADING STYLE SHEETS.
1 To Create an Internal Style Sheet 1. At the top of your HTML document, between the and tags type. 2. Type the name of the tag whose properties you wish.
XP New Perspectives on XML Tutorial 5 1 TUTORIAL 5 CSS Tutorial – Carey ISBN
CSS in XHTML continued Please use speaker notes for additional information!
Chapter 3 © 2012 by Addison Wesley Longman, Inc Introduction - The CSS1 specification was developed in CSS2 was released in CSS2.1.
CIS 1315 – Web Development for Educators CIS 1315 HTML Tutorials 3 & 4: Working With CSS.
Class three: CSS review, backgrounds, font formatting, the box model.
Cascading Style Sheet Bayu Priyambadha, S.Kom. Definition Cascading Style Sheets (CSS) form the presentation layer of the user interface. –Structure (HTML)
CHAPTER 3 CSS & CSS3 อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา 1.
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.
 2008 Pearson Education, Inc. All rights reserved Cascading Style Sheets™ (CSS)
Chcslonline.org Text –wrapping around Images. chcslonline.org To wrap text around an image, lets set up a style in our style sheet. open a new notepad.
INTRODUCTORY Tutorial 4 Exploring Graphic Elements and Images.
Cascading Style Sheets Part 3 Spring, 2008 Modified by Linda Kenney April 21, 2008.
>> The “Box” Model. Pre-requisite Create a new project in Netbeans called Week5 Create a new html file and name it box.html Create a new css file and.
 2004 Prentice Hall, Inc. All rights reserved. Chapter 6 - Cascading Style Sheets™ (CSS) Outline 6.1 Introduction 6.2 Inline Styles 6.3 Embedded Style.
 Cascading Style Sheets (CSS) ◦ Used to specify the presentation of elements separately from the structure of the document.  Inline style ◦ declare.
CHAPTER 2 CSS (Cascading Style Sheet). Topics Introduction Inline Styles Embedded Style Sheets Conflicting Styles Linking External Style Sheets Positioning.
INT222 - Internet Fundamentals Shi, Yue (Sunny) Office: T2095 SENECA COLLEGE.
1 Web Development CSS (Cascading Style Sheet). 2 1.Setting rules for multiple elements To decrease the amount of typing for setting rules for multiple.
1 Introduction to Web Application Introduction to Cascading Style Sheet.
CSS Presentation CSS Typography, Fonts, Spacing, Borders, Backgrounds, Opacity Svetlin Nakov Technical Trainer Software University
3.2 Cascading Style Sheets. 2 Positioning Elements Normally, elements are laid out on the page in the order that they are defined in the XHTML document.
©SoftMoore ConsultingSlide 1 Introduction to HTML: Cascading Style Sheets.
CSS – Cascading Style Sheets
Cascading Style Sheets Web Design Fairport High School.
CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Review First – on your own... Go to Day 5 Grab the contents of position review file Place in DW Add styles to recreate – get something close to
CIS234A Lecture 6 Instructor Greg D’Andrea. Span and Div The span and div elements are a generic means by which we can add structure to documents. The.
Creating Layouts with CSS. Span tag Here is some underlined text. Here is some blinking text. Here's some bold text.
Introduction To CSS. History of CSS ► ► CSS was proposed in 1994 as a web styling language. To helps solve some of the problems HTML 4. ► ► There were.
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,
Chapter 11 & 12 CSS Style Sheets: Intro. Why CSS? Separate presentation from content – more accessible Less work – can change appearance of whole site.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
CSS Details Cascading Style Sheets. Lesson Overview  In this lesson, you will learn:  To use CSS properties for fonts  Evaluate whether to use pts,
Welcome To Website Design, Hosting And Management Prepared By Webdev Solution ip ,223,96.
CIS 4004: Web Based IT (CSS) Page 1 © Dr. Mark Llewellyn CIS 4004: Web Based Information Technology Fall 2012 Cascading Style Sheets (CSS) Department of.
Unit 3 - Review. Topics 1. Tag, Attribute, Value 2. CSS Rule Syntax + link 3. Categories of Selectors 4. Inline vs Block Tags 5. CSS Layout 6. CSS Box.
Presentation transcript:

ECA 228 Internet/Intranet Design I Cascading Style Sheets

ECA 228 Internet/Intranet Design I background-color background-color: body { background-color: red; }

ECA 228 Internet/Intranet Design I background-image background-image: | none body { background-image:url( imageName.gif); }

ECA 228 Internet/Intranet Design I background-repeat background-repeat: repeat | repeat-x | repeat-y | no-repeat body { background-repeat: repeat-x; }

ECA 228 Internet/Intranet Design I background-attachment background-attachment: scroll | fixed body { background-attachment: scroll; }

ECA 228 Internet/Intranet Design I border-color border-color: p.box { border-color: #ff0000; }

ECA 228 Internet/Intranet Design I border-style border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset p.box { border-style: groove; }

ECA 228 Internet/Intranet Design I border-width border-width: thin | medium | thick | p.box { border-width: thin; }

ECA 228 Internet/Intranet Design I color color: h3 { color: red; }

ECA 228 Internet/Intranet Design I float float: left | right | none img.floatExample { float: right; }

ECA 228 Internet/Intranet Design I font-family font-family: | h2 { font-family: Helvetica, Arial, sans-serif; }

ECA 228 Internet/Intranet Design I font-style font-style: normal | italic | oblique p.italic { font-style: italic; }

ECA 228 Internet/Intranet Design I font-size font-size: | | | p.sizeExample { font-size: 2em; }

ECA 228 Internet/Intranet Design I font-variant font-variant: small-caps | none.sml { font-variant: small-caps; }

ECA 228 Internet/Intranet Design I font-weight font-weight: normal | bold | bolder | lighter | numeric values p.bold { font-weight: bold; }

ECA 228 Internet/Intranet Design I letter-spacing letter-spacing: p { letter-spacing: 0.4em; }

ECA 228 Internet/Intranet Design I line-height line-height: | | p { line-height: 1.5em; }

ECA 228 Internet/Intranet Design I list-style-type list-style-type: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-alpha | upper-alpha | none ul { list-style-type: square; } ol ol { list-style-type: lower-roman; }

ECA 228 Internet/Intranet Design I list-style-image list-style-image: | none ol { list-style-type: url( imageName.gif ); }

ECA 228 Internet/Intranet Design I list-style-position list-style-position: inside | outside ol { list-style-position: inside; }

ECA 228 Internet/Intranet Design I margin margin: | ( margin-left, margin-top, margin-right, margin-bottom) h1 { margin-top:.5em; }

ECA 228 Internet/Intranet Design I padding padding: | ( padding-left, padding-top, padding-right, padding- bottom) h1 { padding-top: 2em; }

ECA 228 Internet/Intranet Design I position position: relative | absolute | left | top | right | bottom.imagePosition { position: absolute; left: 0px; top: 0px; }

ECA 228 Internet/Intranet Design I text-align text-align: left | right | center | justify td { text-align: right; }

ECA 228 Internet/Intranet Design I text-indent text-indent: | p { text-indent: 3em; }

ECA 228 Internet/Intranet Design I text-decoration text-decoration: none | underline | overline | line-through | blink a:hover { text-decoration: underline; }

ECA 228 Internet/Intranet Design I text-transform text-transform: capitalize | uppercase | lowercase | none ul { text-transform: capitalize; }

ECA 228 Internet/Intranet Design I vertical-align vertical-align: baseline | sub | super | top | middle | bottom | text-top | text-bottom td { vertical-align: top; }

ECA 228 Internet/Intranet Design I white-space white-space: | | #toc { white-space: nowrap; }

ECA 228 Internet/Intranet Design I word-spacing word-spacing: p { word-spacing: 0.4em; }

ECA 228 Internet/Intranet Design I z-index z-index: higher numbers are higher in the stack.topImage { z-index: 4; }