css

Download Report

Transcript css 

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:
selector
<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>
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>
Or =

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 ; fontweight=bold color= 00ff00” > good </p>
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.
Table
Css
layout
layout
advantage
disadvantage
Easy
to design
Works well on older browsers
Loads
Loads
More
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
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
challenging to design
May not work on some of the older browsers