CSS Properties In Lesson OrderS2C Home « CSS Properties In Lesson Order

Click on a Property Name to see the reference for that CSS Property.

Click on an Associated Lesson to see how the CSS Property is used.

Other CSS Visual Property Reference Tables


CSS Properties in Alphabetical Order

CSS Properties in Function Order

CSS Visual Property Reference In Lesson Order
Associated Lesson CSS Property Description Function
CSS Basic Lesson 5 - Styling Text

In this lesson we learn how to use CSS to manipulate the text on our web pages. CSS allows us to change the spacing between letters and words, the line height of our text, how our text is aligned, as well as the colour of our text and how it looks. With CSS we have complete power over our text and how and where its presented; so without further ado lets see how.		 color Specify the foreground colour of our text. Text
letter-spacing Specify the spacing between text characters.
text-align Align text for block-level elements, table cells and inline blocks.
text-decoration Specify some text to decorate for an element.
text-indent Allows us to indent text by a particular amount.
text-transform Allows us to transform text in certain ways.
white-space Specify how whitespace is displayed for an element.
word-spacing Specify the word spacing between words in some text.
CSS Basic Lesson 6 - Using Fonts

In this lesson we learn how to use CSS to change the fonts used on our webpages. We can use CSS to modify the font and the group of font families we would like to select from. CSS also allows us to change the font size, the appearance of the font used and the weight of the font.		 font Shorthand CSS property for specifying the other font properties. Fonts
font-family Specify the font family to use for an element.
font-size Specify the font size to use for an element.
font-style Specify the font style to use for an element.
font-variant Specify the font variant to use for an element.
font-weight Specify the font weight to use for an element.
CSS Basic Lesson 8 - Padding & Margins

In this lesson we delve deeper into the box model by taking a closer look at padding and margins and see how these box properties effect our images and text. CSS gives us complete control over padding and margins, as well as some handy shorthand CSS properties, that really cut down on the typing we need to do.		 margin Shorthand CSS property for specifying the other margin properties. Box Model Margins
margin-bottom Specifies the margin space below the padding and border for an element.
margin-left Specifies the margin space to the left of the padding and border for an element.
margin-right Specifies the margin space to the right of the padding and border for an element.
margin-top Specifies the margin space above the padding and border for an element.
padding Shorthand CSS property for specifying the other padding properties. Box Model Padding
padding-bottom Specifies the padding space below the element content.
padding-left Specifies the padding space to the left of the element content.
padding-right Specifies the padding space to the right of the element content.
padding-top Specifies the padding space above the element content.
CSS Basic Lesson 9 - Borders

In this lesson we take our final look at the basics of the CSS box model by looking at borders and the twenty CSS properties available to use with them. Don't let the amount of CSS properties available for borders fool you into thinking they are complex though, because borders are very simple to understand and use. Borders have colour, style and width attributes that can be set using CSS. The twenty tags available for use with borders are used to set these values individually for each border side, or for all borders using some neat shorthand CSS properties.		 border Shorthand CSS property for specifying the colour, style and width of all four borders of a box. Box Model Borders
border-bottom Shorthand CSS property for specifying the colour, style and width for the bottom border of an element.
border-bottom-color Specifies the color of the bottom border for an element.
border-bottom-style Specifies the style of the bottom border for an element.
border-bottom-width Specifies the width of the bottom border for an element.
border-color Shorthand CSS property for specifying the border color for all four borders of a box.
border-left Shorthand CSS property for specifying the colour, style and width for the left border of an element.
border-left-color specifies the color of the left border for an element.
border-left-style Specifies the style of the left border for an element.
border-left-width Specifies the width of the left border for an element.
border-right Shorthand CSS property for specifying the colour, style and width for the right border of an element.
border-right-color specifies the color of the right border for an element.
border-right-style Specifies the style of the right border for an element.
border-right-width Specifies the width of the right border for an element.
border-style Shorthand CSS property for specifying the border style for all four borders of a box.
border-top Shorthand CSS property for specifying the colour, style and width for the top border of an element.
border-top-color specifies the color of the top border for an element.
border-top-style Specifies the style of the top border for an element.
border-top-width Specifies the width of the top border for an element.
border-width Shorthand CSS property for specifying the border width for all four borders of a box.
CSS Intermedite Lesson 1 - Backgrounds

In this lesson we explore backgrounds and how they bring our blank canvasses to life. We can use a colour for the background or an image that can be attached, positioned and repeated as required. We look at the CSS background properties that let us do this and increase our knowledge in this lessons practical.		 background Shorthand CSS property for specifying the other background image properties. Backgrounds
background-attachment Specifies whether the background image is fixed or scrolls.
background-color Specifies the background colour for an element.
background-image Specifies the background image for an element.
background-position Specifies the position of a background image within an element.
background-repeat Specifies if and how a background image is repeated.
CSS Intermediate Lesson 2 - A Final Look At The Box Model

