Lecture 6 - CSS Styles.docx

5 Pages
Unlock Document

Western University
Computer Science
Computer Science 1033A/B
Vivi Tryphonopoulos

CSS Styles: The Box Model 4/24/2013 1:10:00 PM Lecture 6 CSS  Cascading Style Sheets (CSS) o CSS is a stylesheet language  Not a mark-up language like HTML or a scripting language like JavaScript o Style sheets – a collection of formatting rules that control the appearance of HTML web pages o Cascade – refers to how files are applied to pages (order of precedence)  Styles are applied in the order they are found  Embedded styles take priority only over external styles  The styles in the lowest (newest) style sheet overrides those in the higher (older, created first) style sheets  E.g. – order attached to this webpage  Stylesheet1 – h1, h2, img  Stylesheet2 – h2, ordered list  Stylesheet3 – h2, img (h2 and img in this style sheet will override the h2 and img in stylesheet1) o HTML controls the structure  Add text, image, links, ordered lists o CSS controls the presentation/appearance/style:  Text font and format  Styles for headings  Images borders and padding  Remember – colour #609 = 66 00 99  Benefits of CSS o You can change the entire layout of the page without changing its content or structure  The HTML code stays the same but the CSS affects the look  Speed in production/maintenance o One or more styles can be used to control the style of the entire website or individual web pages o Presents highly modularized web designs  Website can be controlled and constructed by five elements:  HTML – controls document structure  CSS – controls document look and feel – style/presentation  JavaScript – controls the behaviour within the client/browser  PHP – server side languages control processing and business logic  MySQL – control database content  Website can use all of the above element, or none at all  You can store CSS styles in two ways: o Within each webpage (embedded) o In an external style sheet attached to the webpage o Benefits:  Useful for maintaining site  Gathered in one file  Easier to implement design changes across entire website  Enhances site’s appearance  Consistent and uniform  Promotes professional look  Reusability  You can apply style sheet to any webpage  More control of elements/tags  File Size  Reduces file size if attached rather than embedded Building a Website  Before authors were allowed to control html pages through CSS, browsers had to have a way to display HTML content visually o Manufacturers agreed on a default display o A style sheet overrides this default style with styles of what you want it to look like Box Model  Describes the physical properties around the e
More Less

Related notes for Computer Science 1033A/B

Log In


Don't have an account?

Join OneClass

Access over 10 million pages of study
documents for 1.3 million courses.

Sign up

Join to view


By registering, I agree to the Terms and Privacy Policies
Already have an account?
Just a few more details

So we can recommend you notes for your school.

Reset Password

Please enter below the email address you registered with and we will send you a link to reset your password.

Add your courses

Get notes from the top students in your class.