Css starting

What is Css ?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 Styles are normally stored in Style Sheets

 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save you a lot of work
 External Style Sheets are stored in CSS files
 Multiple style definitions will cascade into one

Basic Syntax
 The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}
 The property and value are separated by a colon, and surrounded by curly braces:
body {color: black}
 more than one property, you must separate each property with a semicolon.
p {text-align:center;color:red}
For more readable format syntax like
p
{
text-align: center;
color: black;
font-family: arial
}

Basic Syntax…
 Grouping : You can group selectors. Separate each selector with a comma.

Example : h1,h2,h3,h4,h5,h6
{ color: green }
 The class Selector : With the class selector you can define different styles for the
same
type of HTML element.

How to Insert a Style Sheet
 When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:

 (1) External Style Sheet

 (2) Internal Style Sheet
 (3) Multiple Style Sheets

External Style Sheet
 An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing
one file. Each page must link to the style sheet using the <link> tag. The <link> tag
goes inside the head section:

Internal Style Sheet
 An internal style sheet should be used when a single document has a unique style.
You define internal styles in the head section by using the <style> tag, like this:

Multiple Style Sheets
 If some properties have been set for the same selector in different style sheets, the
values will be inherited from the more specific style sheet.

Background Image, Color…
Color :

Bgimage :

<head>
<style type="text/css">
body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}
</style>

<head>

</head>

body
{
background-image:
url('bgdesert.jpg')
}
</style>

<body>

</head>

<h1>This is header 1</h1>
<p>This is a paragraph</p>

<body>
</body>

</body>

Text Style
(1)Color:
<html>
<head>
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>

(2) Alignment:
<html>
<head>
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>

(3) Control text:
<html>
<head>
p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}
p.capitalize {text-transform: capitalize}
</style>
</head>
<body>
<p class="uppercase">This is Text</p>

<body>
<body>
<h1>This is header 1</h1> <h2>This is header 2</h2> <p class="lowercase">This is Text</p>
<h2>This is header 2</h2> <h3>This is header 3</h3>
<p class="capitalize">This is Text</p>
<p>This is a paragraph</p> </body>
</body>
</body>
</html>
</html>
</html>

Font Style
(1)Font Family :
<html>
<head>
h3 {font-family: times}
p {font-family: courier}
p.sansserif {font-family: sans-serif}
</style>
</head>
<body>
<p class="sansserif">This is a
paragraph</p>
</body>
</html>

(2) Font property one Declaration

<html>
<head>
p
{
font: italic small-caps 900 12px arial
}
</style>
</head>
<body>
</body>
</html>

Border Style
(1) Simple Border

(2) Borders on each side

<html>
<head>
p
{
border: medium double rgb(250,0,255)
}
</style>
</head>

<html>
<head>
p.soliddouble {border-style: solid double}
p.doublesolid {border-style: double solid}
p.groovedouble {border-style: groove double}
p.three {border-style: solid double groove}
</style>
</head>

<body>
<p>Some text</p>
</body>

<body>
<p class="soliddouble">Some text</p>
<p class="doublesolid">Some text</p>
<p class="groovedouble">Some text</p>
<p class="three">Some text</p>
</body>
</html>

</html>

Margin Style
(1) Simple Margin
<html>
<head>
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>This is a paragraph with no specified
margins</p>
<p class="margin">This is a paragraph with
specified margins</p>
<p>This is a paragraph with no specified
margins</p>
</body>
</html>

Padding Style
(1) Simple Padding
<html>
<head>
td {padding-top: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td>
This is a tablecell with a top padding
</td>
</tr>
</table>
</body>
</html>

List Style
<html>
<head>
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
</style>
</head>
<body>
<ul class="disc">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>

<ul class="circle">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="square">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
For Ordered List
</ul>
<ul class="none">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

ol.decimal {list-style-type: decimal}
ol.lroman {list-style-type: lower-roman}
ol.uroman {list-style-type: upper-roman}
ol.lalpha {list-style-type: lower-alpha}
ol.ualpha {list-style-type: upper-alpha}
</style>

Css starting

More Related Content

What's hot (20)

Viewers also liked (6)

Similar to Css starting (20)

Recently uploaded (20)

Css starting