Display Properties

The display property is used in CSS to choose how an element (which can be for example a list item, paragraph, table) will be outputted for the user to see.

The most commonly used are:

  • none: the element will not be displayed at all
    p
    {
        display: none;
    }
  • inline: the element is shown in a line, one after each other, with no modification (no line breaks etc)
    p
    {
        display: inline;
    }
  • block: the element has a line-break before and after the element. I made use of this several times to make a plain horizontal menu.
    p
    {
        display: block;
    }

Others that may be of interest are:

  • marker
  • list-item
  • compact
  • run-in

Margin Properties

Margin properties in CSS has to do with the space around elements. One can tackle all margins at one time by using the following css:

p
{
     margin: 2cm 4cm 3cm 4cm
}

Or else, one can make use of margins seperately in terms of:

  • margin-top
  • margin-bottom
  • margin-left
  • margin-right

Margins may also be given negative numbers in order to overlap elements on top of each other. Example:

p
{
  margin-bottom: -30px;
}

Below is a graphic to better explain which part is the margin part. The other properties (padding, border) will be dealt later on this course:

 

CSS: Negative Margins

We have already dealt with margins, and how they work. I also mentioned Negative Margins in Part 2 and I promise to deal with them. And here is a short article on examples and reasons why one should use them!

Negative margins are used to create effects such as:

  1. over-lapping
  2. to create 3D effects

So how do these Negative Margins work? It works exactly the opposite way the positive values work in margins.

The following is an example of making use of these negative margins.

CSS:

p
{
margin:20px 0;
height:40px;
width:200px;
margin-left:55px;
background:#CCFF99;
border:1px dotted #000;
padding-left:15px;
padding-top:15px;
}

p.bottom 
{
margin:-35px 0 20px 20px;
background:#FFCCFF
}

p.center
{
margin:-95px 0 30px 180px;
border:2px solid #FFFFCC;
background:none; width:50px;
}

HTML:

<p> Hello! </p>
<p class="bottom"> I am Steffi! </p>
<p class="center"> </p>

This is the way it should appear:

img148/8295/93575657ly6.png

 

 

CSS : Padding Property

Padding is the space between the element’s content and border. Padding may be defined at once, or according to where you would like it, meaning: padding-top, padding-bottom, padding-right, padding-left.

Illustration of the CSS box model. The area between content and border is highlighted in yellow.

The following is how to declare the padding property for multiple sides:
td.allpadding
{
      padding: 25px;
}
The following is how to declare padding according to where it is needed:
td.Leftrightpadding
{
      padding-left: 10px;
      padding-right: 10px;
}

 

CSS : Color Property


The CSS Color property is there to set the color of the text written within this element, in other words it is the fore color.
The value in the color property can be:
·         A color name example: blue:
h1
{
     color: blue
}
·         A hexadecimal number example: #FF0000:
h2
{
     color: #FF0000
}
·         An RGB value example: (0,255,2):
p
{
     color: rgb(0,255,2)
}