Signup as a Tutor

As a tutor you can connect with more than a million students and grow your network.

CSS

CSS

Trending Questions and Lessons

Follow 4,075 Followers

Ask a Question

Feed

All

All

Lessons

Discussion

Lesson Posted on 28/07/2017 IT Courses/HTML IT Courses/CSS

Website Designing: HTML CSS

ATI - Training Institute

We have a vision to train a lot of students such that it adds value to their education and life and help them grow.

HTML: Hyper Text Markup Language. CSS: Cascadding Style Sheet: Display Property. In web designing: CSS concept display property concept is used for any block design. Display property have two properties: 1) Display: Inline-block. Give div class to display: Inline-block; means it contains width... read more

HTML: Hyper Text Markup Language. 

CSS: Cascadding Style Sheet: Display Property.

In web designing: CSS concept display property concept is used for any block design.

Display property have two properties:

1) Display: Inline-block.

Give div class to display: Inline-block; means it contains width accoding to contents.

2) Display: Block

Give div class to display: Block; means it contains width 100% - full width.

read less
Comments
Dislike Bookmark

Lesson Posted on 05/04/2017 IT Courses/CSS IT Courses/HTML Tuition/BSc Tuition +1 Tuition/BCA Tuition less

CSS awesome tips

Partha Roy

By profession I am a software engineer now and I had previous experience in teaching. I have been in...

CSS - Cascading Style Sheet is used to beautify Web pages and there are some common things which are very basic yet conceptual and very important for development. So here are some of the important tips about CSS, Class vs ID : Class is denoted by starting with dot ( '.' ) and ID by ( '#' ) in JS... read more

CSS - Cascading Style Sheet is used to beautify Web pages and there are some common things which are very basic yet conceptual and very important for development.

So here are some of the important tips about CSS, 

  • Class vs ID : Class is denoted by starting with dot ( '.' ) and ID by ( '#' ) in JS . Main Difference between these two is - Class is a reusable property and used for design purposes.While Idwhile Id is to be used only once, mainly It is used as a unique identifier for any html elemnet.
  • !important : This is used when you want to overrite a style's property. !important has the most priority. It is advisable to not to use it.
  • em vs px : em is a scalable unit which referes to the current font size as an unit, px is a fixed size measurement unit.
  • calc() : Use this function for viewport size related classes.
  • reset.css : It resets all fundamental styles.
  • Position : absolute position refers to an elements position according to the object that is within which has been given the style relative.

read less
Comments
Dislike Bookmark

Lesson Posted on 30/03/2017 IT Courses/HTML IT Courses/CSS IT Courses/Web Designing

HTML Style Attribute

Rahul Dekar

Publication of 4 International Journals "Peer to Peer Secure Communication in Mobile Environment: A...

Setting the style of an HTML element, can be done with the style attribute. <tagname style="property:value;"> Ex - HTML Background Color The background-color property defines the background color for an HTML element. This example sets the background color for a page to light grey: <html> <head><title>HTML... read more

Setting the style of an HTML element, can be done with the style attribute.

<tagname style="property:value;">
 
Ex -
 

HTML Background Color

The background-color property defines the background color for an HTML element.

This example sets the background color for a page to light grey:

<html>

<head><title>HTML Style Attribute</title></head>

<body style="background-color:lightgrey;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

</html>

read less
Comments
Dislike Bookmark

Looking for CSS Training

Find best CSS Training in your locality on UrbanPro.

FIND NOW

Lesson Posted on 23/01/2017 IT Courses/CSS IT Courses/HTML

Add shadows to boxes with HTML 5.0 and CSS 3.0

Akshay Khobragade

I have a sound knowledge of HTML5, CSS3 and BOOTSTRAP which are the basics and most fundamental languages...

1) Hi! lets learn how to drop shadows for the boxes. First let's create a simple box in html <!doctype html><html><div>Hi this is a box</div></html> 2) Now lets give it a width, height and background-color to style a box. So in our CSS code div{ width:300px; height:200px;... read more

1) Hi! lets learn how to drop shadows for the boxes. First let's create a simple box in html

<!doctype html>
<html>
<div>Hi this is a box</div>
</html>

2) Now lets give it a width, height and background-color to style a box. So in our CSS code

div{
width:300px;
height:200px;
background:#b56969;
}

3) Now we have a box, lets try adding a shadow to it, so in our css div code add-

div{
width:300px;
height:200px;
background:#b56969;
box-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

4) It will cast a shadow for the box, lets discuss the box-shadow property. It needs minimum 4 parameters, x-axis-value, y-axis value, density of shadow, color.

i.e --> box-shadow:x-axis-value y-axis-value density color;

