CSS

                    

BOX MODEL IN CSS

FILE: tut20boxmoc.html

RUN THIS 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>Box model</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0px;
            border-radius: 150px;
        }
        body{
            background-color: rgb(101, 229, 229);
        }
          .container{
            /* we can set margin/padding for left, right,bottom,and top like this:
            padding-top: 20px;
            padding-bottom: 20px;
            padding-left: 40px;
            padding-right: 40px; */


            /* padding: 23px 46px 6px 78px; */
            /* padding= top right bottom left */
            /* padding:y(top/bottom) x(left/right) */
            /* margin and padding both  have some similar properties */


            border: 2px solid rgb(235, 31, 235);
            background-color: rgb(234, 238, 172);
            padding: 34px 19px;
            margin: 14px 19px;   /*in x-axis auto margin se direct center ho jata hi*/
            /* margin: 14px auto; */
            /* margin-top: 15px; */
            /* margin-bottom: 15px; */
            width: 535px;

            /* border-radius: 25px; */
            /* box-sizing: border-box; */
        }


           

    </style>
</head>
<body>
    <div class="container">
        <h3>This is my first heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum unde nisi expedita architecto. Debitis sapiente aliquam quod dolore, libero harum accusamus modi facilis dignissimos perspiciatis est, tempore repellat! Cumque mollitia voluptate quidem quia corrupti vero, necessitatibus tempore aliquid! Maxime, officia?</p>
    </div>
    <div class="container">
        <h3>This is my second heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum unde nisi expedita architecto. Debitis sapiente aliquam quod dolore, libero harum accusamus modi facilis dignissimos perspiciatis est, tempore repellat! Cumque mollitia voluptate quidem quia corrupti vero, necessitatibus tempore aliquid! Maxime, officia?</p>
    </div>
    <div class="container">
        <h3>This is my third heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum unde nisi expedita architecto. Debitis sapiente aliquam quod dolore, libero harum accusamus modi facilis dignissimos perspiciatis est, tempore repellat! Cumque mollitia voluptate quidem quia corrupti vero, necessitatibus tempore aliquid! Maxime, officia?</p>
    </div>
    <div class="container">
        <h3>This is my fourth heading</h3>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum unde nisi expedita architecto. Debitis sapiente aliquam quod dolore, libero harum accusamus modi facilis dignissimos perspiciatis est, tempore repellat! Cumque mollitia voluptate quidem quia corrupti vero, necessitatibus tempore aliquid! Maxime, officia?</p>
    </div>
   
</body>
</html> 
   

FONTS IN CSS

RUN THIS 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>CSS fonts</title>
    <style>
        p{
            font-family: cursive;
             font-size: 53px;/* 1/96th of an inch, Line height; space between two fonts,*/
             line-height: 1.3em;
             font-weight: 200;
        }
        span{
            font-weight: bold;
            font-style: unset;
        }
    </style>
</head>
<body>
    <h4>CSS FONTS</h4>
    <p>Lets play with <span>fonts</span>. It is very exciting:</p>
    <a href="CSS FONTS STACK LIST">FOR WEB FONTS</a>
   
</body>
</html>

                                  


                                      

 

Comments

Post a Comment

Popular posts from this blog

Knapasack

 # include<stdio.h>   void knapsack(int n, float weight[], float profit[], float capacity) {    float x[20], tp = 0;    int i, j, u;    u = capacity;      for (i = 0; i < n; i++)       x[i] = 0.0;      for (i = 0; i < n; i++) {       if (weight[i] > u)          break;       else {          x[i] = 1.0;          tp = tp + profit[i];          u = u - weight[i];       }    }      if (i < n)       x[i] = u / weight[i];      tp = tp + (x[i] * profit[i]);      printf("\nThe result vector is:- ");    for (i = 0; i < n; i++)       printf("%f\t", x[i]);      printf("\nMaximum profit is:- %f", tp);   }   int main() {    float weight[20], profit[20], capacity;    int num, i, j;    float ratio[20], temp;      printf("\nEnter the no. of objects:- ");    scanf("%d", &num);      printf("\nEnter the wts and profits of each object:- ");    for (i = 0; i < num; i++) {       scanf("%f %f", &weight[i], &am
Read more
Image
    👉 What is an Array? In JavaScript, an array is a versatile data structure used to store multiple values in a single variable.  It allows you to group related data together and perform various operations on them. To create an array, you can use square brackets and separate the values with commas: let myArray = [ value1 , value2 , value3 ]; Arrays can store any type of data, including numbers, strings, objects, and even other arrays. The elements in an array are accessed using their index, which starts from 0 for the first element: let firstElement = myArray[ 0 ]; // Accessing the first element   Arrays have several built-in methods that enable powerful data manipulation. Some commonly used methods include: push : Adds elements to the end of an array. pop : Removes the last element from an array. length : Returns the number of elements in an array. indexOf : Returns the index of a specified element in an array. Here's an example showcasing these methods:  let fruits = [ &q
Read more

Data types & Operators

Image
  Data types Number : Used to represent a number such as 1, 3.14, or -10. String : "Hello world!" This is used to represent text in a sentence or two, such as "JavaScript". Boolean : Represents true or false. used in functions and conditions. Null : Indicates that no value was created intentionally. Undefined : Indicates a variable that has been declared but not yet assigned a value. Object : A complex data type that can contain many values ​​and objects. Objects can be created using curly braces {}. Operators Operators, on the other hand, are symbols or elements used to control values ​​and variables. JavaScript provides many operators, including: 1.Arithmetic operators:  addition (+), subtraction (-), equals (*), division (/), etc. It is used for basic mathematic calculations. 2.Assignment Operators:  It is  used to assign values to variables like the equal sign (=) or +=, -= , *= etc.  3.Comparison operators:  equal (==), not equal (!=), greater than (>), less
Read more

If else condition

Image
  Mastering JavaScript: Unleashing the Power of If-Else Conditions for Web Development: In JavaScript, an if-else statement allows you to make decisions and execute different blocks of code based on a condition. It follows a simple structure: if ( condition ) {   // Code to execute if the condition is true } else {   // Code to execute if the condition is false } The condition is a logical expression that evaluates to either true or false. If the condition is true, the code within the first block will run. Otherwise, the code within the else block will execute. If you have multiple conditions to check, you can use else-if statements:         if ( condition1 ) {   // Code to execute if condition1 is true } else if ( condition2 ) {   // Code to execute if condition1 is false and condition2 is true } else {   // Code to execute if both condition1 and condition2 are false } By utilizing if-else statements and conditions, you can create dynamic and responsive JavaScript code that perf
Read more

COMPLETE WEB DEVELOPMENT BOOTCAMP:practice.html

practice.html <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Animation </ title >     < style >         * {             margin : 0% ;             padding : 0% ;             /* background-color: blue; */             height : 100% ;             width : 100% ;         }         .container {             display : flex ;             background-color : rgb ( 255 , 157 , 0 );           /* height:100%;          width: 100%; */         }         .box {             display : flex ;             height : 50px ;             width : 50px ;             border-radius : 50% ;             background-color : rgb ( 238 , 255 , 0 );             text-align : center ;             align-items : center ;             justify-content : center ;                     }         #box1 {            
Read more