CSS Basics

Today we’re going to talk about list styles. Lists are a vital commodity to web site creation. Most side-navigation menus and inline menus are actually lists that are simply listing the things we want them to. From there, we can add styles to these lists and manipulate them however we please.

Lists

In HTML there are two types of lists:

• Ordered Lists <ol>
• Unordered Lists

  Ordered Lists are usually marked with numbers or letters whereas Unordered Lists are usually marked with bullets or squares.

  List Type

  We can change how a list looks by using the list-style-type property. Consider the following code:

  ul {list-style-type:circle;}
  ol {list-style-type:upper-roman;}
  

  The CSS code above will make all ul elements have a list style type of a circle and all ol elements have a list style type of upper roman numerals. The output will look like the following:

  • Item 1
  • Item 2
  1. Item 1
  2. Item 2

  Properties

  We can have a few properties for list types and those properties operate the same way as the background properties

  Property	Description	Values
  list-style	This is the all-inclusive property where you can define all of the values	list-style-type list-style-image list-style-position
  list-style-type	This property will define type of list style you wish to have in the <li> element.	none disc circle square decimal decimal-leading-zero armenian georgian lower-alpha upper-alpha lower-greek lower-latin upper-latin lower-roman upper-roman hebrew cjk-ideographic hiragana hiragana-iroha katakana katakana-iroha
  list-style-image	This property will allow you to define an image as the list marker.	url(image url) none
  list-style-position	This property will allow you to specify whether you want the list to be inside or outside the content flow.	inside outside

  We can also narrow down the list-style and list-style-type properties for each list element.

  Unordered Lists

  For unordered lists we can use the following values:

  • circle
  • disc
  • square
  • none

  Technically we can use any of the values listed in the table above, however, the purpose of the unordered list would cease to exist.

  Ordered Lists

  We can have many options for the ordered list. Out of the 23 values we posted for list-style-type, only three were solely for unordered lists. We can use the following values:

  decimal decimal-leading-zero armenian georgian lower-aplha upper-alpha lower-greek upper-greek lower-latin

  upper-latin lower-roman upper-roman hebrew cjk-ideographic hiragana hiragana-iroha katakana katakanap-iroha

  Using images with lists

  Using images can spice up just a standard web page by a lot. It is very easy to create your own bullet, circle, square, or a small arrow pointing toward the item you are showing in the list. We can use the all-inclusive,

  list-style:url ("image/bullet.png");
  /*OR*/
  list-style-image:url ("image/bullet.png");
  

  This will replace the default bullet in the unordered list with an image of our choice.

  To see these properties in action feel free to click on the download button below!

  
  lists.zip
  Size: 9.76 KB

Today we’re going to continue our journey into the Box Model. If you aren’t familiar with this box model, you should read about it!

Padding

Padding — defines the space between the element border and element content and will be the same color as the background color of the element.
If we recall that in the box model we have margins > borders > padding > content so Padding is tertiary. Let’s assume you have an HTML paragraph element:

<!--No Padding-->
<p style="background-color:#fff;">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</p>
<!--With padding-->
<p style="background-color:#fff; padding:10px;">Lorem ipsum dolor
sit amet, consectetur adipiscing elit.</p>

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

So what is different from the first line and the second line? The first line is without padding so the white background only fills to the end of the text instead the width of the box. The second line, however, spreads across the entire width of the box and it is a padding of 10px on all sides.

Padding works in very similar ways as the margin property except the margins are always invisible and the padding is based on the background of the element you are adding padding to.

Properties

Like margins, there are five possible properties we can use. They are the following:

1. padding-bottom
2. padding-left
3. padding-top
4. padding-right
5. padding

The first four properties define each side for padding. For example, if you wanted to adjust the bottom and right padding for a certain element you could use the following:

p.element {
     padding-bottom:3px;
     padding-top:7px;
}

This will change the bottom padding of the element by 3px and the top padding of the element by 7px. Example:

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Remember that padding is basically an extension of the background of an element and you also need to take into account any other elements (whether above, below, left or right) that might get in the way of this padding. In theory, you could make an entire HTML and CSS website using only margins, borders, padding, and content.

Values

1. em, px, pt – numeric values e.g. 1em, 15px, 2pt
2. percent % – percent of the containing element e.g. 10% of 500px is 50px.

span.padding {
     padding-top:2em;
     padding-bottom:10px;
     padding-right:16%;
}

All of the above are valid ways to define padding of our span element and class of padding.

Padding – All Inclusive

