(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.

Slides:



Advertisements
Similar presentations
CSS Cascading Style Sheets. Objectives Using Inline Styles Working with Selectors Using Embedded Styles Using an External Style Sheet Applying a Style.
Advertisements

Web Engineering 1 Ishaq Khan Shinwari MCS City University Peshawar.
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.
Building a Website: Cascading Style Sheets (CSS) Fall 2013.
CSS(Cascading Style Sheets )
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 normally control the html elements. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style.
XP Introducing Cascading Style Sheets With Cascading Style Sheets (CSS), you can create one or more documents that control the appearance of some or all.
CS4370/6370 Web Development Cascading Style Sheets (CSS)
Web Design & Development Cascading Style Sheets (CSS)
Web Workshop: CSS Objectives: - “What is CSS?” - Structure of CSS - How to use CSS in your webpage.
Using Cascading Style Sheets CSS Structure. Goals Understand how contextual, class and ID selectors work Understand how contextual, class and ID selectors.
Lecture 7 Cascading Style Sheets (CSS) Boriana Koleva Room: C54
3.1 Cascading Style Sheets. Motto Fashions fade, style is eternal. —Yves Saint Laurent.
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.
Cascading Style Sheets 1 Color and Backgrounds. Cascading Style Sheets 2 Color and Backgrounds Computer color basics Expression of color values using.
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).
Cascading Style Sheets (CSS) Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT.
Using Cascading Style Sheets. Introduction to Styles and Properties  Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium.
Cascading Style Sheets Example
HTML/CSS Hyper Text Markup Language. CSS Cascading Style Sheets.
Tutorial #3 Cascading Style Sheets. Review: Last Class Image sizing Pathnames Project Default Path Relative Path Absolute Path Blackboard Homework Submission.
Cascading Style Sheets CSS. CSS - Structure Declaration block Property: identifies what to change Value: how to change it Selector – example h1{ font-size:
WRT235: Writing in Electronic Environments CSS Backgrounds, colors, fonts.
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.
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.
Using Cascading Style Sheet As you create more web pages, you may wish to impose a consistent look for all of your web pages or for group of related pages.
CSS My favourite ICT lesson By Federico Boschi Cascading Style Sheets.
Just A Few More Fun Objectives 1 Having Some Fun With Java Script 2 Using Style Sheets.
Cascading Style Sheets (CSS)
Class three: CSS review, backgrounds, font formatting, the box model.
Tutorial #3 Cascading Style Sheets. Tutorial #2 Review - Anchors Links to Site DMACC Internal Links Go to Top Mail To me Local.
Cascading Style Sheets (css) HTML and css 2012 Brian Davison.
Introduction to CSS. What is CSS?  Cascading Style Sheets  Used for styling HTML  Also important in javascript and jquery for selectors  External.
ALBERT WAVERING BOBBY SENG. Week 2: HTML + CSS  Quiz  Announcements/questions/etc  Some functional HTML elements.
Cascade Style Sheet Introduction. What is CSS?  CSS stands for Cascading Style Sheets  Styles define how to display HTML elements  Styles were added.
Web Design and Development for Business Lecture 4 Cascading Style Sheet (CSS)
CSS Tutorial 1 Introduction Syntax How to use style specifications. Styles.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts.
Colors and backgrounds The following CSS properties will be explained: 1.color 2.background-color 3.background-image 4.background-repeat 5.background-attachment.
DIV, Span, CSS.
Cascading Style Sheets
XHTML Formatting font with a style declaration. Formatting Font HTML uses the font tag to change size and family of font But… the font tag is being deprecated.
Colors and backgrounds The following CSS properties will be explained: 1.color 2.background-color 3.background-image 4.background-repeat 5.background-position.
Cascading Style Sheets Web Design Fairport High School.
CSS properties Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan 1.
Web Technologies Beginning Cascading Style Sheets (CSS) 1Copyright © Texas Education Agency, All rights reserved.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
CSS Cascading Style Sheets *referenced from
Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad.
Tutorial 3 Designing a Web Page with CSS
CSCE Chapter 3 (Cascading Style Sheets) CSCE General Applications Programming Benito Mendoza 1 By Benito Mendoza Department of Computer.
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.
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)
HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding,
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.
WebD Introduction to CSS By Manik Rastogi.
CSS.
CS3220 Web and Internet Programming CSS Basics
( Cascading style sheet )
IS333: MULTI-TIER APPLICATION DEVELOPMENT
CSS Style Sheets: Intro
Cascading Style Sheets Color and Font Properties
CS3220 Web and Internet Programming CSS Basics
CS3220 Web and Internet Programming CSS Basics
Presentation transcript:

(CSS) More Details Instructor: Mr. Ahmed Al Astal ITGD4104 Department Requirement for senior student University of Palestine Faculty of IT

2 Classes The method shown before applies the same style to all examples of a given tag. That is fine if you want every paragraph equally indented or every level one heading in the same font. If you only want to apply a style to Only some paragraphs, for instance, you have to use classes: WEB PROGRAMMING : CSS

3 The following example shows how classes should be used. In the stylesheet itself the rule is slightly modified by giving the style a unique name which is appended to the selector using a dot. In the HTML document when you want to use a named style the tag is extended by including class= and the unique name. WEB PROGRAMMING : CSS

4 Anonymous Classes Cascading stylesheets provides a way of defining styles within reusable classes. The following code show how this works: WEB PROGRAMMING : CSS

5

6 CSS Background CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position WEB PROGRAMMING : CSS

7 Background Color The background-color property specifies the background color of an element. The background color of a page is defined in the body selector: The background color can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000" WEB PROGRAMMING : CSS

8 Background Color In the example below, the h1, p, and div elements have different background colors: WEB PROGRAMMING : CSS

9 Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. The background image for a page can be set like this: WEB PROGRAMMING : CSS

10 Background Image - Repeat Horizontally or Vertically By default, the background-image property repeats an image both horizontally and vertically. Some images should be repeated only horizontally or vertically. If the image is repeated only horizontally (repeat-x), the background will look better: For more CSS background properties go to the URL: WEB PROGRAMMING : CSS

11 CSS Text The CSS text properties define the appearance of text Text Color The color property is used to set the color of the text. The color can be specified by: name - a color name, like "red" RGB - an RGB value, like "rgb(255,0,0)" Hex - a hex value, like "#ff0000" WEB PROGRAMMING : CSS

12 The default color for a page is defined in the body selector. 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. WEB PROGRAMMING : CSS

13 Text Transformation 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. To see all text properties go to the link: WEB PROGRAMMING : CSS

14 CSS Font CSS font properties define the font family, boldness, size, and the style of a text. CSS Font Families In CSS, there is two types of font family names: ogeneric family - a group of font families with a similar look (like "Serif" or "Monospace") ofont family - a specific font family (like "Times New Roman" or "Arial") WEB PROGRAMMING : CSS

15 Font Family The font family of a text is set with the font-family property. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. More than one font family is specified in a comma-separated list: WEB PROGRAMMING : CSS

16 Font Style The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported) WEB PROGRAMMING : CSS