Open In App

AngularJS and W3.CSS

Last Updated : 01 Jun, 2022
Comments
Improve
Suggest changes
Like Article
Like
Report

What is W3.CSS?

  • W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS framework.
  • Its aim is to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and Desktop
  • W3.CSS was designed to be a high quality alternative to Bootstrap and is developed by w3school.com

What is angularJS?

  • AngularJS is a structural framework for dynamic web apps which extends HTML with new attributes.
  • It provides automated testing and is perfect for single page application
  • It gives application a clean structure and lot of reusable code.

Most important part of W3.CSS :

  1. w3-container: adds a 16px left and right padding to any HTML element.
  2. w3-fontSize : w3-tiny, w3-small, w3-medium(default), w3-large, w3-xlarge, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.
  3. w3-text: It provides css features like alignment, opacity, shadow, special effect.
  4. w3-input: It provides input cards, coloured labels, border, checkbox, radio buttons, etc

Example:

html 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" 
          href="https://www.w3schools.com/w3css/4/w3.css">
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
    </script>
    <style>

    .pad {
        margin: 0 0 0 0;
    }
    </style>

</head>

<body ng-app="myApp" ng-controller="myCtrl">

    <div class="w3-container ">
    
    <p class="w3-jumbo w3-text-green pad" 
       align="center">GeeksforGeeks</p>


   
    <p class="w3-large w3-text-green pad" 
       align="center" >
     A computer science portal for geeks</p>


    <form>
    
        <h3 align="center" > Enter user details </h3>
    
        <label>First Name:</label>
        <input class="w3-input w3-border w3-round-xxlarge" 
               type="text" 
               ng-model="fname"  
               placeholder="First Name"></br>
    
        <label>Last Name:</label>
        <input class="w3-input w3-border  w3-round-xxlarge"
               type="text" 
               ng-model="lname"  
               placeholder="Last Name"></br>
    
        <label>Email id:</label>
        <input class="w3-input w3-border  w3-round-xxlarge"
               type="email"
               ng-model="mail" 
               placeholder="Email id"></br>
    
        <label>Password:</label>
        <input class="w3-input w3-border  w3-round-xxlarge"
               type="password" 
               ng-model="pass"  
               placeholder="Password"></br>
    
        <p align="center"> 
        <button class="w3-btn w3-green w3-ripple " >
              Save </button></p>



    </form>

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope) {
              $scope.fname = "Fname";
              $scope.lname = "Lname";
              $scope.mail = "[email protected]";
              $scope.pass = "password";
        });
    </script>
</body>
</html>

Output:

GeeksforGeeks login page

A
abhishekkharmale
Improve
Article Tags :

Explore

Lightbox