INTERNET APPLICATIONS CPIT405 CSS Cascading Style Sheet Instructor: Omnia H. Alwazzan

Cascading Style Sheets  Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation semantics (the look and formatting) of a document written in a markup language.

CSS  CSS is designed primarily to enable the separation of document content from document presentation, including elements such as the layout, colors, and fonts.  This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in the structural content.

CSS (cont.)  CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element.

Ways of inserting a style sheet 1. External style sheet. 2. Internal style sheet. 3. Inline style.

Internal Style Sheet  An internal style sheet should be used when a single document has a unique style.  You define internal styles in the section of an HTML page, by using the tag.

Example 1 body {color:red;} h1 {color:#00ff00;} p.ex {color:rgb(0,0,255);} This is a text This is heading 1 This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector. This is a paragraph with class="ex". This text is blue.

Example 2 a {text-decoration:none; color:green;} visit our university web site KAU

Example 3 h1{background-color:#6495ed;} p{background-color:#e0ffff;} div{background-color:#b0c4de;} CSS background-color example! This is a text inside a div element. This paragraph has it's own background color. We are still in the div element.

External Style Sheet  An external style sheet is ideal when the style is applied to many pages.  With an external style sheet, you can change the look of an entire Web site by changing one file.  Each page must link to the style sheet using the tag. The tag goes inside the section.

Example 1. Make new external css file 2. Write the following css in it 3. Save the file with style.css 4.. Make an html file and write the following on it body{ background-color:yellow;} h1{font-size:36pt;} h2{color:blue;} p{margin-left:50px;}

Example (cont.) This header is 36 pt This header is blue This paragraph has a left margin of 50 pixels

Inline Styles  An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!  To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

Example Untitled 1 this is a bold heading

Remember? Ways of inserting a style sheet 1. External style sheet. 2. Internal style sheet. 3. Inline style.

CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

Example 1. Make new external css file 2. Write the following css in it 3. Save the file as style.css 4. Make an html file and write the following in it body{ background-color:yellow;} h1{font-size:36pt;} h2{color:blue;} p{margin-left:50px;}

Example (cont.) This header is 36 pt This header is blue This paragraph has a left margin of 50 pixels

CSS positioning  Allows you to position an element.  Positioning can be tricky sometimes! Decide which element to display in front! Elements can overlap!

CSS positioning  Allows you to position an element.  It can also place an element behind another, and specify what should happen when an element's content is too big.  Elements can be positioned using the top, bottom, left, and right properties.  There are four different positioning methods. 1. Static Positioning 2. Fixed Positioning 3. Relative Positioning 4. Absolute Positioning

Static Positioning  HTML elements are positioned static by default.  Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning  An element with fixed position is positioned relative to the browser window.  It will not move even if the window is scrolled:  Example: p.pos_fixed { position:fixed; top:30px; right:5px; }

Relative Positioning  A relative positioned element is positioned relative to its normal position. Example: h2.pos_left { position:relative; left:-20px; } h2.pos_right { position:relative; left:20px; }

Absolute Positioning  An absolute position element is positioned relative to the first parent element that has a position other than static.  If no such element is found, the containing block is. Example: h2 { position:absolute; left:100px; top:150px; }

Selectors  Selectors are patterns used to select the element(s) you want to style. Universal selector "*"  It matches the name of any element type.  It matches any single element in the document tree.  If the universal selector is not the only component of a simple selector, the "*" may be omitted.

Example HTML code: The Universal Selector We must emphasize the following: It's not a wildcard. It matches elements regardless of type. This is an immediate child of the division. CSS code: div * em

The selector div * em will match the following em elements:  “Universal” in the h1 element (* matches the )  “emphasize” in the p element (* matches the )  “not” in the first li element (* matches the or the )  “type” in the second li element (* matches the or the )  It won’t match the immediate element, since that’s an immediate child of the div element—there’s nothing between and for the * to match.

Example This rule set will be applied to every element in a document: Follow this link for more example about a selector * { margin: 0; padding: 0;}

Descendant selectors  A descendant selector is made up of two or more selectors separated by white space.  A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A.  For example, consider the following rules: h1 { color: red } em { color: green }  Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as: This headline is very important

 We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1: h1 { color: red } em { color: green } h1 em { color: blue } Selects all elements inside elements  The third rule will match the EM in the following fragment: This headline is very important

Child Selector  A child selector matches when an element is the child of some element.  A child selector is made up of two or more selectors separated by ">".  The following rule sets the style of all P elements that are children of BODY: body > P { line-height: 1.3 }  The following example combines descendant selectors and child selectors: div ol>li p  It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV.

Adjacent sibling selectors  Adjacent sibling selectors have the following syntax: E1 + E2  The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).  Thus, the following rule states that when a P element immediately follows a MATH element, it should not be indented: math + p { text-indent: 0 }  The next example reduces the vertical space separating an H1 and an H2 that immediately follows it: h1 + h2 { margin-top: -5mm }  The following rule is similar to the one in the previous example, except that it adds a class selector. Thus, special formatting only occurs when H1 has class="opener": h1.opener + h2 { margin-top: -5mm }

Example This selector matches all p elements that appear immediately after h2 elements: What will happen if we apply the above selector to the following code? h2+p { : declarations } Heading The selector above matches this paragraph. The selector above does not match this paragraph.

Heading The selector above does not match this paragraph. Heading Lorem ipsum dolor sit amet. The selector above matches this paragraph. h2+p { : declarations } What about this one? And this one?

Image Orientation:  Specifies a rotation in the right or clockwise direction that a user agent applies to an image.  The image-orientation property provides a way to specify a rotation to be applied to an image. Syntax image-orientation: [value];

Example class { image-orientation: 90deg; }

Assignment 4 A. Write an xhtml and css code to design the following:

Assignment 4 (cont.) B. Write a xhtml and css code to design the following  Move the inline style sheet out of the above program to have one external style sheet.

Question to think of  If many html files refer to same single css file, and one of the html needs a different style for a particular object compared to other html files, what will be the solution?

Note(s)  You should submit your answer before 11:55 am to acadox website course CPIT405 (1 week for each assignment).  your Answer Folder should be named as:yourName_assignment4_405

We’re done! Thank you for listening