Part II. Cascading Style Sheets (CSS) презентация

2.2) Styles in html tags :
You can use a style inside an html tag if you want to by using the style property on that tag. You should try not to do this because it defeats the purpose of CSS but it can be useful in some situations.

Example :
This is a link
to the w3schools Web site.
This
is a link
to the
w3schools
Web site.

2.3) better way to use CSS :
To use a stylesheet you must put a link to the stylesheet file inside your head tags like this:
My first CSS page
Hi
Hello
Omar Al Mukhtar University Faculty of Engineering - Al Beida
Fall Semester
Web Development Course
After that we have to create a file stylesheet.css when we put our styles properties.

Stylesheet.css
body{background:#FF0000;} /* change the background colour */
/* Separating tags with a comma allows you to apply a style to all of those tags */
h1,h2 {color:#FFFF00;font-size:20px;color:orange;text-align:center;}
p{font-family:sans-serif;font-weight:bold;}
/*You can apply a style to a certain tag that is inside another tag by seperating the tags in the stylesheet with spaces.*/
h3 b{color:#0000FF;}

2.4) IDs and classes
We don't have to be restricted to only using styles by the tag name. If we want to make one set of p tags have red text and another set have blue text then we must use the id property. First assign an id to the p tags.
kjkjkljkjkl
In the stylesheet we put the name of the id with a “#” in front of it.
#p1{color:#FF0000;}
#p2{color:#0000FF;}
we are only allowed to use id names in 1 tag. To give the same id to many tags we must use the class property instead.
Classes have a “.” in front of them instead of a “#”.
.abc{text-decoration:underline;}

Example :
<br>h1{text-align:center;color:#0fff0f;}<br>#p1{color:#FF0000;}<br>p {text-align:left;color:yellow;}<br>p.date {text-align:right;color:blue;}<br>p.main {text-align:left;color:red;}<br>
Omar Al Mukhtar University
May, 2009 class=“main”> Faculty of Engineering
Computer Department
Note:
City of Al Beida

CSS3 Borders
With CSS3, you can create rounded borders, add shadow to boxes, and use an image as a border - without using a design program, like Photoshop.
border-radius
box-shadow
border-image

border-radius :
<br>div<br>{<br>border:2px solid #a1a1a1;<br>padding:10px 40px; <br>background:#dddddd;<br>width:300px;<br>border-radius:25px;<br>}<br>
The border-radius property allows you to add rounded corners to elements.