In lessons 7, 8 and 9 of the CSS Basic Tutorials we looked at the box model, and the padding, margin and border properties which form the periphery of the box model. In this lesson we take a final look at the box model by exploring box model dimensions. We look at all the CSS box model dimension properties and see the impact these have on our images and text.		 height Specifies the content height for a box model element. Box Model Dimensions
line-height Specify a minimal height for line boxes within a box model element
max-height Specifies a maximum content height for a box model element.
max-width Specifies a maximum content width for a box model element.
min-height Specifies a minimum content height for a box model element.
min-width Specifies a minimum content width for a box model element.
vertical-align Specify the vertical alignment of an element
width Specifies the content width for a box model element.
CSS Intermediate Lesson 7 - Positioning

CSS allows us to position elements in several ways using the float and position CSS properties. In this lesson we explore these two properties, along with the other CSS properties we use in conjunction with them, to position our elements exactly where we want them.		 bottom Set a distance from the bottom of the page or containing block element for positioned elements. Positioning
clear Position an element under floated elements.
clip Specify the displayable dimensions, of a visible, absolutely positioned element.
float Move an element to the left or right edge of its containing element.
left Set a distance from the left of the page or containing block element for positioned elements.
position Specify a box position for an element.
right Set a distance from the right of the page or containing block element for positioned elements.
top Set a distance from the top of the page or containing block element for positioned elements.
z-index Specify a stack order along the z-axis for positioned elements.
CSS Intermediate Lesson 8 - Display

With CSS we can change how an element looks or whether an element is visible at all. We have the opportunity to decide what to do with box overspill and how we handle it. CSS also allows us to change the appearance of the cursor, to notify users that an element is being actioned, or a mouse action is available on it. In this lesson we learn how to use the various CSS display properties to do these things.		 cursor Specifies the type of cursor to be displayed when pointing at an element Display
display Specifies the type of box generated by an element.
overflow Specify what to do with the content of a block container, that overflows the element's box.
visibility Specify whether the box generated by an element is rendered.
CSS Advanced Lesson 1 - Generated Content

In this lesson we explore generated content and how we can use this in conjunction with the :before and :after pseudo-elements to insert information into our web pages. We also learn how to generate quotes and how to add and reset counters for an element.		 content Used to generate content in a document in conjunction with the :before and :after pseudo-elements. Generated Content
counter-increment Increments one or more counters set with the content CSS property.
counter-reset Resets one or more counters set with the content CSS property.
quotes Specifies quotation marks for any number of embedded quotations.
CSS Advanced Lesson 3 - Styling Lists

Wouldn't it be really great to do some funky stuff to our lists, to really make them stand out from the crowd. CSS gives us four properties to position, style and add types and images to our lists. In this lesson we learn how to use the CSS properties to do this.		 list-style Shorthand for specifying the other list style properties. Lists
list-style-image Specifies an image to use for the list-item marker.
list-style-position Specifies a position for the list item-marker with respect to the list element content.
list-style-type Specifies a type to use for the list-item marker.
CSS Advanced Lesson 4 - Styling Tables

HTML gives us a lot of tags to use when creating tabular data. CSS adds five properties to this list to give us even more control over the presentation of our tables. In this lesson we explore these properties which allow us to collapse and space our table borders and how to handle empty cells. We can decide where to put table captions and whether to use automatic or fixed table layouts.		 border-collapse Specifies whether table borders are collapsed (collapsed border model), or separated (separated border model). Tables
border-spacing Specifies a distance between cells when the separated border model is used.
caption-side Specifies a position for a table caption.
empty-cells Specifies whether empty cells display borders and backgrounds when the separated border model is used.
table-layout Specifies the table layout algorithm to use when laying out a table.
CSS Advanced Lesson 7 - The Printed Page

Its normal practice for users to want to print content from your site, but what might look great on screen may look terrible on paper. Also using half an ink cartidge may deter users from printing information from your site again. In this lesson we learn how to use the 'print' media type along with page breaks to control print flow.		 orphans Specifies the minimum number of lines to display at the bottom of a page, when a page break occurs inside a block-level element. Printing
page-break-after Specifies page break behaviour to occur after this block-level element.
page-break-before Specifies page break behaviour to occur before this block-level element.
page-break-inside Specifies whether a page break should occur within a block-level elements generated box.
widows Specifies the minimum number of lines to display at the top of the next page, when a page break occurs inside a block-level element.
CSS Advanced Lesson 8 - Other Properties

Our Journey into the world of CSS is drawing to a close but we still have a final few properties to discuss. In this lesson we learn about text direction and how to outline elements of any shape without impacting the box model.		 outline Shorthand CSS property for specifying the outline-color, outline-style and outline-width for an element. Outlines
outline-color Specify the outline color for an element.
outline-style Specify the outline style for an element.
outline-width Specify the outline width for an element.
direction Specifies the base writing direction of blocks, embeddings and overrides, table columns and incomplete lines of justified text for the Unicode bidirectional algorithm. Text Direction
unicode-bidi Used in conjunction with the direction CSS property for handling birectional text.

go to home page Homepage go to top of page Top