Web engineering: Lecture 11, 12 - Majid Mumtaz

In this lecture will introduce Cascading Style Sheet (CSS). After completing this lecture, students will be able to: What is CSS? Styles solved a big problem, CSS saves a lot of work, CSS syntax, CSS example,... Inviting you to refer.
Nội dung trích xuất từ tài liệu:
Web engineering: Lecture 11, 12 - Majid Mumtaz Web Engineering Lecture 11-12 MAJID MUMTAZ Department of Computer Science, CIIT Wah 1 CSS – Cascading Style Sheet • 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 Style Sheets can save a lot of work • External Style Sheets are stored in CSS files 2 Styles Solved a Big Problem • HTML was never intended to contain tags for formatting a document. • HTML was intended to define the content of a document, like: • This is a heading • This is a paragraph. • When tags like , and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. • To solve this problem, the World Wide Web Consortium (W3C) created CSS. • In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file. • All browsers support CSS today. 3 CSS Saves a Lot of Work! • CSS defines HOW HTML elements are to be displayed. • Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! 4 CSS Syntax • A CSS rule has two main parts: a selector, and one or more declarations: • The selector is normally the HTML element you want to style. • Each declaration consists of a property and a value. • The property is the style attribute you want to change. Each property has a value. 5 CSS Example • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets: e.g. p { color:red; text-align:center;} To make the CSS more readable, you can put one declaration on each line, like this: p{ color:red; text-align:center; } 6 CSS Id and Class • In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called 'id' and 'class'. • The id Selector: The id selector is used to specify a style for a single, unique element. • The id selector uses the id attribute of the HTML element, and is defined with a '#'. • The style rule below will be applied to the element with id='para1': #para1 { text-align:center; color:red; } 7 The class Selector • The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. • This allows you to set a particular style for many HTML elements with the same class. • The class selector uses the HTML class attribute, and is defined with a '.' • In the example below, all HTML elements with class='center' will be center-aligned: .center {text-align:center;} • You can also specify that only specific HTML elements should be affected by a class. • In the example below, all p elements with class='center' will be center- aligned: p.center {text-align:center;} 8 Three Ways to Insert CSS • There are three ways of inserting a style sheet: – External style sheet – Internal style sheet – Inline style • External Style Sheet :An external style sheet is ideal when the style is applied to many pages. 9 Three Ways to Insert CSS (cont.) • Internal Style Sheet: An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the tag, like this: hr {color: skyblue;} p {margin-left:20px;} body {background- image:url('images/background.gif');} 10 Multiple Styles Will Cascade into One • Styles can be specified: – inside an HTML element – inside the head section of an HTML page – in an external CSS file • Cascading order – Browser default – External style sheet – Internal style sheet (in the head section) – Inline style (inside an HTML element) Highest priority 11 All CSS Background Properties Property Description background Sets all the background properties in one declaration background-attachment Sets whether a background image is fixed or scrolls with the rest of the page background-color Sets the background color of an element background-image Sets the background image for an element background-position Sets the starting position of a background image background-repeat Sets how a background image will be repeated 12 CSS Text Property Description color Sets the color of text direction Specifies the text direction/writing direction letter-spacing Increases or decreases the space between characters in a text line-height Sets the line height text-align ...