CGS 3066 Lecture 3 Cascading Style Sheets CSS

CSS 3 ● CSS stands for Cascading Style Sheets. ● Current Version: CSS 3.

CSS - Intro ● Styles define how to display HTML elements. ● Styles were

Why CSS? ● The original purpose of HTML was to combine the structure and

Why CSS? ● Separate the “style” elements from the documents and put it in

3 ways to do styling ● Inline Style o Style elements are included as

Inline CSS ● What little styling we’ve been doing so far. ● Mixes content

Inline CSS example <h 1 style="color: blue; margin-left: 30 px; "> This is a

Internal CSS ● Used when the current document has a unique style. ● A

Internal CSS example <head> <style> body { background-color: linen; } h 1 { color:

External CSS ● Used when a style is applied to many pages (like a

External CSS ● An external stylesheet is written as a separate file with a

External CSS example mystyle. css body { background-color: lightblue; } h 1 { color:

External CSS example <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> </head>

Why “Cascading”? ● Multiple styles will cascade into one. ● Styles can be specified:

Cascading Order Generally speaking we can say that all the styles will "cascade" into

Cascading example External Style sheet: h 1 { color: navy; margin-left: 20 px; }

Cascading example The final style for the h 1 element will be a combination

Slides: 18

Download presentation

CGS 3066: Lecture 3 Cascading Style Sheets

CSS 3 ● CSS stands for Cascading Style Sheets. ● Current Version: CSS 3. ● Supported by most browsers o o o Internet Explorer : 9 and higher Firefox: 15 or higher Chrome: 16 or higher Safari: 4 or higher Opera: 10 or higher

CSS - Intro ● Styles define how to display HTML elements. ● Styles were added to HTML 4. 0 to solve a problem. ● External Style Sheets can save a lot of work. ● External Style Sheets are stored in CSS

Why CSS? ● The original purpose of HTML was to combine the structure and content of the page into one document. ● When presentation elements began to be included in the document, it increased the complexity and reduced readability. ● Solution: Move the presentation elements elsewhere.

Why CSS? ● Separate the “style” elements from the documents and put it in a “style sheet”. ● Advantages: o o Styles can be changed easily. Document is more readable.

3 ways to do styling ● Inline Style o Style elements are included as HTML attributes. ● Internal Style Sheets o A <style> tag is used in the HTML document to specify the presentation elements. ● External Style Sheets o A separate “. css” file is used as a part of your set of documents. It contains all the styling elements.

Inline CSS ● What little styling we’ve been doing so far. ● Mixes content with presentation. Loses many of the advantages of a style sheet. ● Used very rarely (when very few elements require styling). ● Add the style attribute to the relevant tag. The style attribute can contain any CSS property.

Inline CSS example <h 1 style="color: blue; margin-left: 30 px; "> This is a heading. </h 1>

Internal CSS ● Used when the current document has a unique style. ● A <style> tag is used under the <head> tag of the document to define the styles. ● The content of the <style> tag follows CSS syntax.

Internal CSS example <head> <style> body { background-color: linen; } h 1 { color: maroon; margin-left: 40 px; } </style> </head>

External CSS ● Used when a style is applied to many pages (like a theme). ● The look of the webpage can be changed by just changing one file. ● Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section.

External CSS ● An external stylesheet is written as a separate file with a “. css” extension. ● Should go into the same relative path as the rest of the files (or can be referred by absolute path). ● The external stylesheet should not contain any HTML tags.

External CSS example mystyle. css body { background-color: lightblue; } h 1 { color: navy; margin-left: 20 px; }

External CSS example <head> <link rel="stylesheet" type="text/css" href="mystyle. css"> </head>

Why “Cascading”? ● Multiple styles will cascade into one. ● Styles can be specified: inside an HTML element inside the head section of an HTML page in an external CSS file ● ● ●

Cascading Order Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority: 1. Inline style (inside an HTML element) 2. Internal style sheet (in the head section) 3. External style sheet 4. Browser default

Cascading example External Style sheet: h 1 { color: navy; margin-left: 20 px; } Internal Style sheet: h 1 { color: orange; }

Cascading example The final style for the h 1 element will be a combination of the two according to the order of preference: color: orange; margin-left: 20 px;