Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming.

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,
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.
+ 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 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.
What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External.
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)
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)
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.
Cascading Style Sheets Eugenia Fernandez IUPUI. CSS Purpose CSS allow you to specify the style in which your XML elements are displayed. CSS were originally.
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
1 CS428 Web Engineering Lecture 08 Border, Margin, Padding … (CSS - III)
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.
ECA 228 Internet/Intranet Design I Cascading Style Sheets.
Tutorial 3 Designing a Web Page with CSS
03 CSS (Cascading StyleSheet) Р.Жавхлан МОНГОЛ УЛСЫН ИХ СУРГУУЛЬ Мэдээллийн технологийн сургууль Интернэт технологийн үндэс 2015 Намар.
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.
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:

Cascading Style Sheets, pt 2 ECA 225 Applied Online Programming

2 ECA225 Applied Interactive Programming background-color  background-color: body { background-color: red; }

3 ECA225 Applied Interactive Programming background-image  background-image: | none body { background-image:url( imageName.gif); }

4 ECA225 Applied Interactive Programming background-repeat  background-repeat: repeat | repeat-x | repeat-y | no-repeat body { background-repeat: repeat-x; }

5 ECA225 Applied Interactive Programming background-attachment  background-attachment: scroll | fixed body { background-attachment: scroll; }

6 ECA225 Applied Interactive Programming border-color  border-color: p.box { border-color: #ff0000; }

7 ECA225 Applied Interactive Programming border-style  border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset p.box { border-style: groove; }

8 ECA225 Applied Interactive Programming border-width  border-width: thin | medium | thick | p.box { border-width: thin; }

9 ECA225 Applied Interactive Programming color  color: h3 { color: red; }

10 ECA225 Applied Interactive Programming display  display: none | block | inline | list-item a { display: block; }

11 ECA225 Applied Interactive Programming float  float: left | right | none img.floatExample { float: right; }

12 ECA225 Applied Interactive Programming font-family  font-family: | h2 { font-family: Helvetica, Arial, sans-serif; }

13 ECA225 Applied Interactive Programming font-style  font-style: normal | italic | oblique p.italic { font-style: italic; }

14 ECA225 Applied Interactive Programming font-size  font-size: | | | p.sizeExample { font-size: 2em; }

15 ECA225 Applied Interactive Programming font-variant  font-variant: small-caps | none.sml { font-variant: small-caps; }

16 ECA225 Applied Interactive Programming font-weight  font-weight: normal | bold | bolder | lighter | numeric values p.bold { font-weight: bold; }

17 ECA225 Applied Interactive Programming letter-spacing  letter-spacing: p { letter-spacing: 0.4em; }

18 ECA225 Applied Interactive Programming line-height  line-height: | | p { line-height: 1.5em; }

19 ECA225 Applied Interactive Programming 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; }

20 ECA225 Applied Interactive Programming list-style-image  list-style-image: | none ol { list-style-type: url( imageName.gif ); }

21 ECA225 Applied Interactive Programming list-style-position  list-style-position: inside | outside ol { list-style-position: inside; }

22 ECA225 Applied Interactive Programming margin  margin: | ( margin-left, margin-top, margin-right, margin- bottom) h1 { margin-top:.5em; }

23 ECA225 Applied Interactive Programming padding  padding: | ( padding-left, padding-top, padding-right, padding- bottom) h1 { padding-top: 2em; }

24 ECA225 Applied Interactive Programming position  position: relative | absolute | left | top | right | bottom.imagePosition { position: absolute; left: 0px; top: 0px; }

25 ECA225 Applied Interactive Programming text-align  text-align: left | right | center | justify td { text-align: right; }

26 ECA225 Applied Interactive Programming text-indent  text-indent: | p { text-indent: 3em; }

27 ECA225 Applied Interactive Programming text-decoration  text-decoration: none | underline | overline | line-through | blink a:hover { text-decoration: underline; }

28 ECA225 Applied Interactive Programming text-transform  text-transform: capitalize | uppercase | lowercase | none ul { text-transform: capitalize; }

29 ECA225 Applied Interactive Programming vertical-align  vertical-align: baseline | sub | super | top | middle | bottom | text-top | text-bottom td { vertical-align: top; }

30 ECA225 Applied Interactive Programming white-space  white-space: | | #toc { white-space: nowrap; }

31 ECA225 Applied Interactive Programming word-spacing  word-spacing: p { word-spacing: 0.4em; }

32 ECA225 Applied Interactive Programming z-index  z-index: higher numbers are higher in the stack.topImage { z-index: 4; }