5) But there is a catch, for different brosers we have to add prefix in box-shadow property.

i) For chrome --> -webkit-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
ii) For mozilla --> -moz-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
iii) For IE --> -ms-box-shadow:2px 2px 1px rgba(0,0,0,0.5);
iv) For Opera --> -o-box-shadow:2px 2px 1px rgba(0,0,0,0.5);

that's it, below is the full code for box shadows,

a) HTML code

<!doctype html>
<html>
<div>Hi this is a box</div>
</html>

b) CSS code

div{
width:300px;
height:200px;
background:#b56969;
box-shadow:2px 2px 1px rgba(0,0,0,0.5);
}

thats it play with the above code for awesome box shadows

read less
Comments
Dislike Bookmark

Lesson Posted on 20/01/2017 IT Courses/CSS IT Courses/HTML

Awesome HTML and CSS hover button with transition effects

Akshay Khobragade

I have a sound knowledge of HTML5, CSS3 and BOOTSTRAP which are the basics and most fundamental languages...

Hello all today we will learn to make an awesome and easy button hover and transition effect. 1) Lets make a basic html button. Click me 2) We have created a basic html 5.0 button, lets style it up with CSS, in ur css file - button { padding:5px 10px 5px 10px; //comment - padding given is always... read more

Hello all today we will learn to make an awesome and easy button hover and transition effect.

1) Lets make a basic html button.



2) We have created a basic html 5.0 button, lets style it up with CSS, in ur css file -

button {
padding:5px 10px 5px 10px;
//comment - padding given is always clockwise padding: top right bottom left
//comment - lets add another features of css
border: 1px solid darkgreen;
background-color:darkgreen;
color:#ffffff; //comment - #ffffff stands for white color in hexadecimal
}

3) Now the important part, lets add the hover pseudo class for button

button:hover{
padding:5px 20px 5px 20px;
//comment - increase the right and left padding for our button
}

4)Now we the padding changes of the button when we hover over the mouse to the button, but the effect is instant. Lets try to add smmothness to that process by adding transition

button {
padding:5px 10px 5px 10px;
border: 1px solid darkgreen;
background-color:darkgreen;
color:#ffffff;
transition:all 0.5s ease; //comment - the transition time is 0.5 seconds, i.e when we hover over the mouse to the button, in 0.5 seconds the padding will increase from 10px to 20px.
}

5) So thats it, you have created an awesome hoverover button. Below is the full code

i) HTML 5.0 code -


ii) CSS 3.0 code -
button {
padding:5px 10px 5px 10px;
border: 1px solid darkgreen;
background-color:darkgreen;
color:#ffffff;
transition:all 0.5s ease;
}

button:hover{
padding:5px 20px 5px 20px;
}

---thank you---

 

read less
Comments
Dislike Bookmark

Lesson Posted on 29/12/2016 IT Courses/HTML IT Courses/CSS

Awesome rotating Image on hover | HTML5, CSS3

Akshay Khobragade

I have a sound knowledge of HTML5, CSS3 and BOOTSTRAP which are the basics and most fundamental languages...

Hello everyone let's see how to make an awesome rotating image on hover with HTML 5.0 and CSS 3.0. STEP 1: In HTML code put an image with the HTML tag STEP 2: Style that image however you want. Below I am going to show you the CSS code for the image. #myimg{ width:100px; //comment - this is style... read more

Hello everyone let's see how to make an awesome rotating image on hover with HTML 5.0 and CSS 3.0.

STEP 1: In HTML code put an image with the HTML tag

STEP 2: Style that image however you want. Below I am going to show you the CSS code for the image.

#myimg{

   width:100px; //comment - this is style the size(width property) as for our need in the website

   height:100px; //comment - same as width we are managing the height of the image as well

   transition: all 1s ease; // comment - it allows you to change the property calue smoothly (in this casse, on hover and after hover)

}

STEP 3: Now we will add the hover effect for the image. Hover effect is the effect when the user puts the mouse(not clicks) on that particular area(here image) is called HoverOver effect and when the user takes the the mouse out is called HoverOut. So lets create the hover effect for the image.

#myimg:hover{

// comment :hover type is called the pseudo field which is like specifying the effect or property on the parent field/area

transform: rotate(360deg); // comment - it will rotate the image by 360 degree. as above we have given the transition time of 1sec it will rotate 360 deg in the given time.

}

 

And that's it. Lets put the whole code without comments below.

 

<!doctype html>

 

put the head tags and include the css file reference here

 

 The description of the image

 

 

CSS file: 

#myimg{

   width:100px; 

   height:100px;

   transition: all 1s ease; 

}

#myimg:hover{

transform: rotate(360deg);

}

 

