CSS CASCADING STYLE SHEETS SHEETS 1 WHAT IS

WHAT IS CSS? “CSS stands for Cascading Style Sheets” “CSS is a style language

STYLES SOLVED A BIG PROBLEM HTML was never intended to contain tags formatting a

CSS SAVES A LOT OF WORK! Cascading Style Sheets are now the standard way

CSS RULE: selector { property : value; } 1. 2. 3. Selector this is

EXAMPLE: h 1 { color : blue; } 1. 2. 3. h 1 this

Each selector can have multiple properties. Each property within the selector can have

HOW TO ADD CSS IN WEBPAGES: There are three ways of inserting a style

ADDING CSS TO WEB PAGES: 1. It can be inserted within the header of

1. INTERNAL STYLE SHEET <head> <style type=“text/css”> h 1 { color : blue; }

2. INLINE STYLE SHEETS <element style=“…styles…”> The value of style attribute is any combination

3. EXTERNAL STYLE SHEETS <link rel=“stylesheet” type=“text/css” href=“” >

The <LINK> is a special HEAD element which indicates a relationship between the current

Example 1. html DOCUMENT TREE When you nest one element inside another, the nested

COMMENTS IN CSS A CSS comment begins with "/*", and ends with "*/", like

View Example GROUPING SELECTORS In style sheets there are often elements with the same

View Example CONTEXTUAL SELECTORS p i strong {color: red} Contextual selectors define styles that

CLASS SELECTOR GET INTO ACTION! o What would you do if you want some

GET INTO ACTION! CLASS SELECTOR To create a class selector, use a period (.

DIFFERENT INSTANCES OF A CLASS SELECTOR • • To create a class that can

MULTIPLE CLASSES DEFINING CLASS IN CSS STYLE . applylarge { font-size: 20 px; }.

ID SELECTOR GET INTO ACTION! The id selector is used to specify a style

CLASS VS ID Use class if: The style is used in various places through

Slides: 25

Download presentation

CSS (CASCADING STYLE SHEETS) SHEETS 1

WHAT IS CSS? “CSS stands for Cascading Style Sheets” “CSS is a style language that defines layout of HTML documents. ” “Styles define how to display HTML elements” Styles were added to HTML 4. 0 to solve a problem HTML is used to structure content where as CSS is used formatting structured content. Unlike HTML, CSS doesn’t create anything. Instead it decorates, aligns and positions (etc) elements in HTML. In a nut shell, CSS takes the normal HTML output & adds a few rules to how it is actually displayed. 2

STYLES SOLVED A BIG PROBLEM HTML was never intended to contain tags formatting a document. HTML was intended to define the content of a document, like: o o <h 1>This is a heading</h 1> <p>This is a paragraph. </p> When tags like <font>, and color attributes were added to the HTML 3. 2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W 3 C) created CSS. In HTML 4. 0, all formatting could be removed from the HTML document, and stored in a separate CSS file. All browsers support CSS today. 3

CSS SAVES A LOT OF WORK! Cascading Style Sheets are now the standard way to define the presentation of your HTML pages. They are much more efficient than using HTML on every page to define the look of your site. A collection of style is commonly referred to as style sheets. Styles are normally saved in external. css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! 4

CSS RULE 5

CSS RULE: selector { property : value; } 1. 2. 3. Selector this is the HTML tag that you want to style. Property this is the attribute you adjust, control or modify. Value it is the style you apply to that property

EXAMPLE: h 1 { color : blue; } 1. 2. 3. h 1 this is the HTML element that you want to style. color this is the attribute you adjust, control or modify. blue it is the style you apply to that property 7

Each selector can have multiple properties. Each property within the selector can have independent values. The property & value are separated with a colon & contained within curly brackets. Multiple properties are separate by a semicolon. Multiple values within a property are separated by commas. Value in CSS doesn’t require quotation marks except if the value has multiple words. 8

HOW TO ADD CSS TO WEB PAGES? 9

HOW TO ADD CSS IN WEBPAGES: There are three ways of inserting a style sheet: External style sheet Inline style 10

ADDING CSS TO WEB PAGES: 1. It can be inserted within the header of a web page Internal style sheet 2. It can be inserted within the body of a web page (usually in certain sections or individual elements) Inline style sheet 3. It can be inserted within a separate web page External style sheet

1. INTERNAL STYLE SHEET <head> <style type=“text/css”> h 1 { color : blue; } </style> </head> • The <STYLE> element is used in HEAD section to indicate style information for the entire document. • type It declares the type of data which is being linked to the document. In case of CSS, the only allowed value is text/css.

2. INLINE STYLE SHEETS <element style=“…styles…”> The value of style attribute is any combination of style declarations. Also note that there aren’t any curly braces used here, but the colon/semicolon rule still applies. <p style="color: blue; font-family: Arial; ">

3. EXTERNAL STYLE SHEETS <link rel=“stylesheet” type=“text/css” href=“” >

The <LINK> is a special HEAD element which indicates a relationship between the current document & some other object. It is mostly used to link style sheets. rel It describes the relation of the linked file to the document itself. There are 2 possible values: 1. stylesheet used to control the way the current document is rendered. 2. alternate stylesheet used to control the way the current document is rendered, but will not be used by default if a "rel='stylesheet'" stylesheet is present and successfully loaded. type It declares the type of data which is being linked to the document. In case of CSS, the only allowed value is text/css. href It is the URL of the external style sheet. Either relative or absolute URLs may be needed. This attribute is required. 15

Example 1. html DOCUMENT TREE When you nest one element inside another, the nested element will inherit the properties assigned to the containing element. Unless you modify the inner element values independently. html Body head Title h 1 p em

COMMENTS IN CSS A CSS comment begins with "/*", and ends with "*/", like this: /* comment goes here */

View Example GROUPING SELECTORS In style sheets there are often elements with the same style. To minimize the code, you can group selectors. To group selectors, separate them with comma. h 1{color: green; } h 2{color: green; } p{color: green; } h 1, h 2, p {color: green; }

View Example CONTEXTUAL SELECTORS p i strong {color: red} Contextual selectors define styles that are only applied when certain tags are nested within other tags. This allows to use a tag & not have it adopt the CSS attribute each time it is used. The selectors are separated by a space.

CLASS SELECTOR GET INTO ACTION! o What would you do if you want some of the paragraphs to appear bold while other ones do not? o Use a class selector! o Class selectors allow you to associate a class with a particular subset or class of elements.

GET INTO ACTION! CLASS SELECTOR To create a class selector, use a period (. ) followed by the name you want for the class. This allows you to set a particular style for any HTML elements with the same class. . col {color: red; } <p class=“col"> This is an example of multiple classes. </p>

DIFFERENT INSTANCES OF A CLASS SELECTOR • • To create a class that can only apply to particular elements, you need to specify that element in selector. You can create generic selectors that can apply to every HTML element. p. col {color: red; } i. col{color: blue; }

MULTIPLE CLASSES DEFINING CLASS IN CSS STYLE . applylarge { font-size: 20 px; }. applyred { color: #FF 0000; } IN HTML <BODY> <p class="applylarge applyred"> This is an example of multiple classes. </p>

ID SELECTOR GET INTO ACTION! The id selector is used to specify a style for a single, unique element. It is defined by using a # symbol. #red{color: red; } <h 1 id="red"> ID selectors </h 1>

CLASS VS ID Use class if: The style is used in various places through out the document. The style is very general. Use ID if: • • The style is only used once ever in the document. The style is specific to a certain area of the document.