Download to read offline
Cascading style sheets, Introduction to web programming
- 1.
- 2. Module 3: Cascading StyleSheets (CSS)
- 3. Introduction • The CSS1specification was developed in 1996 • CSS2 was released in 1998 • CSS3 is on its way • CSSs provide the means to control and change presentation of HTML documents • CSS is not technically HTML, but can be embedded in HTML documents • Style sheets allow you to impose a standard style on a whole document, or even a whole collection of documents • Style is specified for a tag by the values of its properties
- 4. Levels of StyleSheets • There are three levels of style sheets – Inline - specified for a specific occurrence of a tag and apply only to that tag – This is fine-grain style, which defeats the purpose of style sheets - uniform style – Document-level style sheets - apply to the whole document in which they appear – External style sheets - can be applied to any number of documents • When more than one style sheet applies to a specific tag in a document, the lowest level style sheet has precedence – In a sense, the browser searches for a style property spec, starting with inline, until it finds one (or there isn’t one)
- 5. Levels of StyleSheets (continued) • Inline style sheets appear in the tag itself • Document-level style sheets appear in the head of the document • External style sheets are in separate files, potentially on any server on the Internet – Written as text files with the MIME type text/css
- 6. Introduction Cascading Style Sheets(CSS) concepts and CSS basic syntax. • Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. • The W3C’s philosophy in terms of how HTML and CSS should fit together is (1) use HTML elements to specify a web page’s content, and (2) use CSS to specify a web page’s appearance. • There are lots and lots of CSS properties that
- 7. CSS Rules CSS RuleSets • A CSS rule set contains one or more selectors and one or more declarations. • The selector(s), which in this example is h1 , points to an HTML element. • The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value.
- 8. CSS Rules • Theselector points to the HTML element to style (h1). • The declaration block (in curly braces) contains one or more declarations separated by semicolons. • Each declaration includes a CSS property name and a value, separated by a colon.
- 9.
- 10. CSS Rules Example forSelector and Declaration: Tree Poem web page
- 11. CSS Rules Example forSelector and Declaration: Tree Poem web page In the Tree Poem web page, the • * {text-align: center;} rule causes the elements that contain text to be centered. • The hr element does not contain text, so it’s not affected by the text-align property and hr elements are centered by default. • The hr {width: 50%;} rule causes the horizontal line to render with a width that’s 50% of the web page body’s width. • The h2, p {font-style: italic; color: blue;} rule causes the heading and paragraph elements to be italicized and blue.
- 12. CSS Syntax andstyle CSS Syntax The style container positioned at the bottom of the web page’s head container. In the style start tag, it’s legal to include a type attribute with a value of "text/css", like this
- 13. CSS Syntax andstyle CSS Syntax In the Tree Poem web page, the type attribute is omitted. Currently, text/css is the only legal value for the type attribute, and it’s the default value for the type attribute. Google’s Style Guide, which covers both HTML and CSS, recommends that you reduce the size of your web page file by omitting the type attribute.
- 14. CSS Syntax andstyle CSS Style Style is used to style and layout the web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.
- 15. CSS Syntax andstyle CSS Style when there is block formatting for multi-line container elements, the start tag and end tag are aligned at the left, and interior lines are indented. If there is a long CSS (at least two or three property-value pairs), use block formatting like this
- 16. CSS Class Selectors Classselector • A CSS class is an attribute used to define a group of HTML elements in order to apply unique styling and formatting to those elements with CSS. • Use a dot operator(.) followed by the class name in a style block. • Use a bracket called a declaration block that contains the property to stylize the element, such as text color or text size. CSS Classes will help to stylize HTML elements quickly • Example: .class name
- 17. CSS Class Selectors Thetwo types of normal selectors are selectors and the universal selector. The third type of CSS selector—a class selector The dot thing (.red in this example) is called a class selector because its purpose is to select elements that have a particular value for their class attribute. So the class selector rule would select/match the following element because it has a class attribute with a value of red: <p class= red> a class selector that select elements that have a particular value for their class attribute</p> In applying the class selector rule to this element, the quote gets displayed with a tomato background color
- 18. CSS Class Selectors Classselector: The three CSS rules with their class selectors .red, .white, and .blue <q> tag defines a short quotation
- 19. CSS Class Selectors Classselector: The three CSS rules with their class selectors .red, .white, and .blue
- 20. CSS Class Selectors ClassSelectors with Element Type Prefixes It is used apply a CSS rule to any element whose one of the classes matches specified prefix. When the same class name is to be used for multiple elements, but each with a different style, you can prefix the dot with the HTML element name. element-type.class-value {property1: value; property2: value;}
- 21. CSS Class Selectors ClassSelectors with * Prefixes • Instead of prefacing a class selector with an element type, as an alternative, you can preface a class selector with an *. Because * is the universal selector, it matches all elements. Therefore, the following CSS rule is equivalent to a standard class selector rule (with no prefix) *.class-value {property1: value; property2: value;} Example: *.big-warning {font-size: x-large; color: red; • It would match all elements in the web page that have a class attribute value of big-warning, and it would display those elements with extra-large red font. • CSS property names follow the same coding convention as developer- defined class attribute values—if there are multiple words, use hyphens to separate the words (e.g., font-size). CSS property values usually follow the same use-hyphens-to-separate-multiple-words coding convention.
- 22. CSS ID Selectors •An ID selector is similar to a class selector in that it relies on an element attribute value in searching for element matches. • An ID selector uses an element’s id attribute (as opposed to a class selector, which uses an element’s class attribute). • A significant feature of an id attribute is that its value must be unique within a particular web page. That’s different from a class attribute’s value, which does not have to be unique within a particular web page. • The ID selector’s unique-value feature means that an ID selector’s CSS rule matches only one element on a web page. • ID selectors are an important part of CSS.
- 23. CSS ID Selectors Tomatch an element with an id attribute, an ID selector rule is needed, and the syntax is The syntax is the same as for a class selector rule, except that you use a pound sign (#) instead of a dot (.), and use an id attribute value instead of a class attribute value. #lizards-lounge {color: green;} <h1 id="lizards-lounge">Lizards Lounge</h1>
- 24. CSS ID Selectors Tomatch an element with an id attribute, an ID selector rule iss needed, and the syntax is
- 25. CSS * Selector The* selector selects all elements. The * selector can also select all elements inside another element Syntax : * { css declarations; } Example: * { background-color: yellow; }