Overview of CSS
Creating and Using a Simple External CSS File
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<LINK rel="stylesheet" type="text/css" href="example.css"/>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<TABLE>
<TR>
<TH>living being</TH>
<TH>shelter</TH>
</TR>
<TR>
<TD class="code">Lion</TD>
<TD>Lion lives in the den</TD>
</TR>
<TR>
<TD class="code">Man</TD>
<TD>Man lives in house</TD>
</TR>
<TR>
<TD class="code">Fish</TD>
<TD>Fish lives in water</TD>
</TR>
<TR>
<TD class="code">Bird</TD>
<TD>Bird lives in nest</TD>
</TR>
</TABLE>
</BODY>
</HTML>
example.css
/* style sheet for sample.html document */
*{margin: 0;}
body
{
color:#ff0000;
background-color:#ffff00;
font-family: sans-serif;
}
h1{font-size:18pt}
p{font-size:12pt}
table
{
background-color:#efefef;
border-style:solid;
border-width:2px;
border-color:#999900;
}
th
{
background-color:#cccc00;
font-weight:bold;
padding:3px;
}
td{padding:3px}
td.code
{
font-family: serif;
font-weight:bold;
}
universal selector (*)
*{margin:0;}
in the preceding code snippet, the value of margin is set to 0 for all elements present in th HTML document on which CSS applied
colors
#ff0000=red;
#ffff00=yellow;
Using Internal and Inline CSS Styles
Internal: defining the css style using thstyle element
Internal: by using the style attribute in the perticular elemnt.
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<STYLE>
*{margin: 0;}
body
{
color:Red;
background-color:lightgrey;
font-family: sans-serif;
}
h1{font-size:18pt}
p{font-size:12pt}
</STYLE>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<BR/>
<BR/>
<H1 style="color:#ff0000;background-color:#ffff00;font-family: Ariel;">The font size of this heading is 18pt</H1>
<P style="color:yellow; font-size:10pt">The font size of this paragraph is 12pt</P>
</BODY>
</HTML>
Working with querySelector() Method
the querySelector() method selects a specific element from an HTML document and apply a query to these elements.
<!DOCTYPE HTML>
<HEAD>
<TITLE> Working with querySelector </TITLE>
</HEAD>
<BODY>
<H1>Working with querySelector</H1>
<div id="div1" style="padding:50px; width:100px; height:100px; border:1px solid black">
</div>
<P>Move the mouse cursor over the color name</P>
<LABEL id="label1" >Blue</LABEL>--
<LABEL id="label2" >Red</LABEL>--
<LABEL id="label3" >Yellow</LABEL>--
<INPUT id="text">
<script type="text/javascript">
if (document.querySelector)
{
var lbl1=document.querySelector('#label1')
var lbl2=document.querySelector('#label2')
var lbl3=document.querySelector('#label3')
lbl1.onmouseover=function(){
document.querySelector('#text').value="This is Blue color";
document.querySelector('#text').style.color="blue";
document.querySelector('#div1').style.background="blue"
}
lbl2.onmouseover=function(){
document.querySelector('#text').value="This is Red color";
document.querySelector('#text').style.color="red"
document.querySelector('#div1').style.background="red"
}
lbl3.onmouseover=function(){
document.querySelector('#text').value="This is Yellow color";
document.querySelector('#text').style.color="yellow"
document.querySelector('#div1').style.background="yellow"
}
}
</script>
</BODY>
</HTML>
Working with th querySelectorAll() Method
you can use querySelectorAll() method to select all the elements of the HTML document.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Working with the querySelectorAll</TITLE>
</HEAD>
<BODY>
<H1>Working with the querySelectorAll</H1>
<FORM id="myform">
<B>Select your favourite cars:</B> <BR/>
<INPUT name="cars" type="checkbox" value="Ferrari" />Ferrari <BR/>
<INPUT name="cars" type="checkbox" value="Audi" />Audi <BR/>
<INPUT name="cars" type="checkbox" value="BMW" />BMW <BR/>
<INPUT name="cars" type="checkbox" value="Mercedez" />Mercedez<BR/>
<BR />
<INPUT type="submit" />
</FORM>
<SCRIPT type="text/javascript">
if (document.querySelector)
{
document.querySelector('#myform').onsubmit=function()
{
var checkcars=this.querySelectorAll('input[name="cars"]:checked')
document.write("<B>You have selected the following cars: </B><BR/>")
for (var i=0; i<checkcars.length; i++)
{
var value=""
value += checkcars[i].value + "<BR/>"
document.write("<LI>"+value+"</LI>")
}
return false
}
}
</SCRIPT>
</BODY>
</HTML>
Working with @import Rule
the @import rule is usd to import external styleshets in your HTML document.
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<STYLE TYPE="text/css">
@import url("example.css");
P {color:blue}
</STYLE>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<TABLE>
<TR>
<TH>living being</TH>
<TH>shelter</TH>
</TR>
<TR>
<TD class="code">Lion</TD>
<TD>Lion lives in the den</TD>
</TR>
<TR>
<TD class="code">Man</TD>
<TD>Man lives in house</TD>
</TR>
<TR>
<TD class="code">Fish</TD>
<TD>Fish lives in water</TD>
</TR>
<TR>
<TD class="code">Bird</TD>
<TD>Bird lives in nest</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Creating and Using a Simple External CSS File
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<LINK rel="stylesheet" type="text/css" href="example.css"/>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<TABLE>
<TR>
<TH>living being</TH>
<TH>shelter</TH>
</TR>
<TR>
<TD class="code">Lion</TD>
<TD>Lion lives in the den</TD>
</TR>
<TR>
<TD class="code">Man</TD>
<TD>Man lives in house</TD>
</TR>
<TR>
<TD class="code">Fish</TD>
<TD>Fish lives in water</TD>
</TR>
<TR>
<TD class="code">Bird</TD>
<TD>Bird lives in nest</TD>
</TR>
</TABLE>
</BODY>
</HTML>
example.css
/* style sheet for sample.html document */
*{margin: 0;}
body
{
color:#ff0000;
background-color:#ffff00;
font-family: sans-serif;
}
h1{font-size:18pt}
p{font-size:12pt}
table
{
background-color:#efefef;
border-style:solid;
border-width:2px;
border-color:#999900;
}
th
{
background-color:#cccc00;
font-weight:bold;
padding:3px;
}
td{padding:3px}
td.code
{
font-family: serif;
font-weight:bold;
}
universal selector (*)
*{margin:0;}
in the preceding code snippet, the value of margin is set to 0 for all elements present in th HTML document on which CSS applied
colors
#ff0000=red;
#ffff00=yellow;
Using Internal and Inline CSS Styles
Internal: defining the css style using thstyle element
Internal: by using the style attribute in the perticular elemnt.
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<STYLE>
*{margin: 0;}
body
{
color:Red;
background-color:lightgrey;
font-family: sans-serif;
}
h1{font-size:18pt}
p{font-size:12pt}
</STYLE>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<BR/>
<BR/>
<H1 style="color:#ff0000;background-color:#ffff00;font-family: Ariel;">The font size of this heading is 18pt</H1>
<P style="color:yellow; font-size:10pt">The font size of this paragraph is 12pt</P>
</BODY>
</HTML>
Working with querySelector() Method
the querySelector() method selects a specific element from an HTML document and apply a query to these elements.
<!DOCTYPE HTML>
<HEAD>
<TITLE> Working with querySelector </TITLE>
</HEAD>
<BODY>
<H1>Working with querySelector</H1>
<div id="div1" style="padding:50px; width:100px; height:100px; border:1px solid black">
</div>
<P>Move the mouse cursor over the color name</P>
<LABEL id="label1" >Blue</LABEL>--
<LABEL id="label2" >Red</LABEL>--
<LABEL id="label3" >Yellow</LABEL>--
<INPUT id="text">
<script type="text/javascript">
if (document.querySelector)
{
var lbl1=document.querySelector('#label1')
var lbl2=document.querySelector('#label2')
var lbl3=document.querySelector('#label3')
lbl1.onmouseover=function(){
document.querySelector('#text').value="This is Blue color";
document.querySelector('#text').style.color="blue";
document.querySelector('#div1').style.background="blue"
}
lbl2.onmouseover=function(){
document.querySelector('#text').value="This is Red color";
document.querySelector('#text').style.color="red"
document.querySelector('#div1').style.background="red"
}
lbl3.onmouseover=function(){
document.querySelector('#text').value="This is Yellow color";
document.querySelector('#text').style.color="yellow"
document.querySelector('#div1').style.background="yellow"
}
}
</script>
</BODY>
</HTML>
Working with th querySelectorAll() Method
you can use querySelectorAll() method to select all the elements of the HTML document.
<!DOCTYPE HTML>
<HEAD>
<TITLE>Working with the querySelectorAll</TITLE>
</HEAD>
<BODY>
<H1>Working with the querySelectorAll</H1>
<FORM id="myform">
<B>Select your favourite cars:</B> <BR/>
<INPUT name="cars" type="checkbox" value="Ferrari" />Ferrari <BR/>
<INPUT name="cars" type="checkbox" value="Audi" />Audi <BR/>
<INPUT name="cars" type="checkbox" value="BMW" />BMW <BR/>
<INPUT name="cars" type="checkbox" value="Mercedez" />Mercedez<BR/>
<BR />
<INPUT type="submit" />
</FORM>
<SCRIPT type="text/javascript">
if (document.querySelector)
{
document.querySelector('#myform').onsubmit=function()
{
var checkcars=this.querySelectorAll('input[name="cars"]:checked')
document.write("<B>You have selected the following cars: </B><BR/>")
for (var i=0; i<checkcars.length; i++)
{
var value=""
value += checkcars[i].value + "<BR/>"
document.write("<LI>"+value+"</LI>")
}
return false
}
}
</SCRIPT>
</BODY>
</HTML>
Working with @import Rule
the @import rule is usd to import external styleshets in your HTML document.
<!DOCTYPE HTML>
<HEAD>
<TITLE>CSS Example </TITLE>
<STYLE TYPE="text/css">
@import url("example.css");
P {color:blue}
</STYLE>
</HEAD>
<BODY>
<H1>The font size of this heading is 18pt</H1>
<P>The font size of this paragraph is 12pt</P>
<TABLE>
<TR>
<TH>living being</TH>
<TH>shelter</TH>
</TR>
<TR>
<TD class="code">Lion</TD>
<TD>Lion lives in the den</TD>
</TR>
<TR>
<TD class="code">Man</TD>
<TD>Man lives in house</TD>
</TR>
<TR>
<TD class="code">Fish</TD>
<TD>Fish lives in water</TD>
</TR>
<TR>
<TD class="code">Bird</TD>
<TD>Bird lives in nest</TD>
</TR>
</TABLE>
</BODY>
</HTML>