The all-inclusive padding property works the same way as the all-inclusive margin property. This singular padding property will define padding how ever we need it to using one property instead of writing out each side.

padding:15px 30px 45px 60px;

• top padding – 15px
• right padding – 30px
• bottom padding – 45px
• left padding – 60px

This example has four values for the padding property. The values start with padding-top and then go clockwise to padding-left. So if you think of clock and a new day, which always starts at 12 or the top of the clock, and then rotate clockwise the next 90° angle is at the right, then the 180° is at the bottom, and then the 270° is at the left. So it’s like looking at the clock at every 90° angle you get top, right, bottom, left.

padding:15px 30px 45px;

• top padding is 15px
• right and left padding is 30px
• bottom padding is 45px

This might come as a surprise to us because you would think they would group the Top and [bottom and left] segments separately, however; we can see in this example that the padding-top is 15px and the padding-bottom is 45px. The left and right padding is grouped together because they just belong together. If someone asks, “when I say a word you think of something that is opposite to that” and they ask, “up” you’ll probably say “down” off the bat.

padding:15px 30px;

• top and bottom padding 15px
• right and left padding 30px

This might be more clear since there are only two values here. Naturally, we’d think Top and [right and left] so the top and bottom padding will have a value of 15px whereas the right and left padding will have a value of 30px.

padding:15px;

• top, right, bottom, and left padding is 15px

One single value for the padding property will set all padding to that value, in our case 15px.

Today we’re going to continue our adventure about the box model. We covered the box model and the margin property but we still need to cover padding and border properties!

If we recall that margin > border > padding > content… Margins are always invisible, Borders can be any color we’d like them to be, and padding will be the same color as the background-color of the element.

Border Property

The border property defines the border around an element. Using this border property we can have a border around anything we’d like. We can have the following properties:

1. border-top
• border-top-color
• border-top-style
• border-top-width
2. border-right
• border-right-color
• border-right-style
• border-right-width
3. border-bottom
• border-bottom-color
• border-bottom-style
• border-bottom-width
4. border-left
• border-left-color
• border-left-style
• border-left-width
5. border – all-inclusive

Consider the following code:

p.top-border {
     border-top-color:#ff9300;
     border-top-style:solid;
     border-top-width:1px;
}

So this would only apply to p elements with the class attribute of “top-border”, we know that much! This particular element would have a top border of #ff9300 (Atomicpages orange!), a border-style of solid (there are no breaks or spaces), and a border width of 1px since we want it to be thin.

This is how it would look like if we tried this. The more we type the longer the border becomes. It almost appears as if the text above is really being underlined but this is the border-top property.

For every border property there exists a short-hand way of adding styles to our borders. We can very well type border-top-width, border-top-style, border-top-color every instance we want to use this. We know exactly what the border is doing without having to guess or anything. This can take time, however. We can shorten the example above by doing the following:

p.border-ex {border-top:width style color;} /*Syntax*/
p.top-border {border-top:1px solid #ff9300;}

This is far more efficient and a much faster way of adding border styles to our elements! It is more confusing and might take some time to get used to. If you’re comfortable using the long-hand method then stick to what you’re comfortable with. If you prefer short-hand methods then use those, bear in mind that the short-hand method does exist and it readily available.

border-width

The first value/property we should define in our border should be the width of our border. There are built in values that we can use or we can define our own. Here are the values we can have:

1. thin — approx. 1px
2. medium — default value
3. thick
4. px, em, pt, etc

This is a thin border, This is a medium border, This is a thick border,

This is a border with 15px as the value..

Why we would want a border with 15px is beyond me, but for the sake of this example it is fine.

border-style

There are a lot of styles for borders, here are the styles you can have:

That is a lot of styles indeed! We won’t go over every single style in this tutorial. I will, however, add a downloadable that will contain these styles! Note: the 3D style borders, it depends all on the color you pick. Some colors will look nice and some color will not look nice at all!

border-color

The border color property works the same as the background-color property. You can choose any color you would like your border to be. You may use built in colors (e.g. reg, green, blue), HTML Color Codes, or RGB Values to use your colors.

border-color:red; /*Color value*/
border-color:#ff9300; /*Hex Value*/
border-color:rgb(51, 255, 0); /*Decimal Value*/

All-Inclusive

The all-inclusive border property works the same as most other all-inclusive properties. It saves time but makes the code a little more confusing. The syntax you should use is like the following:

border:width style color;
border:1px solid #ff9300;

If you want to see these examples in action then click on the green download button below!

border.zip
Size: 3.25 KB