css

Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents

Why CSS Achieve consistency across multiple pages of a site. CSS styles offer great flexibility in that style is not confined to text objects. Less space Faster download when using external css file.

Applying style rules External style sheets Embedded style sheet Inline style

1-External style sheet It is sheet saves the rules in a separete style sheet document (namedoc.css) The.css document is then linked to one or more HTML documents. So, all the files in web site may share the same style sheet. Written in separated file that is called using the following tag

Example m.css document : p { font-size=14 } h1 { font-family=andalus ;color=“0000ff”} link the external.css document into web site pages:

2- embedded style sheet It is placed in the of HTML document using tag. Rules in an embedded style sheet apply only to the HTML document.

Cont. 1. Written between head tags 1- Using style type tag ---

2- style for the whole page Use tag that is written in the head tag. Example: p { font-size=14 } h1 { font-family=andalus ;color=“0000ff”} good day holiday Friday selector value property

Component of style sheet Style sheets in CSS are made up of rules. Each rule has three parts:  the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;  the property (in the example, 'color' and 'background-color' are both properties), which specifies what aspect of the layout is being set;  and the value ('purple' and '#d8da3d'), which gives the value for the style property. example shows that rule: body { color: purple } body { background-color: #d8da3d }

3- inline style Style sheet properties can be applied to a single page element using the style= attribute right within its opening HTML tag. Inline style apply only to that element.

Cont.  example: the statement Example cases: good work اليوم جميل good work Combine tags  good Or =

Conflicting style sheets: the cascading The name cascading refer to applying several style sheets to the same document, there are bound to be conflicts. The cascading priority orders from general to specific.

web pages layout You can create your page layout :  Using table  Using CSS + layers (div) There are advantages and disadvantages for each one.

disadvantageadvantage Loads only once all the elements within the table have loaded - usually slower than css layouts Changes to the tables will need to be made on each page and all the pages will need to uploaded to the server again Easy to design Works well on older browsers Table layout More challenging to design May not work on some of the older browsers Loads fast - the css file just needs to be loaded once Can easily change the layout of the entire site by tweaking the.css file as the design elements are separated from the content Css layout