Download
1 / 11
110 likes | 280 Views
Cascading Style Sheets. CSS. Introduction To CSS. 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.
E N D
Introduction To CSS • 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 • 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 • 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 • <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 • Embedding and Importing Style Sheets • Can easily control style document by document. • No additional page requests for style information. • Syntax • <style> • /*style rules here*/ • h1{backgroud-color:red;} • </style>
Adding Style to a Document • Using Inline Style • Can easily control style to a single character instance. • Overrides any external or document styles. • Syntax <h1 style=“font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1> • style attribute is used to add style information directly in a tag.
Understanding Block and Inline Elements • Block-level elements appear on the screen as line break before and after them. • For example the <p>, <h1>, <h2>, <h3>, <h4>, <ul>, <ol>, <hr>, and <hr>elements are all block level elements. • 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> • 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 • Universal Selector • The universal selector is an asterisk; it matches all element types in the document. *{background-color:”red”;} • 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. h1,p,b{font-family:”arial”;}
Selectors • 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="BackgroundNote">This paragraph contains an aside.</p> .BackgroundNote {font-size:”24px”;} • Creating a selector that selects only the <p> elements that carry a class attribute with a value of BackgroundNote p.BackgroundNote {font-size:”24px”;}
Selectors • 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:”24px”;}
