css1
DESCRIPTION
CSS - Cascading Style Sheets BasicsTRANSCRIPT
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.
INTERNAL CSS
<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;}
S t y l i n g L I n k s
<a href=“http://www.google.com”>Google</a>
a:link {color:blue;} /* unvisited link */a:visited {color:red;} /* visited link */a:hover {color:yellow;} /* mouse over link */a:active {color:orange;} /* 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> TagThe <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 PositioningThe 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 Positioning2. Relative Positioning3. Absolute Positioning
Fixed PositioningAn 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 PositioningA 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 PositioningAn 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;
}