tailieunhanh - Lecture Introduction to web engineering - Lec 17: Introduction to cascading style-sheets (CSS)

After studying this chapter you will be able to understand: Understand the basic concept of CSS; understand the differences among inline, internal and external style sheets; understand how to declare a style. | Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1 Understand the basic concept of CSS Understand the differences among inline, internal and external style sheets Understand how to declare a style Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 2 All web pages can be broken down into bucketed content areas These areas can be updated by changing the code on every page - or - By using cascading style sheets! Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 3 Created by Hakon Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages Cascading style-sheets are powerful mechanism to add style to web document Enforce standards and uniformity Create dynamic effects Works by allowing you to specify rules Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 4 Saves time Easy to change Keep consistency Give you more control over layout Use styles with . | Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 1 Understand the basic concept of CSS Understand the differences among inline, internal and external style sheets Understand how to declare a style Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 2 All web pages can be broken down into bucketed content areas These areas can be updated by changing the code on every page - or - By using cascading style sheets! Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 3 Created by Hakon Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages Cascading style-sheets are powerful mechanism to add style to web document Enforce standards and uniformity Create dynamic effects Works by allowing you to specify rules Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 4 Saves time Easy to change Keep consistency Give you more control over layout Use styles with JavaScript Make it easy to create a common format for all the Web pages Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 5 In-line styles Embedded/internal styles External style sheet Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 6 Inline styles Add styles to each tag within the HTML file Use it when you need to format just a single section in a web page Style attribute is used to add style Example IU Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 7 Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 8 Heading with no style Style attribute Color setting Font size setting Basharat Mahm ood, Department of Computer Science, CIIT,Islamabad, Pakistan 9 Heading with no style CSS styled heading A style is applied to the entire HTML file Use it when you need to modify all instances of particular element (., h1) in a web page .