Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS

No description
by

Mohammed Essam

on 6 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS

CSS
Cascading style sheet
Introduction
why CSS ?!
How to write the code ?!
ID & Class
* HTML was intended not for formatting but to define the content of a document, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

* When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.

*To solve this problem, the World Wide Web Consortium (W3C) created CSS.

*In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
*All browsers support CSS today.
*
A CSS declaration always ends with semicolon, and declaration groups are surrounded by curly brackets
Example:
p {color:red;text-align:center;}
It can be written like that to be more readable:
p{
color:red;
text-align:center;
}
*
To write a comment in CSS
/*

This is a comment

*/
Backgrounds
Some of properties we can edit :
Let's do a style for each element :D
Text
Fonts
Links
Tables
* background-color
* background-image

can be specified by :
*HEX value
*RGB value
*color name
Example :
body {background-image:url('paper.gif');}
where body is the element I will edit and
paper is the name of the image.
Yalla ngrab xD
I SAID LEFT ONLY NOT BOTH !!
loading
It's reaction
Don't start an ID name or a class name with a number (id="3hi")
*Simply it is the like ID but specify more than a single element at the same time .
*Its syntax is the same as ID but '#' is replaced with '.'
p.center {text-align:center;}
*We can find text in : paragraphs , heads or links .
*We can change many properties in text as this example .
p
{
text-align:justify;
text-decoration:none;
text-transform:uppercase;
text-indent: 50px;
letter-spacing:3px;
color:blue;
}

The color can be written in color's name or hex values or rgb value as we mentioned before
(or right / left / center)
(or overline / line-through / underline)
(or lowercase / capitalize)
leaves a space before first line.
It leaves spaces between letters.
CSS font properties define the font family, boldness, size, and the style of a text.
p.intro {
font-family:"Times New Roman",Times,serif;
font-style:italic;
font-size:32px; font-size:2em;
}
or
*where 16px=1em and it is the default font size.
*To know more about font-family u can visit this link :
http://www.w3schools.com/cssref css_websafe_fonts.asp
*font-style can take the values normal , italic or oblique .
*Links can be styled the same as text ,, we can edit { color , font-family , background , text-decoration , etc . }
*There are four states of links ,, we can edit each state separately .
Examples :
#one:link {color:#ff0000;}
#one:visited {color:#0000ff;}
#one:hover {color:#ffcc00; font-size:32px;}
TAKE CARE !!
When setting the style for several link states, there are some order rules:
* a:hover MUST come after a:link and a:visited
* a:active MUST come after a:hover
The four link states are :
*Remember the difference between : th , tr , td.
*Notice that the table has double borders. because both the table and the th/td elements have separate borders.
To display a single border for the table, use the
border-collapse
property.
table {
border-collapse:collapse;
width:100%;
}
table,th, td {border: 3px solid blue;}
th{
height:50px;
vertical-align:bottom;
padding:15px;
/*used with td & th */
color:brown;
background-color:yellow;
}
td{
text-align:center;
background-color:white;}
#hi{background-color:orange;}
td
th
Where can we write the code ?!
There are three ways of inserting a style sheet:
*External style sheet
*Internal style sheet
*Inline style

Let's try it
CSS Box Model
p{
border-style:dotted;
border-width: 3px;
border-color:yellow;
}

OR (
dashed
/
solid
/
double
) OR 3D borders as (
groove
/
ridge
/
inset
/
outset
)
*The width is set in pixels, or by using one of the three
pre-defined values:
thin
,
medium
, or
thick
.
*Both "border-width" property or "border-color" property don't work if it is used alone. Use the "border-style" property to set the borders first.
*We can set the border color to "transparent".
*It is possible to specify different borders for different sides:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
}
It can be written in a single property as :
#p1{ border-style:dotted solid;}
Shorthand property:

p{ border:5px solid red; }
What if we replaced border with outline ?!
*A line will be drawn around elements (outside the borders) to make the element "stand out".
*The outline properties specify the style, color, and width of an outline. (same syntax as border)
Padding
*The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
*We edit it by the same way as others .
p{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
Example :
Or using Shorthand property :
p.one{ padding:25px 50px 75px 100px; }
p.two{ padding:25px 50px 75px }
Margin
*It clears an area around an element (outside the border).
*It doesn't have a background color, and is completely transparent.
Note: It is also possible to use negative values, to overlap content.
Possible Values :
auto

: The browser calculates a margin
length
: Specifies a margin in px, pt, cm, etc. Default value is 0px
%
: Specifies a margin in percent of the width of the containing element
inherit
: Specifies that the margin should be inherited from the parent element
Example:
p{ margin-top:100px; margin-bottom:100px; margin-right:50px;
margin-left:50px;}
OR Shorthand property :

p{margin:25px 50px;}
Thank you ^_^
Mohammed Essam
Background Image
Full transcript