If you have any doubts in the above code please feel free to contact me through urbanpro

read less
Comments
Dislike Bookmark

Looking for CSS Training

Find best CSS Training in your locality on UrbanPro.

FIND NOW

Lesson Posted on 27/12/2016 IT Courses/HTML IT Courses/CSS IT Courses/Java Script Training

Bootstrap grid system

Dheeraj Kushwaha

I am having Sound knowledge of Adobe Creative cloud CC 2018. I deals in many creative domain such as...

What is a Grid? As put by wikepedia − In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web... read more

What is a Grid?

As put by wikepedia −

In graphic design, a grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal) lines used to structure the content. It is widely used to design layout and content structure in print design. In web design, it is a very effective method to create a consistent layout rapidly and effectively using HTML and CSS.

To put in simple words, grids in web design organise and structure content, makes the websites easy to scan and reduces the cognitive load on users.

What is Bootstrap Grid System?

As put by the official documentation of Bootstrap for grid system −

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.

Let us understand the above statement. Bootstrap 3 is mobile first in the sense that the code for Bootstrap now starts by targeting smaller screens like mobile devices, tablets, and then “expands” components and grids for larger screens such as laptops, desktops.

Mobile First Strategy

  • Content
    • Determine what is most important.
  • Layout
    • Design to smaller widths first.
    • Base CSS address mobile device first; media queries address for tablet, desktops.
  • Progressive Enhancement
    • Add elements as screen size increases.

Working of Bootstrap Grid System

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here’s how the Bootstrap grid system works −

  • Rows must be placed within a .container class for proper alignment and padding.
  • Use rows to create horizontal groups of columns.
  • Content should be placed within the columns, and only columns may be the immediate children of rows.
  • Predefined grid classes like .row and .col-xs-4 are available for quickly making grid layouts. LESS mixins can also be used for more semantic layouts.
  • Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and the last column via negative margin on .rows.
  • Grid columns are created by specifying the number of twelve available columns you wish to span. For example, three equal columns would use three .col-xs-4.

Media Queries

Media query is a really fancy term for “conditional CSS rule”. It simply applies some CSS, based on certain conditions set forth. If those conditions are met, the style is applied.

Media Queries in Bootstrap allow you to move, show and hide content based on the viewport size. Following media queries are used in LESS files to create the key breakpoints in the Bootstrap grid system.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

Occasionally these are expanded to include a max-width to limit CSS to a narrower set of devices.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

Media queries have two parts, a device specification and then a size rule. In the above case, the following rule is set −

Let us consider this line −

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

For all devices no matter what kind with min-width: @screen-sm-min if the width of the screen gets smaller than @screen-sm-max, then do something.

read less
Comments
Dislike Bookmark

Lesson Posted on 28/09/2016 IT Courses/HTML IT Courses/CSS

HTML

Mohit Ande

HTML is probably the easiest languages to learn every one, but often we give a lot of attention these days, as we do not focus on CSS. So to remind you of this, of course, and to help you with some great tips and tricks you will be more effective to write HTML.
Comments
Dislike Bookmark

Answered on 08/09/2016 IT Courses/CSS

Abhilasha K.

Computer Wizard

display:none will not be available in the page and does not occupy any space. visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. visibility:hidden preserve the space, whereas display:none doesn't preserve the... read more
display:none will not be available in the page and does not occupy any space. visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout. visibility:hidden preserve the space, whereas display:none doesn't preserve the space. read less
Answers 20 Comments
Dislike Bookmark

Looking for CSS Training

Find best CSS Training in your locality on UrbanPro.

FIND NOW

Answered on 14/09/2016 HTML5 Training IT Courses/CSS

Which technologies is good in Frontend developer? HTML,CSS,JAVASCRIPT,JQUERY,PHP,MYSQL,PHOTOSHOP,ANGULARJS?Among... read more
Which technologies is good in Frontend developer? HTML,CSS,JAVASCRIPT,JQUERY,PHP,MYSQL,PHOTOSHOP,ANGULARJS?Among these courses which I need to learn read less

Irshad Ahmad

Trainer

You should start with HTML, CSS and JavaScript, then start exploring AngularJS. I would suggest to go for Angular2 directly with basic understanding of Node.js, ECMA6 and TypeScript. Later on you can learn about JSLint, gulp and grunt and other analysis and optimization tools. Go step by step.
Answers 2 Comments
Dislike Bookmark

About UrbanPro

UrbanPro.com helps you to connect with the best CSS Training in India. Post Your Requirement today and get connected.

Overview

Lessons 13

Total Shares  

Top Contributors

Connect with Expert Tutors & Institutes for CSS

x

Ask a Question

Please enter your Question

Please select a Tag