CSS NOTES

 CSS:-


html:- (only for designing concept)

JavaScript:- (event handling concept)

CSS:- (page arrangement)

 

 CSS:- (CAS CADING style sheet)


(cas cading style sheet)


1. cas cading:-

- cas cading is process for code sharing approche.

2.style- attributes (height,width,etc.)

3.sheet-file.


- css is collection of attributes (height,width,color,)

- css can not used (<>)tag symbol.

- html attributes is used to (=) operators.

- css attributes is used to (:) operators.

EX.

   html- height="100"

   css- height:100;

   

- all numerical element in css is used to (px) symbol.

  EX.

     height:100px;


- In html file is called page.(about,contact,etc)

- In Css the file is called (sheet).


- types of CSS:-

  

  1-Internal CSS

  2-External CSS

  3-Inline CSS

  4-cross CSS


1) INLINE CSS:-

- inline CSS is directly used with Tag(<>).

-css is representing style attributes.


SYNTEX:-

 <tagname style="attribute">


EX.

  <font style="color:red"> WELCOME </font>


<html>

<body>

<font style="color:red"> WELCOME </font>

 

</body>

</html>


2) DIVISION:-

- division is called cell.

-div is used to create a cell on web browser each cell contain a specific information.

-division is used to create <div>.

-there are following attributes used in <Div>


1)background-color

2)height-

3)width-

4)top-

5)left-

6)position (by default fix)-

  position=absolute (flexible position)


SYNTEX:-


<html>

<body>

<div id="box1" style="background-color:red; height:100px; width:100px; top:1px; left:500px; position:absolute"> WELCOME </div>

 

</body>

</html>


----------------------------------------------------


CSS (CASCADING STYLE SHEET)


1.css is collection of attribute ( colour, height, width)


2.CSS can not used tag symbol<> 

3.CSS only used tag name ( font, B, Center )


TYPES OF CSS:-

there are some types of CSS.

1.internal CSS:- Create inside HTML file.

2.external CSS.:- create outside HTML file.

3.Inline CSS.:- this CSS direct used with Tag.



DIFFERENT BETWEEN HTML ATTRIBUTE AND CSS ATTRIBUTE:-


1.HTML attribute is represting =

  ex. height="100", width="100"

2.CSS attribute is representing :

  ex. height:100, width:100

3.in CSS all numerical value is represent PX

  ex. height:100PX , width:100PX 



CSS REPRESENTETOR:-


CSS IS to be represented (style)


WHAT IS INLINE CSS:-

inline CSS is used inside HTML tags. 


HTML>

<BODY> 


<font style="color:red">welcome</font> 

<BR>

<H1 style="color:red"> welcome </H1>


</BODY>

</HTML>



DIVISION CONCEPTS :- (IMP)


1.Division is provide a concept for creating Cell in computer screen.

2.division is basically used to create a web page in proper format.

3.division is used <div> </div>.


there are following attributes used in <div> </div>

1.background - color 

2.height

3.width

4.top

5.left

6.position


POSITION ATTRIBUTES:-

 position attribute is provide flexibility of <div>.

= by default all div is used to fixed position.

=if user can required flexible div than using position attributes with the value of "absolute".


<div id="box1" style="background-color:yellow; height:100px; width:100px; top:1px; left:1px;"> welcome </div>


<div id="box2" style="background-color:red; height:100px; width:100px; top:500px; left:1px; position:absolute;"> Nagpur </div> 

 

<div id="box3" style="background-color:blue; height:100px; width:100px; top:1px; left:1100px; position:absolute;"> MUMBAI </div>

 



INTERNAL CSS:-imp


1. internal css is used to create inside html page.

2. internal css is to be saved DOT HTML.


 structure of internal CSS.:-


   <HTML>

   <HEAD>

   <STYLE TYPE="TEXT/CSS">


LOGICS======{   } 


   </STYLE>

   </HEAD> 

   <BODY>

   </BODY>

   </HTML>


METHOD OF INTERNAL CSS:- imp


there are two method is used to internal CSS 

1. tag name method

2. class method



1. TAG NAME METHOD:- imp

  tag name method only used name of the Tag.it can not used tag symbol. < >


NOTE:- in tag name menthod can not used similar tag name. 


syntax :-


tagname   

{  


attribute;


}


ex.:=

 

font

{


color:red; 


}


ex.:-


<html>

<head>

<style type="text/css">


font 

{

color:red; 

}



</style>

</head>

<body>

<font> welcome </font>  

<br>

<font> NAGPUR </font> 

<br>

<font> MUMBAI </font> 

</body>

</html>



2. CLASS METHOD:- imp

 

   1. in class method user can create multiple CSS.

   2. all class is to be created using (.) operators


