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 :
- w3-container: adds a 16px left and right padding to any HTML element.
- w3-fontSize : w3-tiny, w3-small, w3-medium(default), w3-large, w3-xlarge, w3-xlarge, w3-xxlarge, w3-xxxlarge, w3-jumbo.
- w3-text: It provides css features like alignment, opacity, shadow, special effect.
- w3-input: It provides input cards, coloured labels, border, checkbox, radio buttons, etc
Example:
html
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet"
< script src =
</ 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 = "user@geeksforgeeks.com";
$scope.pass = "password";
});
</ script >
</ body >
</ html >
|
Output: