Css1

CSS
CSS defines HOW HTML elements are to be displayed.

INTRODUCTION
CSS Stands for Cascading Style Sheets
It is used for Designing Stylized Websites
All the css files are saved with the file
extension .css
CSS was introduced together with HTML 4,
to provide a better way to style HTML
elements.

Three Types of CSS:
1. Inline CSS - using the style attribute in

HTML elements.
2. Internal CSS - using the <style></style>

tag in the <head> section.
3. External CSS - using an external CSS file.

<html>
<head>
<style>
h2
{
color:blue;
font-size:50px;
}
</style>
</head>
</html>

EXTERNAL CSS
In external CSS, we write CSS codes in a separate
file and include that CSS file with the HTML file.
We include CSS file in the HTML file by writing the
following line in the head section of html:

<link type=“text/css” rel=“stylesheet”
href=“style.css” >

INLINE CSS
Example:
<p style=“ color:red; ”>Welcome !</p>
<h2 style=“ color:blue; font-size:50px;
”>The is a Heading !</h2>

Text Color : body {color:blue;}

Text Alignment : h1 {text-align:center;}
Text Decoration:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
Font Family : p{font-family:"Times New Roman”;}
Font Size : h1 {font-size:40px;}
Background Color : body {background-color:green;}

Styling

LInks

<a href=“http://www.google.com”>Google</a>

a:link {color:blue;}
a:visited {color:red;}
a:hover {color:yellow;}
a:active {color:orange;}

/* unvisited link */
/* visited link */
/* mouse over link */
/* selected link */

You can add other properties also other than
color.

CSS ’id’ and ’class’
(V imp.)
If we have more than two paragraphs, to add
different colors to these paragraphs we can
use tha concept of ‘class’ and ‘id’.
Example:
<p��id=“gud”>Good</p>
<p id=“hello”>Morning</p>
#gud
{
color:yellow;
}

#hello
{
color:red;
}

The id Selector
The id selector is used to specify a style for
a single, unique element.
The id selector uses the id attribute of the
HTML element, and is defined with a "#".

The class Selector
The class selector is used to specify a style for a
group of elements. Unlike the id selector, the
class selector is most often used on several
elements.
This allows you to set a particular style for many
HTML elements with the same class.
The class selector uses the HTML class attribute,
and is defined with a "."
In the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-align:center;}

<div> Tag
The <div> tag defines a division or a section in an HTML
document.
The <div> tag is used to group block-elements to format them
with CSS.
The div tag is used to specify a section within an HTML
document. Anything from text to images to videos can be
placed within a div. Divs are similar to tables but they are
easier to use, customizable with CSS, and load faster than
tables.

< div >< img src="”header.jpg”" alt="" />< /div>
Since you may have more than one image you might
code:
< div >< img src="”image1.jpg”" alt="" /> < /div>

CSS Positioning
The CSS positioning properties allow you to position an
element. It can also place an element behind another, and
specify what should happen when an element's content is too
big.
1. Fixed Positioning
2. Relative Positioning
3. Absolute Positioning

Fixed Positioning
An element with fixed position is positioned relative to
the browser window.
It will not move even if the window is scrolled:
p
{
position:fixed;
top:30px;
right:5px;
}

Relative Positioning
A relative positioned element is positioned relative to
its normal position.
h1
{
position:relative;
left:-20px;
color:red;
}
h2
{
position:relative;
left:20px;
color:green;
}

Absolute Positioning
An absolute position element is positioned relative to
the first parent element that has a position other than
static.
h2
{
position:absolute;
left:100px;
top:150px;
}

Css1

Related slideshows

More Related Content

Css1