SYNTEX:-


.classname

{

attributes:

}


ex.:- 


<html>

<head>

<style type="text/css">


font 

{

color:red; 

}



</style>

</head>

<body>

<font> welcome </font>  

<br>

<font> NAGPUR </font> 

<br>

<font> MUMBAI </font> 

</body>

</html>



EXTERNAL CSS:-

 

1.in this type of CSS is used to create outside the HTML the page

2.external CSS is to saved .css extention

3.external CSS can not used tag symbol  


.myone

{

color:red;

}


.mytwo

{

color:yellow;

}


.mythree

{

color:blue;

}


NOTE:- 1.CSS FILE CAN NOT EXECUTED 

2.CSS FILE ONLY CONNECT TO HTML PAGE.



HOW TO CONNECT EXTERNAL CSS TO HTML PAGE:-


1.in this concept using <link> 


there are following attributes used in <Link>.


1.href

2.rel

3.type


1]]]]  EXAMPLE NO.1

CSS FILE :-


.myone

{

color:red;

}


.mytwo

{

color:yellow;

}


.mythree

{

color:blue;

}



HTML FILE:-



<html>

<head>


<link href="my.css" rel="stylesheet" type="text/css">



</head>

<body>

<font class="myone">welcome </font>

<br>

<font class="mytwo"> NAGPUR </font>

<br>

<font class="mythree"> MUMBAI </font> 

</body>

</html>



2]]]] EXAMPLE NO.2 

CSS FILE:-


.my1

{

color:red;

}

.my2

{

color:blue;

}

.my3

{

color:yellow;

}

.my4

{

background-color:red; 

height:100px;

width:100px;

top:1px;

left:1px;

}



HTML FILE:-


<HTML>

<HEAD>


<LINK HREF="NEW.CSS" REL="STYLESHEET" TYPE="TEXT/CSS"> 


</HEAD>

<BODY>

<FONT CLASS="MY1">WELCOME </FONT>

<BR>

<FONT CLASS="MY2"> NAGPUR </FONT>

<BR>

<FONT CLASS="MY3"> MUMBAI </FONT>

<br> 

<div class="my4"> PUNE </div> 

</BODY> 

</HTML>


ASSIGMENT:-

 convert all div assignment into external CSS.

 DOUBT POINTS FOR MONDAY  

1] repeat external & internal css 

2] CSS kyu use hota hai    = page arrangement   

3] jaise div mei image add hoti thi yaha nahi add hoti ya fhir word center mei aata tha vaisa word center mei nahi aata 

4] asigment 3 mei checked 



tASK :1 

 developed any CLONE = koi bhi ek website 



 1. externl & internal CSS :-


<html>

<head>

<style ="text/css">


.myone

{

color:red;

}


</style>

</head>

</html> 


2. EXTERNAL CSS:-

 if the css is outside is CSS html then its called external CSS


.MYONE

{

Color:red;

}








Comments

Post a Comment

Popular posts from this blog

flow management:- While loop/*Do while loop/for loop/

 2) flow management:- *While loop:- using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace While {     class Program     {         static void Main(string[] args)         {            int i=1;            while(i<=10)            {             console.WriteLine(i);               }             Console.ReadKey();         }     } } *Do while loop:- -Exit loop  using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace doWhile {     class Program     {         static void Main(string[] args)         {     ...
Read more

C# PROGRAM MANAGEMENT/ 1) condition management

 C# PROGRAM MANAGEMENT:- -there are two types of management  1) condition management 2) flow management 1) condition management:- -if else statement -else if statement -switch case statement 2) flow management:- -while loop -do while loop -for loop -for each loop 1)CONDITION MANAGEMENT:- IF ELSE STATEMENT:- using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; namespace IFELSESTATEMENT {     class Program     {         static void Main(string[] args)         {             int age;             Console.WriteLine("Enter your age");             age = int.Parse(Console.ReadLine());             if (age>18)             {                 Console.WriteLine("vote");   ...
Read more

condition management IF, ELSE, ELSEIF

  condition management:- if-else,else-if, else-otherwise ke jagh pe else = if =condition IF & ELSE:- <html> <head> <script language="JavaScript">  var age;  age=parseInt(prompt ("enter your age"));  if(age>18)  {  document.write("you can vote");  }  else  {  document.write("you can not vote");  }  </script> </head> </html> ELSEIF:- -elseif=multiple condition pe elseif - last mei single else complusory var per;   per=parseInt(prompt("enter your percentage"));   if(per>=60)   {   document.write("A grade");   }   else if(per>50 && per<60)   {   document.write("B grade");   }   else if(per>40 && per<50)   {   document.write("C grade");   }   else   {   document.write("fail");   }
Read more