CSS stands for Cascading Style Sheets . It controls the style
of HTML elements and the layout of HTML documents.
I. Internal CSS style:
Internal CSS is useful for a single document that will have a unique style.
This style is written inside the head element of the document as the following example:
<head>
<style type="text/css">
<!--
body {font-size:12pt; margin:0.5em;color:white;background-image: url("Images/CAT.png");
background-repeat: repeat}
h1,h2,h3 {color:red;font-family:"bookman old style"}
b {color:green}
tr {margin-left: 15px}
. name {text-decoration:underline;bgcolor:#ffccff}
p.name1 {text-align:left; margin-right:2.5em; font-weight: 900}
p.name2 {font-weight:bold}
#name3 {font-family:arial; color:purple}
td#name4 {font-size: 12pt; font-weight: bold; backgroud: #fcf4f4}
input[type="button"] {background-color: green; background-color: rgb(100,20,200 }
table {background-color: transparent}
/* Comment: tr {backgroud: #fcf4f4; margin-left: 50px . px stands for pixels*/
External CSS are stored in style sheets file.css. CSS definitions
will cascade into one for a style of a document. Multiple files.css
can be used for one document or more documents; and one CSS file
can be used for multiple documents.
In the case of styles overlaps, the priority is:
1. Style inside HTML elements (inline Style),
2. Style inside <head> elements (internal Style),
3. Style from css external files (External Style),
4. Default style comming with browswers.
But:
The requested properties that are not in a style will
be taken from its following.
(Example:
All the properties in the above internal style will be
taken into account, plus the property for <hr /> wchich
is present in file.css when the document links to it.)
The CSS general syntax contains: a selector, a property and its
value like this:
selector {property:value}
The value is quotted when it contains plus one word. The properties
inside the selector are separated by semicolons.
We can group multiple selectors to have specific properties with
their values.
A class selector contains any name after a dot (like .name)
defined as a style. It can be used by any element as class property, like this:
<div class = "name">
The division tag groups HTML elements inside a document;
<span class = "name"> whereas span tag group a part of a content inside an HTML element.
</span>
</div>
Different class selector attributes give
different styles for the same type of HTML element. like this:
<p class = "name1">This paragraph or </p>
<p class = "name1 name2">This one</p>
(We have then two paragraphs with different styles).
We can also use the style in this manner:
selector [attribute1 = "value1"] {attribute2:value2}
or:
An id selector like this:
<p id = "name3"> or
<td id = "name4">
The HTML comment element <!-- and --> wrapp the definitions of an internal
SCC style to prevent old browsers that not understand style tags to
display their content.
II. External CSS style:
The HTML document will insert the style sheet file file.css
as follows:
<head>
<link rel="stylesheet" type="text/css" href="file.css" />
</head>
An external style sheet is useful when many pages will use the
same style to be formatted.
Example of file.css:
Css.css
III. Inline style:
It is used in special cases, like this:
<p style="margin-left: 30px; color: blue">
here a special point whom the style is different from the other that
inherite from internal or external SCC style sheet.
</p>
IV. Background:
We can set backgrounds for the elements body, h, p, etc... as follows:
background-color: silver
background-color: transparent
background-color: rgb(150,10,200)
background-color: #ffccff
background-image: url('CAT.png')
background-repeat: repeat
Horizonally:
background-repeat: repeat-x
Vertically:
background-repeat: repeat-y
background-repeat: no-repeat
background-attachment:fixed;
background-position:center;
background-position: 30% 20%;
background-position: 50px 100px;
background: #CFCFCF url('CAT.png') no-repeat fixed center;
V. Text:
text-align: center
text-align: left
text-align: right
text-transform: uppercase
text-transform: lowercase
text-transform: capitalize (transform to capital letters)
text-decoration: overline
text-decoration: line-through
text-decoration: underline
text-decoration: none
text-indent: 1cm
direction: rtl (text: aligned from left)
direction: ltr (text: aligned from right)
word-spacing: 30px
white-space: nowrap
VI. Fonts:
font-family: times
font-family: courier
font-family: sans-serif
font: caption
font-size: 100%
font-style: italic
font-style: normal
font-style: oblique
font-variant: normal
font-variant: small-caps
font-weight: normal
font-weight: bold
font-weight: 900
