css

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

Cont. Style sheet is a collection of rules. Rule is a statement made up of an HTML or custom style (selector) and is defined properties and value. Example: h1{ color :#ff0000; - } selector property value

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 }

Applying style rules 1. Inline style (attribute style) 2. Embedded style sheet (internal style) 3. External style sheets

1- 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 =

2- embedded style (internal) style for the whole page Use tag that is written in the head tag. Example: ---

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

3- external css file Use one CSS file for all your pages  It is sheet saves the rules in a separate 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

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 term cascading describes the capability of local style to override the general style.

Selector type 1. Tag 2. class can be applied to any tag 3. advanced

1- Tag selector is to alter the appearance of a specific HTML tag.

Class selector Consists HTML TAGS Example:.footer{ color:… background:… border:… } Classes are applied to more than one elements on a page.

Advanced (IDs and pseudo-classes): An ID is a special type of rule that is unique to a single item on your page. This is typically the case when you use divs, or content boxes that you can position precisely in your document, using CSS rules. a unique ID is created just for that item. Like class styles:  assign IDs arbitrary names, precede it with a pound sign (#) instead of a period when you define them in a style sheet.

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