CSS Lists, CSS Table Style Properties and CSS Box Model

0 575

CSS Lists CSS Table Style Properties and CSS Box Model tutorials

in this tutorial we will talk on CSS Lists CSS Table Style Properties and CSS Box Model tutorials

lists in CSS

CSS allows you to add different markers to order and unordered lists. This can be achieved through CSS list properties. With CSS list properties we can add circle, square, image as a marker.

Different type list markers

list-style-type property allows specifying list marker for list items.

Image as a list marker

To add an image as a list marker for list list-style-image property used.

Shorthand list property

list-style property is used for shorthand in one declaration.

While using shorthand property keep order value in mind.

list-style-type  if a list-style-image is defined the value list-style-type property will be displayed if the image is not available for some reason.
list-style-position will specify that weather list item marker should display inside or outside the content flow.
list-style-image will specify the image as a list marker

CSS Table Style Properties

Table Style Property

CSS allows you to change the look of HTML table how you want. To achieve this border property used.

Table Borders

Border property used to apply a border to HTML table through CSS.

Collapse Borders

border-collapse property defines the table border are collapsed into a single border or separated.

Width and Height of a Table

width and height properties are used to set height and width of a table.

Table Padding

padding property used on <td> and <th> elements to control spacing between and its content.

CSS Box Model

The CSS Box Model

In a HTML page, all elements can be seen as a boxes when we are talking about design and layout.A box model is a box wrap around HTML element.box model allows us to define a border around element and space between elements.

Width and height of an element

You must be familiar with model box works to set height and width of a box.



Leave A Reply

Your email address will not be published.