Cascading Style Sheets CSS Introduction To CSS n

Cascading Style Sheets CSS

Introduction To CSS n n CSS works by allowing your associate rules with the elements that appear in document. Each style rule in a style sheet has two main parts • The selector, which indicates which element or elements the declaration applies to. • The declaration, which sets out how the elements should be styled.

Introduction To CSS n The declaration is also split into two parts, separated by a colon: • A property, which is the property of the selected element(s) that you want to affect. • A value, which is a specification for this property; in this case it is the Arial typeface.

Adding Style to a Document n Linking to a Style Sheet (External CSS) • Can set style for many documents with one style sheet. • Style information cached by the browser. • The common style sheet document extension is. css, for Cascading Style Sheets. Syntax n <link rel=“stylesheet “ href=“main. css” type=“text/css”> • rel attribute is used to indicate the relationship for the link element. • href attribute is used to indicate the URL of the style sheet to use. • type attribute is used to indicate the linked style sheet is a cascading style sheet (CSS).

Adding Style to a Document n Embedding and Importing Style Sheets • Can easily control style document by document. • No additional page requests for style information. • Syntax <style> /*style rules here*/ h 1{backgroudcolor: red; } </style>

Adding Style to a Document n Using Inline Style • Can easily control style to a single character instance. • Overrides any external or document styles. • Syntax <h 1 style=“font-size: 48 pt; font-family: Arial; color: green; ”>CSS 1 Inline</h 1> • style attribute is used to add style information directly in a tag.

Understanding Block and Inline Elements n Block-level elements appear on the screen as line break before and after them. • For example the <p>, <h 1>, <h 2>, <h 3>, <h 4>, <ul>, <ol>, <hr>, and <hr>elements are all block level elements. n Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own • For example the <b>, <i>, <u>, <sub>, and <li> elements are all inline elements.

Grouping Elements with <div> and <span> n n The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page. They are commonly used with CSS to allow you to attach a style to a section of a page. <div> is the block-level element <span> is the inline-level element

Selectors n Universal Selector • The universal selector is an asterisk; it matches all element types in the document. *{background-color: ”red”; } n The Type Selector • The type selector matches all of the elements specified in the comma-delimited list. It allows you to apply the same rules to several elements. h 1, p, b{font-family: ”arial”; }

Selectors n The Class Selector • The class selector allows you to match a rule with an element carrying a class attribute whose value you specify in the class selector. <p class="Background. Note">This paragraph contains an aside. </p>. Background. Note {font-size: ” 24 px”; } • Creating a selector that selects only the <p> elements that carry a class attribute with a value of Background. Note p. Background. Note {font-size: ” 24 px”; }

Selectors n ID selector • The id selector works just like a class selector, but works on the value of id attributes. <p id=“abstact”>Hello world</p> p. #abstract {font-size: ” 24 px”; }