CSS Tutorial
CSS Advanced
CSS3 Tutorial
CSS Responsive
CSS References
CSS tools
CSS Resources
Selected Reading
- CSS - Scrollbars
- CSS - Dimension
- CSS - Outlines
- CSS - Cursors
- CSS - Padding
- CSS - Lists
- CSS - Margins
- CSS - Borders
- CSS - Tables
- CSS - Links
- CSS - Images
- CSS - Text
- CSS - Fonts
- CSS - Backgrounds
- CSS - Colors
- CSS - Measurement Units
- CSS - Inclusion
- CSS - Syntax
- CSS - Introduction
- CSS - Home
CSS Advanced
- CSS - Validations
- CSS - Layouts
- CSS - Printing
- CSS - Aural Media
- CSS - Paged Media
- CSS - Media Types
- CSS - Text Effects
- CSS - @ Rules
- CSS - Pseudo Elements
- CSS - Pseudo Classes
- CSS - Layers
- CSS - Positioning
- CSS - Visibility
CSS3 Tutorial
- CSS3 - Box Sizing
- CSS3 - User Interface
- CSS3 - Multi columns
- CSS3 - Animation
- CSS3 - 3d transform
- CSS3 - 2d transform
- CSS3 - Web font
- CSS3 - Text
- CSS3 - Shadow
- CSS3 - Gradients
- CSS3 - Color
- CSS3 - Multi Background
- CSS3 - Border Images
- CSS3 - Rounded Corner
- CSS3 - Tutorial
CSS Responsive
CSS References
- CSS - Animation
- CSS - Units
- CSS - Web safe fonts
- CSS - Web browser References
- CSS - Color References
- CSS - References
- CSS - Quick Guide
- CSS - Questions and Answers
CSS tools
CSS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS - Responsive Web Design
CSS - Responsive
CSS3 Responsive Web Design
Responsive web design provides an optimal experience, easy reading and easy navigation with a minimum of resizing on different devices such as desktops, mobiles and tabs).
Responsive structure
Below image shows the responsive structure of web pages.
Flexible Grid demo
<html>
<head>
<style>
body {
font: 600 14px/24px "Open Sans",
"HelveticaNeue-Light",
"Helvetica Neue Light",
"Helvetica Neue",
Helvetica, Arial,
"Lucida Grande",
Sans-Serif;
}
h1 {
color: #9799a7;
font-size: 14px;
font-weight: bold;
margin-bottom: 6px;
}
.container:before, .container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
.container {
background: #eaeaed;
margin-bottom: 24px;
*zoom: 1;
}
.container-75 {
width: 75%;
}
.container-50 {
margin-bottom: 0;
width: 50%;
}
.container, section, aside {
border-radius: 6px;
}
section, aside {
background: #2db34a;
color: #fff;
margin: 1.858736059%;
padding: 20px 0;
text-apgn: center;
}
section {
float: left;
width: 63.197026%;
}
aside {
float: right;
width: 29.3680297%;
}
</style>
</head>
<body>
<h1>100% Wide Container</h1>
<span class = "container">
<section>Section</section>
<aside>Aside</aside>
</span>
<h1>75% Wide Container</h1>
<span class = "container container-75">
<section>Section</section>
<aside>Aside</aside>
</span>
<h1>50% Wide Container</h1>
<span class = "container container-50">
<section>Section</section>
<aside>Aside</aside>
</span>
</body>
</html>
It will produce the following result −
Media queries
Media queries is for different style rules for different size devices such as mobiles, desktops, etc.,
<html>
<head>
<style>
body {
background-color: pghtpink;
}
@media screen and (max-width: 420px) {
body {
background-color: pghtblue;
}
}
</style>
</head>
<body>
<p>
If screen size is less than 420px, then it will show pghtblue
color, or else it will show pght pink color
</p>
</body>
</html>
It will produce the following result −
Bootstrap responsive web design
Bootstrap is most popular web design framework based on HTML,CSS and Java script and it helps you to design web pages in responsive way for all devices.
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<pnk rel = "stylesheet"
href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
color:green;
}
</style>
</head>
<body>
<span class = "container">
<span class = "jumbotron">
<h1>Tutorials point</h1>
<p>
Tutorials Point originated from the idea that there exists a class
of readers who respond better to onpne content and prefer to learn
new skills at their own pace from the comforts of their drawing rooms.
</p>
</span>
<span class = "row">
<span class = "col-md-4">
<h2>Android</h2>
<p>
Android is an open source and Linux-based operating system for mobile
devices such as smartphones and tablet computers. Android was developed
by the Open Handset Alpance, led by Google, and other companies.
</p>
</span>
<span class = "col-md-4">
<h2>CSS</h2>
<p>
Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simppfy the process of making web pages presentable.
</p>
</span>
<span class = "col-md-4">
<h2>Java</h2>
<p>
Java is a high-level programming language originally developed by Sun
Microsystems and released in 1995. Java runs on a variety of platforms,
such as Windows, Mac OS, and the various versions of UNIX. This tutorial
gives a complete understanding of Java.
</p>
</span>
</span>
</body>
</html>
It will produce the following result −
Advertisements