CSS
2020/21 COMP3322 Modern Technologies on WWW
Contents
• About CSS
• CSS Syntax
• The concept of Cascade
• The box model
• More controls for developers • CSS Layout
• Responsive web design
2
About CSS
What is CSS?
• Cascading Style Sheet
• CSS is a W3C standard for describing the presentation (or appearance) of
HTML elements.
• CSS allows us to create rules that specify how the content of an element should appear.
• CSS is a language in that it has its own syntax rules.
• With CSS, we can assign font properties, colors, sizes, borders, background images, and even the position of elements.
4
What is CSS?
• The key to understanding how CSS works is to imagine that there is an invisible box around every HTML element.
• CSS allows you to create rules that control the way that each individual box (and the contents of that box) is presented.
5
CSS Versions
• CSS was first proposed by Håkon Wium Lie on October 10, 1994.
• W3C published the CSS Level 1 Recommendation in Dec 1996.
• Two years later, the CSS Level 2 Recommendation was published.
• CSS Level 2.1 has gone through a decade of development, and only became official W3C Recommendation until June 2011.
• And to complicate matters even more, all through the last decade, during the same time the CSS2.1 standard was being worked on, a different group at the W3C was working on a CSS3 draft.
• CSS3 is divided into several separate documents called “modules”.
• Different modules are in different statuses; some get to Recommendation status and some are still in Working Draft status
Source: Cascading Style Sheets – Wikipedia
6
Three Locations of Placing Styling
• CSS style rules can be located in three different locations. • Inline
• Embedded
• External
• You can combine all 3!
7
Inline Styles
• Style rules placed within an HTML element via the “style” attribute
• An inline style only affects the element it is defined within and will override any other style definitions for the properties used in the inline style.
• Using inline styles is generally discouraged since they increase bandwidth and decrease maintainability.
• Inline styles can however be handy for quickly testing out a style change.
8
Embedded Style Sheet
• Style rules placed within the
Red and center-aligned heading
Red and center-aligned paragraph.