Skip to main content

How to start learning Web-development

Post a Comment

Tutorial 5 css color , border etc

Css components with explanation - 

NOTE - for more about this go to our youtube channel link
1. Color in css -
it is predefined value in css where we set color through name, RGB code  etc you can change color in border , background , font color etc 

syntax -

color: red;

code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>color in css</title>
<style>
.color1{
color: red;
}
.color2{
background-color: blue;
}
.color3{
border: 2px solid red;
}
</style>
</head>
<body>
<!-- lets take paragarph -->
<p class="color1">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
</p>
<p class="color2">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
</p>
<p class="color3">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.
</p>
</body>
</html>

Live server -

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eos, ex obcaecati. Culpa nulla molestias consectetur maiores quia atque quas aliquid, quaerat quis. Culpa consequatur blanditiis aut dignissimos facere. Suscipit, non.


2. Border property in css -
In this property you make a border on the element with the help of specify width heigth.

Syntax -

border : 2px solid red ;

border-radius : the meaning is it make curve on the edges.

code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Border property </title>
<style>
/* Border property */
.container1{
border: 2px solid black;
}
.container2{
border: 2px solid black;
border-radius: 23px;

}
.container3{
/* we can do this with bottom and right and left */
border-top: 2px solid red ;
}
</style>
</head>
<body>
<p class="container1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
<p class="container2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
<p class="container3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.</p>
</body>
</html>

Online server -

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Excepturi, necessitatibus? Libero rerum illo autem culpa. Doloribus eveniet reprehenderit autem iure quidem nesciunt id, provident dignissimos est voluptate. Vel, eius maiores.

Comments

Post a Comment

Popular posts from this blog

Funcation in c++ programming example in detail

Friend Funcation- 1. Adding to complex number in friend function #include<iostream> using namespace std; class container { float a,b; public: void get() { cout<<endl<<"Enter value for A="; cin>>a; cout<<endl<<"Enter value for B="; cin>>b; } void disp() { cout<<endl<<a; cout<<endl<<b; } friend container addition(container,container); }; container addition(container X,container y) { container Z; Z.a=X.a+y.a; Z.b=X.b+y.b; return Z; } int main() { container P,Q,R; P.get(); P.disp(); Q.get(); Q.disp(); R=addition(P,Q); R.disp(); return 0; } Output - Enter value for A=12 Enter value for B=12 12 12 Enter value for A=1 Enter value for B=1 1 1 13 13 2.  If class one is friend function of two it not means that two is friend functio...
1 comment
Read more

Tutorial 13 Visibility property

 Properties of css - 1. Visibility property in css -     In this property element will can visible or hidden by using this property so let say we take a paragarph tag and write some content on it if we use visibility property so we can hide the element but the space of element in web page are left there and no other element take that space so this is it  syntax -   visibility :  visible ;     visibility :hidden ; Code - <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Visiblity in css </title> <style> /* visibility property */ .visible{ visibility: visible; } .hidden{ visibility: hidden; } </style> </head> <body> <h1...
Post a Comment
Read more

C++ programming tutorial 3

 Control statement in c++ programming - 1. For loop statement in c++ programming -  In this loops we run a single part of code many times this used for simple our programming and in less code , time work done is same . Syntax - for(int i =0; i< x ; i++){ ..... } Code -  // For loop in c++ language  #include <iostream> using   namespace  std; int   main () {      int   i  ,  a ;      cout << "Loop was start Below " << endl ;      cout << "Enter the value of a:" << endl ;      cin >> a ;      for ( i = 0 ; i <= a ; i ++ )     {          cout <<   "this is a number count :" <<   i << endl ;     }  ...
Post a Comment
Read more