ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing ExpertRating - Online Certification and Employment Testing

ExpertRating Home
ExpertRating Benefits
Recommend ExpertRating
Suggest More Tests
Privacy Policy
FAQ
Login
 
CSS Tutorial - Index
CSS Tutorial - Introduction to CSS
CSS Tutorial - Basic CSS Concepts
CSS Tutorial - Linking Style Sheets
CSS Tutorial - Text Formatting
CSS Tutorial - Backgrounds
CSS Tutorial - Fonts
CSS Tutorial - Borders
CSS Tutorial - Margins and Padding
CSS Tutorial - Lists
CSS Tutorial - Dimensions
CSS Tutorial - Display and Positioning
CSS Tutorial - Pseudo Classes and Elements
CSS Tutorial - W3 Standards,Validation of Style
     

 
Online Personal Trainer Certification
Personal Trainer Certification (Spanish)
Six Sigma Certification
Find a Personal Trainer
Project Management Certification
Six Sigma Certification
Six Sigma Black Belt Certification
Master Black Belt Certification
Six Sigma Green Belt Certification
Life Coach Certification
Lean Management Certification
Lean Six Sigma Certification
First Aid Certification
CPR Certification
Yoga Certification
Aerobics Certification
Pilates Certification
Business Analyst Certification
SEO Certification
Online Business Writing Course & Certification
Makeup Artist Certification
Baby Sitting Course & Certification
Time Management Certification
Health Club Management Certification
Medical Coding Certification
Medical Billing Certification
Business Analysis Course
Master Trainer Certification
Total Quality Management Certification
Kaizen Certification
Creative Writing Certification
Event Management Certification
Test Search by Job Title
Administrative Assistant Certification
Virtual Assistant Certification
  All Online Courses
   

   
   
   
   
   
   

   
  Home > Courses, Tutorials & eBooks > CSS Tutorial > Working with Dimensions
 
Previous

CSS Tutorial - Working with Dimensions

    Page 2 of 2
 

Width

This property allows you to set the width of an element.

  • This property is useful for rendering images.
  • Possible values are: auto, length and percentage.
     auto - This lets the width to be determined by the browser automatically.
     length - This defines the width in absolute units (cm, mm, in, pt) or relative units ( em, px).
     % - This defines the width in percentage of the width of the parent object.
  • By default, value for width is auto.
  • Negative lengths are not allowed.
  • Example
    img { width: 50px;}

    Width of the image, here, is 50 pixels.

     

Max-Width

This property specifies the maximum width for an element.

Possible values for max-width property are: none, length, percentage.
  none - This specifies that there are no width limits imposed on the element.
  length - This specifies the maximum width for an element.
  % - This specifies the maximum width of the element as a % of the width of the containing block.

Example
h1 { max-width:100px;}
 

This property is not currently supported by any browser.

Min-Width

This property specifies the minimum width for an element.

Possible values for min-width property are: length, percentage.
  length- This specifies the minimum width for an element.
  % - This specifies the minimum width of the element as a % of the width of the containing block.

Example
h2 { min-width: 50px;}
 

This property is not currently supported by any browser.

 
 
Summary
 

In this chapter you have learnt:

  • The various dimension properties
  • Setting height and width for an object
  • Specifying line-height, max-height and min-height for an element
  • Applying width dimension on images and determining their max-width or min-width
 
 
Review Questions
 

Fill in the Blanks

  1. The auto value of height property is determined by the ______.
  2. The default height value is ______.
  3. Line-height sets the distance between two _____ lines.
  4. Possible values for max-height property are ______, _____ and _____.
  5. Width property sets the _____ of an element.
Solutions
  1. Browser
  2. Auto
  3. Adjacent
  4. None, length and percentage
  5. Width

State Whether True or False

  1. Negative values are allowed for height property.
  2. By default, value for height is none.
  3. Min-height property specifies the minimum height for an element.
  4. p { line-height : 15 px}, will set the distance between two lines of paragraph as 15 pixels.
Solutions
  1. False
  2. False
  3. True
  4. True
Exercise
Define various dimension properties around HTML elements.
Solution
View Code              View Runtime
 
 
What's Next

The next chapter will acquaint you with  how to control the display and position of the elements. The chapter will further tell you about the positioning of text, clearing the text, changing the shape of the cursor, and visibility of a text.

               Hop over to the next chapter to get a close-up on controlling the display and position.
 
 
                 

 

 
     
Home  |  About Us  |  Privacy Policy  |  Site Map  |  FAQs  |  Contact Us
 
© ExpertRating 2015. All Rights Reserved.