1. NASRULLAHIBA

2.  It is time to take your web designing skills to the next level with Cascading Style Sheets (CSS). They are a way to control the look and feel of your HTML documents in an organized and efficient manner. With CSS you will be able to: Add new looks to your old HTML Completely restyle a web site with only a few changes to your CSS code Use the "style" you create on any webpage you wish! CSS vs HTML

3.   A stylesheet can, and should be, completely separate from your HTML documents. When you have mastered CSS and HTML, you will be able to separate your web site's design and formatting (CSS) from the content (HTML). Continued

4.  The tag is nothing more than a container for other tags. Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together. tag

5.  selector {property: value;}  Selector:  on a simple level HTML element you wish to define  Property:  attribute you wish to change  Value:  value the property takes CSS Structure

6.  selector

7.   The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#".  The style rule below will be applied to the element with id="para1": Id selector

8.  What is css CSS stands for Cascading Style Sheets 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 files

9.  CSS  A css is actually a collection of rules.  A rule is a combination of a selector and one or more declarations, which in turn can be broken down to a property and a value.

10.  SYNTAX  A CSS rule has two main parts: a selector, and one or more declarations:  Example:

11.  Selectors  A selector is used to select or point to one or more specific elements within your page.

12.  The Universal selector, indicated by an asterisk (*), applies to all elements in your page. The Universal selector can be used to set global settings like a font family. The following rule set changes the font for all elements in your page to Arial: * { font-family: Arial; } Universal selector

13.  The Type selector enables you to point to an HTML element of a specific type. With a Type selector, all HTML elements of that type will be styled accordingly. h1 { color: Green; } The type selector

14.  ID AND CLASS SELECTOR In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":

15.  CLASS SELECTOR The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for any HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." In the example below, all HTML elements with class="center" will be center-aligned:

16.   The id selector is used to specify a style for a single, unique element.  The id selector uses the id attribute of the HTML element, and is defined with a "#".  The style rule below will be applied to the element with id="para1": Class selector

17.  h1, h2, h3, h4, h5, h6 { color: Red; } Grouping and combing selectors

18.  This is white text on a black background. Inline style

19.  CSS box model

20.   All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout.  The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content continued

21.   Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box  Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear continued

22.   Inline  Affects individual HTML tag...... some text Internal Style Sheets (1/2)

23.   Embedded  Affects individual document... p {font-family: Arial, sans-serif;}... some text Internal Style Sheets (2/2)

24.   Separate text file (.css)  e.g. styles.css p { font-family: Arial, Sans-serif; } External Style Sheets (1/4)

25.   Linked styles  Affect all documents that are linked to the style sheet...... some text External Style Sheets (2/4)

26.   Imported styles (1/2)  Affect all documents that are linked to the style sheet  Not supported by level 4 browsers  Often used to hide CSS2 styles from older browsers External Style Sheets (3/4)

27.   Imported styles (2/2) External Style Sheets (4/4) Into HTML file... <!-- import url(“styles.css”); --> Into another style sheet (sectionstyles.css) - @import instruction must be first line of file! @import url(“styles.css”); /*sectionstyles start here*/ h1 { font-size: 200%; color: #6b84b5 }

28.  1.HTML formatting instructions (e.g. tags) 2.Inline styles 3.Embedded styles 4.Linked styles 5.Imported styles 6.Default browser styles Order of precedence

29.   Styles assigned to a HTML element  Class selector styles  Define different styles for one or more HTML elements  Assigned to the class attribute within an HTML element  ID selector styles  Define different styles for one and the same HTML element  Assigned to the ID attribute within an HTML element Types of CSS styles

30.   CSS: ….blue {color: #082984}.red {color: #de2131}  HTML … Headline a summary some text … Class selector styles

31.   Used when an HTML element can display more than one behaviour (e.g. hyperlinks)  CSS: a:link {color: #000} a:visited {color: #000} a:hover {color: #69f} a:active {color: #000}  HTML Next page Pseudo-classes

32.   CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue}  HTML … Headline Summary Conclusion … ID Selector styles