CSS -- TEXT.  Text Color  The color property is used to set the color of the text.  With CSS, a color is most often specified by:  a HEX value - like.

Slides:



Advertisements
Similar presentations
Cascading Style Sheets Alternative to HTML tag style.
Advertisements

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
Computer Applications II.  A Style Sheet is a web page development tool that allows the developer to make global changes to a web page (or web site)
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.
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.
End User Computing An Introduction to CSS Sujana Jyothi Research Lab1, Callan Building, Department of Computer Science
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
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} //
กระบวนวิชา 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.
CSS Cascading Style Sheets Brief Introduction
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.
INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
W EB S ITE L ECTURE C ASCADING S TYLE S HEETS. Cascading Style Sheets (CSS) Introduction CSS Objectives – Provide more control over web site content presentation.
CSS The Definitive Guide Chapter 6.  Text is the content, and fonts are used to display that content. By using text properties you can affect the position.
Chapter 8 Cascading Style Sheets (CSS). Agenda Definition of a CSS style Types of CSS Styles CSS Backgrounds CSS Text CSS Fonts CSS Links CSS Lists CSS.
HIGHER COMPUTING CSS. WHAT IS CSS? CSS: Cascaded Style Sheets used to separate a web site’s content(information) from its style(how it looks).
CSS Dvijesh Bhatt.
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
Chapter 7 Web Typography Principles of Web Design, 4 th Edition.
1Computer Sciences Department. And use
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
INTRODUCTION TO HTML5 Styling Text. Change the Font Size  You can use the font-size property to change the font size for a document’s text.  Instead.
(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
To Proudly supported by ferrycake.com. We will be printing Cash for your Community tokens every week in the Carmarthen Journal and Llanelli Star. The.
CSS Text Formatting By: Sakeenah Benjamin & Miss Deephouse.
ITP 104.  Basic HTML using and form  Using Filezilla  public_html ▪ 755 permission  Have a directory name itp104 ▪ 755 permission  classpage.html.
CIT Internet Based Programming Lecture notes: Week 4 Instructor:Dr. Tolgay KARANFİLLER.
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.
Cascading Style Sheets (CSS)
CASCADING STYLE SHEETS. Chapter 3 Objectives Customize HTML elements Specify Font characteristics Classes Tag style Inline and block-level elements External.
آموزش طراحی وب سایت جلسه چهارم– سی اس اس 1 تدریس طراحی وب برای اطلاعات بیشتر تماس بگیرید تاو شماره تماس: پست الکترونیک :
Class three: CSS review, backgrounds, font formatting, the box model.
Overview: 1. Discussion of the basic architecture of a web application. 2. Discussion of the relevance of using MySQL and PHP in a web application.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Web Foundations WEDNESDAY, OCTOBER 2, 2013 LECTURE 5: INTRODUCTION TO CSS CONTINUED.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
1 HTML/CSS Tutorial Chapter 1. Agenda Defintion HTML Page strucutre Head Section Body Section Headings Paragraph Preformatted Text Special Charaters Colors.
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts.
Creating Your Own Webpage COSC Cascading Stylesheets Think of: HTML: content of your webpage HTML has tags CSS: presentation and appearance of your.
INTRODUCTORY Tutorial 3 Using CSS to Format Multiple Pages.
CSS – Cascading Style Sheets
Web Design (14) CSS Formatting Text. Formatting Text In Brackets, go to your ‘externalcss’ website and find the ‘formattingtext’ page. Use the ‘main’
IS1825 Multimedia Development for Internet Applications Lecture 12: IDs, Classes and Internal CSS Rob Gleasure
CSS Text Text properties allow you to control the appearance of text. It is possible to change the color of a text, increase or decrease the space between.
1 CSS محمد احمدی نیا 2 Of 21 What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements 
CSS Cascading Style Sheets *referenced from
CSU - DCE Introduction to CSS CSS Text - Fort Collins, CO Copyright © XTR Systems, LLC Cascading Style Sheets - Text Control Instructor: Joseph.
Chapter 11 & 12 CSS Style Sheets: Intro. Why CSS? Separate presentation from content – more accessible Less work – can change appearance of whole site.
Blended HTML and CSS Fundamentals 3 rd EDITION Tutorial 3 Introducing Cascading Style Sheets.
1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)
Microsoft Expression Web 3 – Illustrated Unit M: Advanced Typography Using CSS.
Formatting with Styles. Choosing a Font Family font-family property has a special characteristics: you can specify more than one font h1, h2 {font-family:”Arial.
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 solve a problem External.
* CSS Objectives * Provide more control over web site content presentation and formatting * Facilitate cross web page consistency * Reduce the amount.
1 Cascading Style Sheets
CONFIGURING COLOR AND TEXT WITH CSS Chapter 3. Cascading Style Sheets (CSS) Used to configure text, color, and page layout. Launched in 1996 Developed.
CSS.
Cascading Style Sheet.
( Cascading style sheet )
Cascading Style Sheets (Formatting)
IS333: MULTI-TIER APPLICATION DEVELOPMENT
CSS Style Sheets: Intro
Cascading Style Sheets Color and Font Properties
محمد احمدی نیا CSS محمد احمدی نیا
Cascading Style Sheets (CSS)
Cascading Style Sheets
Presentation transcript:

CSS -- TEXT

 Text Color  The color property is used to set the color of the text.  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“  Look at CSS Color Values for a complete list of possible color values.CSS Color Values  The default color for a page is defined in the body selector. CSS - TEXT

 Syntax examples  body {color:red;}  h1 {color:#00ff00;}  p.ex {color:rgb(0,0,255);} If you define the color property, you must also define the background-color property. CSS -- TEXT

 Text Alignment  The text-align property is used to set the horizontal alignment of a text.  Text can be centered, or aligned to the left or right, or justified.  When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). CSS – TEXT -- ALIGNMENT

 Code examples  h1 {text-align:center;} p.date {text-align:right;} p.main {text-align:justify;}  Try it herehere CSS – TEXT -- ALIGNMENT

 The text-decoration property is used to set or remove decorations from text.  The text-decoration property is mostly used to remove underlines from links for design purposes:  a {text-decoration:none;}  It can also be used to decorate text: h1 {text-decoration:overline;} h2 {text-decoration:line-through;} h3 {text-decoration:underline;} h4 {text-decoration:blink;}  Try it herehere CSS – TEXT -- DECORATION

 The text-transform property is used to specify uppercase and lowercase letters in a text.  It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.  p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;}  Try it herehere CSS – TEXT -- TRANSFORMATION

 The text-indentation property is used to specify the indentation of the first line of a text.  p {text-indent:50px;}  Try it herehere CSS – TEXT -- INDENTATION

 This example demonstrates how to increase or decrease the space between characters.  h1 {letter-spacing:25px;}  h2 {letter-spacing:-3px;}  Try it herehere CSS – TEXT – SPECIFY THE SPACE BETWEEN CHARACTERS

 This example demonstrates how to specify the space between the lines in a paragraph.  p.small {line-height:70%;}  p.big {line-height:200%;}  Try it herehere CSS – TEXT – SPACE BETWEEN LINES

 This example demonstrates how to increase the white space between words in a paragraph.  p{word-spacing:30px;}  Try it herehere CSS – TEXT – INCREASE WHITE SPACE BETWEEN WORDS

PropertyDescription colorSets the color of text directionSpecifies the text direction/writing direction letter-spacingIncreases or decreases the space between characters in a text line-heightSets the line height text-alignSpecifies the horizontal alignment of text text-decorationSpecifies the decoration added to text text-indentSpecifies the indentation of the first line in a text-block text-shadowSpecifies the shadow effect added to text text-transformControls the capitalization of text vertical-alignSets the vertical alignment of an element white-spaceSpecifies how white-space inside an element is handled word-spacingIncreases or decreases the space between words in a text All CSS Text Properties