Cascading Style Sheet Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference Introduction • Can be written in html or css file • Consists of a list of rule sets • A Rule set consists of: – A selector – Style properties and their values • Inline CSS • CSS added in HEAD section Introduction - Inline CSS • Definition: – Style sheets are added inside HTML element • Syntax: Content Introduction CSS added in HEAD section - INTERNAL • Definition: – Style sheets are added in tag • Syntax: Title selector { property:value; another_property:value; } Page cotent Introduction CSS added in HEAD section - EXTERNAL • Html file • Css file Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference CSS Selectors • • • • • Universal selector Type selector class selector ID selector Attribute selector Universal selector • Definition: – Is represented with an “*” – Is applied to all elements • Syntax: * { font-family: Calibri, Arial, sans-serif; } 10 relative Figure 40: Relative positioning 140 relative Figure 40_bis: Relative positioning 141 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • CSS Outline • Display and Visibility • Positioning – – – – – static relative absolute fixed z-index • CSS Float and Clear • Pseudo-classes • Reference 142 absolute • An absolute position element – Is positioned relative to the first parent element that has a position other than static, or if no such element exists, and its display is not affected by other elements – Absolute positioning takes the element out of the normal document flow, and can overlap other elements • Syntax: selector { position: absolute; } 143 absolute Figure 41: Absolute positioning 144 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • CSS Outline • Display and Visibility • Positioning – – – – – static relative absolute fixed z-index • CSS Float and Clear • Pseudo-classes • Reference 145 fixed • • • • Based on the viewport window Can overlap other element Not move even if the window is scrolled Syntax: selector { position: fixed; } • Example: #p_fix { position: fixed; top: 20px; left: 40%; } 146 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • CSS Outline • Display and Visibility • Positioning – – – – – static relative absolute fixed z-index • CSS Float and Clear • Pseudo-classes • Reference 147 z-index Figure 42: Using z-index positioning 148 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference 149 CSS Float and Clear • For students! 150 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference 151 Pseudo-classes • For students! 152 Content • • • • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference 153 Reference • http://coursesweb.net/ • http://www.w3schools.com/ 154 [...]... } 16 CSS Selectors • • • • • Universal selector Type selector class selector ID selector Attribute selector 17 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline... of grouping selectors 23 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference... !important declaration 29 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference... Fonts • Configuring Text 24 Defining CSS rules to child selectors • Usage: – Is used to apply new CSS rules for child • Syntax: parent child { property:value; property:value; } 25 Defining CSS rules to child selectors • Example: Figure 3: Define CSS rules for child 26 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important... The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Fonts • Configuring Text 27 The !important Declaration • Usage: – To make certain CSS rules more important than others – !important declaration... The !important Declaration – The execution order of the CSS rules – Adding Comments within Style sheets • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Fonts • Configuring Text 21 Grouping Selectors • Definition: – Is used to apply same CSS rules to many selectors – Different selectors are... Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Fonts • Configuring Text 32 Adding Comments within Stylesheets • Usage: – To organize and keep track of CSS rules – Beginning with “/*” – Ending with “*/” • Syntax: /* this is a comment */ selector { property:value; property:value; } 33 Content • Writing CSS code... Text 30 The execution order of the CSS rules • • • • Inline > internal > external !importance declaration has top priority More detail has higher priority Later has higher priority 31 Content • Writing CSS code • Creating style sheet – Inheritance – Grouping Selectors – Defining CSS rules to child selectors – The !important Declaration – The execution order of the CSS rules – Adding Comments within... name – Used to apply same CSS rule on different tags – class selector is preceded by a “.” • Syntax: Content (in body) clas1 { color: green; } 14 CSS Selectors • • • • • Universal selector Type selector class selector ID selector Attribute selector 15 ID selector • Definition: – Apply CSS rule to only one ID – An ID selector can appear many times in CSS file – An ID selector... Configuring Fonts – – – – – – – font-family font Embedding font-size font-weight font-variant font-style Multiple values for font property • • • • • • • • • Backgrounds CSS Box Model CSS Border CSS Outline Display and Visibility Positioning CSS Float and Clear Pseudo-classes Reference • Configuring Text 34 font-family • • • • Accepts a comma-separated list Enclose font that contains spaces with “xy z” Insert ... • • • • Writing CSS code Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display and Visibility Positioning CSS Float and Clear... Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display... Content • Writing CSS code – Introduction – CSS Selectors • • • • • • Creating style sheet Configuring Fonts Configuring Text Backgrounds CSS Box Model CSS Border • • • • • • CSS Outline Display