CSS - Width and Height Properties

Chapter 15 : CSS Width and Height Properties


Inherited: No

Height

You can control the height of an element with the height property
height: value;
Values:
  • auto
  • length
  • percentage

Line Height

You can control the height between lines with the line-height property
line-height: value;
Values:
  • normal
  • number
  • length
  • percentage

Max Height

You can control the maximum height of an element with the max-height property
max-height: value;
Values:
  • none
  • length
  • percentage

Min Height

You can control the minimum height of an element with the min-height property
min-height: value;
Values:
  • length
  • percentage

Width

You can control the width of an element with the width property
width: value;
Values:
  • auto
  • length
  • percentage

Max Width

You can control the maximum width of an element with the max-width property
max-width: value;
Values:
  • none
  • length
  • percentage

Min Width

You can control the minimum width of an element with the min-width property
min-width: value;
Values:
  • length
  • percentage

Comments

Post a Comment

Popular posts from this blog

CSS - Anchors , links and Pseudo Classes

Image
Chapter 11 : CSS Anchors, Links and Pseudo Classes Below are the various ways you can use CSS to style links. a:link {color: #009900;} a:visited {color: #999999;} a:hover {color: #333333;} a:focus {color: #333333;} a:active {color: #009900;} Now lets take a look at what each one of the above link styles actually does. a:link {color: #009900;} The first on the list sets the color of a link when no event is occuring a:visited {color: #999999;} The second sets the color a link changes to, when the user has already visited that url a:hover {color: #333333;} The third sets the color a link changes to as the user places their mouse pointer over the link a:focus {color: #333333;} The fourth is primarilly for the same purpose as the last one, but this one is for users that are not using a mouse and are tabbing through the links via there keyboards tab key, it sets the color a link changes to as the user tabs through the links a:active {color: #009900;} The fifth on...
Read more

CSS - IDs

Chapter 4 : CSS IDs IDs are similar to  classes , except once a specific id has been declared it cannot be used again within the same (X)HTML file. I generally use IDs to style the layout elements of a page that will only be needed once, whereas I use  classes  to style text and such that may be declared multiple times. The main container for this page is defined by the following. <div  id =”container”> Everything within my document is inside this division. </div> I have chosen the id selector for the “container” division over a class, because I only need to use it one time within this file. Then in my CSS file I have the following: # container{    width: 80%;   margin: auto;   padding: 20px;   border: 1px solid #666;   background: #ffffff; } You will notice that the id selector begins with a ( # ) number sign instead of a ( . ) period, as the class selector does.
Read more

CSS - Syntax

Chapter 2 : CSS Syntax The syntax for CSS is different than that of (X)HTML markup. Though it is not too confusing, once you take a look at it. It consists of only 3 parts. selector { property: value } The selector is the (X)HTML element that you want to style. The property is the actual property title, and the value is the style you apply to that property. Each selector can have multiple properties, and each property within that selector can have independent values. The property and value are separated with a colon and contained within curly brackets. Multiple properties are separated by a semi colon. Multiple values within a property are sperated by commas, and if an individual value contains more than one word you surround it with quotation marks. As shown below. body {   background: #eeeeee;   font-family: “Trebuchet MS”, Verdana, Arial, serif; } As you can see in the above code I have separated the color from the font-family with a semi-colon, sep...
Read more