css. definition cascading style sheet (css) cascading style sheets (css) is a simple mechanism for...
TRANSCRIPT
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:
<link rel ="stylesheet" type="text / css" href = m.css" />
2 -embedded style sheet
It is placed in the <head> of HTML document using <style> tag.
Rules in an embedded style sheet apply only to the HTML document.
Cont .
1. Written between head tags
1- Using style type tag
<head>
<style type ="text/css"> ---
</style>
</head>
2 -style for the whole page Use <style> tag that is written in the head tag. Example:
<head> <style type = " text /css" >
p { font-size=14 } h1 { font-family=andalus ;color=“0000ff”} </style></head>
<body><p> good day </p><h1> holiday </h1><h1> Friday </h1>
</body>
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:
<p style=“ style code”> the statement </p>
Example cases: <p style=" font-size : 10pt " > good work </p> <p style = " font-family : Andalus " > جميل <p/>اليوم <p style = " font-weight : bold " > good work</p>
Combine tags < p style =" font-size = 20pt ; font-family = Arial ; font-
weight=bold color= 00ff00” > good </p>
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.
advantagedisadvantage
Table layoutEasy to design Works well on older browsers
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
Css layoutLoads 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
More challenging to design May not work on some of the older browsers