solution

CSS Basic Tutorial – part 2

Published on 23/09/2019

CSS Background

No matter if you are a beginner or a professional in CSS or simply want to upgrade your professional skills to turn yourself into an expert, learning to set free backgrounds CSS can help your cause a lot. Remember, the background CSS adds tremendously to the look and feel of a website and appeals great to any visitor to the site.

Table of Contents

To set a background in CSS, you can define 5 background properties and 1 shorthand, they are:

background-image
background-color
background-repeat
background-position
background-attachment
background (shorthand)

By using these, you can control background colour, background images, background repeat, background attachment and background position. These attributes allows you to set all the background properties in one declaration with just a one piece of CSS background code. I guess, you can’t wait to know more about these attributes and implementing them.

CSS Background Image

You can change body background image of your webpage using CSS selector. You can do it either by inserting an URL to the image, use none for no background image and even can inherit an image background from a parent element. Have a look at the following table and you will have a better idea about CSS background image code:

Syntax	Value	Description	Applies to
background-image:	url(‘URL’)	Use it to link a web image to set the background	All Elements
background-image:	none	Use when you don’t need any backround	All Elements
background-image:	inherit	Allows to inherit an image background from a parent element	All Elements

body
{
background-image:url(‘images/my-image.gif’);
}

CSS Background Color

There are a number of ways to define and control background colour of the webpage with CSS. You can do it by defining colour name, hex code, RGB code, make CSS background transparent and also make it inherit background colour from a parent element. The following table will make it even clearer to you.

Syntax	Value	Description	Applies to
background-color:	#ff0000, rgb(0,255,255), Red	Sets background by defining color name, hex number or RGB number.	All Elements
background-color:	transparent	Allows to keep the backgound color transparent	All Elements
background-color:	inherit	Use it to inherit background color from a parent element	All Elements

body
{
background-color:Red or #ff0000 or rgb(255, 0, 0);
}

CSS Background Repeat

Instead of using a whole big image, you can also repeat a small image multiple times to set a background for your webpage. The page created using background repeat will load faster and will optimize webpage. You can repeat background image both vertically and horizontally and also can inherit it from a parent element.

There are different values, which you can use to define background repeat property, they are:

Syntax	Value	Description	Applies to
background-repeat:	repeat	Use it to repeat backgound image both vertically and horizontally	All Elements
background-repeat:	repeat-x	Use it to repeat background image only horizontally	All Elements
background-repeat:	repeat-y	Allows to repeat background image only vertically	All Elements
background-repeat:	no-repeat	Use it if you don’t want to repeat a background image	All Elements
background-repeat:	inherit	Allows to inherit background-repeat property from the parent element	All Elements

body
{
background-repeat:repeat-x;
}
div
{
background-repeat:repeat-y;
}
span
{
background-repeat:no-repeat;
}
table
{
background-repeat:repeat;
}

NOTE: One important thing that you must remember that background-repeat:repeat; property repeats in x and y both positions.

CSS Background Position

You can set the background position as top left, top right etc. However; the second value will be automatically “center”. You can also define the position vertically and horizontally and make it inherit the properties from a parent element. The other background position values are defined below:

Syntax	Value	Description	Applies to
background-position:	left top left center left bottom right top right center right bottom center top center center center bottom	You can only define one keyword, the second value will be “center”	All Elements
background-position:	x(%) y(%) or x(px) y(px)	Allows to set first value as horizontal position and the second as vertical.	All Elements
background-position:	inherit	Allows to inherit background-position property from the parent element	All Elements

div
{
background-position:x(% or px) y(% or px);
}

CSS Background Attachment

The background-attachment property helps you create a webpage either with a fixed background image or an image that scrolls along with rest of the page. You can even let a background image in CSS inherit background attachment from a parent element.

There are a number of parameters, which you can define to control the background attachment of the webpage, which are defined in the following table.

Syntax	Value	Description	Applies to
background-attachment:	scroll	Use it to make a scrolling background image	All Elements
background-attachment:	fixed	Allows to create a fixed background image	All Elements
background-attachment:	inherit	Allows to inherit background-attachment property from the parent element	All Elements

div
{
background-attachment:fixed;
}

CSS Background (shorthand)

The background (shorthand) property is a mix of all the above discussed syntax. It sets background-color, background-image, background-repeat, background-attachment, and background-position, in one shorthand notation.

Syntax	Value	Description	Applies to
background:	background-image, background-color, background-position, background-repeat	Allows to set all properties in one declaration	All Elements
background:	inherit	Allows to inherit all background properties from the parent element	All Elements

div
{
background:url(‘URL.gif’) #ff0000 10% 15% repeat-x;
}

CSS Font

CSS font properties help you in defining fonts in CSS by describing certain properties for font family, boldness, size, weight and the style of a text. CSS font properties play a vital role in enhancing the look and communication of a website. A clear and easy to read text always encourages a reader to read more.

Table of Contents

For changing font in CSS, you can use 5 font properties and 1 shorthand, they are:

Font-Family
Font-Size
Font-Style
Font-Variant
Font-Weight
Font (shorthand)

CSS Font Family

The font-family property helps you to specify CSS font stacks for your text for example font family names CSS Palatino, CSS mandarin fonts family etc. It is in a “fallback” system, where the text would be displayed in the next font, if the browser doesn’t support the first one. Basically, you can define CSS font family in two ways, either by family- like “times”, “courier”, “Arial”, etc. or by generic-family like “serif”, “sans-serif”, “cursive”, “fantasy” etc. The following table would clarify the point even more.

Syntax	Value	Description	Applies to
font-family:	Arial, Verdana	Can use to create prioritized list of font family names	All Elements
font-family:	“Lucida Roman”	Can use to create prioritized list of generic family names	All Elements
font-family:	inherit	Specifies that the font family should be inherited from the parent element	All Elements

body
{
font-family:Arial, Verdana, Helvetica, sans-serif,”Lucida Grande”;
}

NOTE: Unique fonts which are not installed on user’s machine, is called “Generic Font Family”. If font family contains whitespaces then it should be quoted.

CSS Font Size

The font-size property allows you to set CSS font size in almost all sizes, be it small, medium, large or any other size. You can set the font size even in terms of pixel and also in terms of percentage. Even you can make it inherit font size properties form a parent element.

The following table would clarify all your queries regarding font-size property:

Syntax	Value	Description	Applies to
font-size:	px or % or em	Use to set font-size to a percent of the parent element’s font size	All Elements
font-size:	inherit	Use it to inherit font size properties form a parent element	All Elements

body
{
font-size:5px or 5% or 0.5em;
}

You can use any one value(px, % or em) to set the font size.

CSS Font Style

CSS font style helps you define the style for displaying the texts and CSS fonts. There are certain parameters that you can set to define your font style. The normal value, which is a default italic would make sure that the browser displays text in a normal style. The italic value helps you display your text in an italic font style, oblique value displays text in an oblique font style and you can also inherit font style from the parent element. The following table would clarify the point further.

Syntax	Value	Description	Applies to
font-style:	normal	Use this default value to display a normal font style on browser	All Elements
font-style:	italic	Use this to make browser display an italic font style	All Elements
font-style:	oblique	Use it to make the browser display a oblique font style	All Elements
font-style:	inherit	Use it to inherit the font style from the parent element	All Elements

body
{
font-style:italic;
}

CSS Font Variant

This is the property you can use for defining whether a text should be displayed normally, in small-caps or to be inherited from a parent property. Have a look at the following table and you will have a better idea:

Syntax	Value	Description	Applies to
font-variant:	normal	Use this default to make browser display a normal font	All Elements
font-variant:	small-caps	Allows you to make the broser display font in small caps	All Elements
font-variant:	inherit	Use it to inherit the font variant from the parent element	All Elements

body
{
font-variant:small-caps;
}

CSS Font Weight

This helps you set the weight for your text and how it should be displayed. For example a heading or something of importance must be displayed in a heavy font to draw a viewer’s attention. The below given table would give you an idea about the values you can use to define a font weight property.

Syntax	Value	Description	Applies to
font-weight:	normal	Use this default to defines normal characters	All Elements
font-weight:	bold	Allows you to define thick characters	All Elements
font-weight:	inherit	Use it to inherit the font weight from the parent element	All Elements

div
{
font-weight:bold;
}

CSS Font (shorthand)

This is the CSS font shorthand command for setting all the font properties like font style, font variant, font weight, font size, font family, captioned controls such as buttons, drop-downs, Icon, menu, message box, small caption, status bar, inherit in one declaration.

Syntax	Value	Description	Applies to
font:	font-style, font-variant, font-weight, font-size, line-height, font-family	Sets all font values in one declaration	All Elements
font:	inherit	Use it to inherit all font properties from the parent element	All Elements

div
{
font:italic small-caps bold 12px/18px Arial, Verdana, sans-serif;
}

CSS Text

There are many CSS text properties that you can use for setting CSS text style, CSS text color style, CSS textbox style, CSS text input style, CSS bold style, CSS input style and much more, they are:

Table of Contents

For changing font in CSS, you can use 9 font properties, they are:

color
line-height
letter-spacing
text-align
text-decoration
text-indent
text-transform
vertical-align
white-space

CSS Text Color

This is the property you can use to define CSS text color. For defining the property, you can use color name, hex value or rgb value.

Syntax	Value	Description	Applies to
color:	color name, hex value or rgb value.	Allows you to set color as per color code, hex code and RGB code	All Elements

body
{
color:Red;
}
body
{
color:#ff0000;
}
body
{
color:rgb(255,0,0);
}

CSS Line Height

You can use this property for setting the distance between lines.

The following table would give you a better idea:

Syntax	Value	Description	Applies to
line-height:	normal	Use this default to set a normal line height	All Elements
line-height:	px or % or em	Allows to set a fixed line height in px, pt, cm, etc.	All Elements
line-height:	inherit	Use it to inherit line height from the parent element	All Elements

p
{
line-height:15px or 15% or 0.5em;
}

You can use any one value(px, % or em) to set the line-height.

CSS Letter Spacing

Try this property to increase or decrease the space between characters.

See the table below:

Syntax	Value	Description	Applies to
letter-spacing:	normal	Use this default to keep no extra space between characters	All Elements
letter-spacing:	px or % or em	Use it to define extra space between characters using px or % or em	All Elements

div
{
letter-spacing:15px or 15% or 0.5em;
}

CSS Text Align

These are basically CSS text align properties that help you align the text in the CSS as per your choice.

See the table below:

Syntax	Value	Description	Applies to
text-align:	left	Use it to align text to the left	All Elements
text-align:	right	Use it to align text to the right	All Elements
text-align:	center	Use it to align text to the center	All Elements
text-align:	justify	Use it to justify text by stretching them end to end	All Elements

p
{
text-align:left or right or center or justify;
}

CSS Text Decoration

These are the CSS text decoration properties that help you to decorate text elements in your CSS.

View the table for better understanding:

Syntax	Value	Description	Applies to
text-decoration:	none	Use this default to define a normal text	All Elements
text-decoration:	underline	Use it to define a line below the text	All Elements
text-decoration:	overline	Allows to set a line above the text	All Elements
text-decoration:	line-through	Helps you to set a line through the text	All Elements

a:hover
{
text-decoration:underline;
}
p
{
text-decoration:line-through;
}

CSS Text Indent

This is the property to for indenting the first line of text in an element.

See the table below:

Syntax	Value	Description	Applies to
text-indent:	px or % or em	Allows to define a fixed indentation in px, pt, cm, em	All Elements
text-indent:	inherit	Use it to inherit text indent from the parent element	All Elements

div
{
text-indent:15px or 15% or 0.5em;
}

CSS Text Transform

This is the property that controls the letters in an element.

See the below table for a clearer concept:

Syntax	Value	Description	Applies to
text-transform:	none	Use this default for as it is text rendering with no capitalization	All Elements
text-transform:	capitalize	Use it to make first character of each word in uppercase	All Elements
text-transform:	uppercase	Allows to set all characters to uppercase	All Elements
text-transform:	lowercase	Use it to set all characters to lowercase	All Elements

div
{
text-transform:capitalize;
}

CSS Vertical Align

This property helps you vertically align text elements. See the below table to know more about these properties:

Syntax	Value	Description	Applies to
vertical-align:	top	Use it to align with the top element on the line	All Elements
vertical-align:	middle	Use it to place the element in the middle of the parent element	All Elements
vertical-align:	bottom	Allows you to align with the lowest element on the line	All Elements

table td
{
vertical-align:top;
}

CSS White Space

This property allows you to define how white space inside an element should be handled. See the following table for better understanding:

Syntax	Value	Description	Applies to
white-space:	normal	Use this default to collapse sequences of whitespace into a single whitespace	All Elements
white-space:	pre	Use it to make sure that text only wraps on line breaks	All Elements
white-space:	nowrap	Allows you to make sure that the text never wraps to the next line	All Elements

div
{
white-space:nowrap;
}

CSS Padding

CSS padding properties are normally used to define the space between the element border and the element content and gives you an idea about setting up CSS padding in tables, CSS margin padding, CSS margin padding default value, CSS opera button padding, CSS padding and margins hack and much more. The padding helps you to clear an area around the content of an element. The padding are generally influenced by the background color of an element. You can almost set padding for almost all positions like top, right, bottom, and left padding and also can apply shorthand to set them all at once.

Table of Contents

For changing padding in CSS, you can use 4 padding properties and 1 shorthand, they are:

Padding-Top
Padding-Bottom
Padding-Left
Padding-Right
Padding (shorthand)

CSS Padding Top

You can try CSS padding-top property to specify the top padding of an element. This is compatible and works with all CSS versions. It also can be set in terms of length and percentage but cannot be inherited from a parent property. It also applies to all elements not just to tables.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
padding-top:	px or % or em	Use it to specify a fixed top padding in px, pt, cm	All Elements

div
{
padding-top:15px;
}

NOTE: padding-top property doesnt works properly in all inline html elements.

CSS Padding Bottom

CSS padding-bottom property defines the bottom padding of the element. It works on all CSS versions 1, 2 and 3. It can be set in terms of length and percentage but cannot be inherited from a parent property. It also applies to all elements not just to tables.

See the table below for a better idea:

Syntax	Value	Description	Applies to
padding-bottom:	px or % or em	Allows to define a fixed bottom padding in px, pt, cm	All Elements

div
{
padding-bottom:15px;
}

NOTE: padding-bottom property doesnt works properly in all inline html elements.

CSS Padding Left

You can use CSS padding-left property to specify the left padding of an element. It also works with all versions like CSS 1, CSS 2 and CSS 3. You can set it in terms of length and percentage but cannot inherit from a parent property. It also applies to all elements not just to tables.

The following table would give you a clearer picture:

Syntax	Value	Description	Applies to
padding-left:	px or % or em	Helps you to define a fixed left padding in px, pt, cm	All Elements

div
{
padding-left:15px;
}

CSS Padding Right

CSS padding-right property can be used to define the right padding of an element. It works fine with all CSS versions. It also can be set in terms of length and percentage but cannot be inherited from a parent property. It also applies to all elements not just to tables.

The following table would give you a better idea:

Syntax	Value	Description	Applies to
padding-right:	px or % or em	Use it to set a fixed right padding in px, pt, cm	All Elements

div
{
padding-right:15px;
}

CSS Padding (shorthand)

CSS Padding is powerful shorthand property for setting all the padding properties like padding-top, padding-right, padding-bottom, and padding-left at one declaration. You can apply CSS padding to not just table but to any element. Even, you can apply different padding values to each side of an element.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
padding:	px or % or em	Use it to set sets all the padding properties in one declaration	All Elements

div
{
padding:15px;/* define padding for top, right, bottom, left.*/
}
div
{
padding:15px 15px;/* first for top and bottom, second for right and left.*/
}
div
{
padding:15px 15px 15px;/* first for top, second for right and left, third for bottom.*/
}
div
{
padding:15px 15px 15px 15px;/* for top, right, bottom and left padding.*/
}

CSS Margin

It is important for you to learn CSS margin properties for learning how to set the margin in CSS. This tutorial will offer an in depth knowledge about setting margin in CSS and also inform about various topics like CSS margin auto, CSS margin padding etc.

Table of Contents

You can set margin in top, right, bottom, and left and also can apply CSS Margin shorthand to set them all at once. The margin properties you can use are:

Margin-Top
Margin-Bottom
Margin-Left
Margin-Right
Margin (shorthand)

CSS Margin Top

You can try CSS Margin-top property for specifying the width of the top margin. This is compatible and works with all CSS versions. It can be set by specifying the width for example 10px, 20px etc. or even can be inherited from a parent element.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
margin-top:	px or % or em	Allows to specify a fixed top margin in px, pt, cm	All Elements

div
{
margin-top:15px;
}

CSS Margin Bottom

To set the width of the right hand margin, you must try CSS margin-bottom property. This property is compatible with all CSS versions like 1, 2 and 3 and applies to all elements. These can set by two ways, one by defining the width manually like 10px; 20px etc. or even can be inherited from a parent element.

See the table below for a better idea:

Syntax	Value	Description	Applies to
margin-bottom:	px or % or em	Use this to set a fixed bottom margin in px, pt, cm	All Elements

div
{
margin-bottom:15px;
}

CSS Margin Left

If you are looking to set the width of the right hand margin, you got to use CSS margin-left property. This property works fine with all CSS versions and applies to all elements. Here, you have the option to set the width manually like 10px; 20px etc. or even you can inherit it from a parent element.

The following table would give you a clearer picture:

Syntax	Value	Description	Applies to
margin-left:	px or % or em	Helps you to set a fixed left margin in px, pt, cm	All Elements

div
{
margin-left:15px;
}

CSS Margin Right

You can use CSS margin-right property for setting the width of the right hand margin. This works well with all CSS versions. These can either be done by defining the width for example like 10px, 20px etc. or even can be inherited from a parent element.

The following table would give you a better idea:

Syntax	Value	Description	Applies to
margin-right:	px or % or em	Allows you to set a fixed right margin in px, pt, cm	All Elements

div
{
margin-right:15px;
}

CSS Margin (shorthand)

CSS Margin is a shorthand property that can allow you to specify all the Margin properties like Margin-top, Margin-right, Margin-bottom, and Margin-left at one declaration. CSS margin shorthand allows you to set margin width on all sides of an element.

For example, margin: 10px would mean all four sides have a margin of 10 pixels. Similarly, margin: 10px 20px 30px 40px would mean that top margin is 10px, right margin is 20px, bottom margin is 30px and left margin is 40px.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
margin:	px or % or em or auto	Use this to define all margin properties in one declaration	All Elements

div
{
margin:15px;/* define margin for top, right, bottom, left.*/
}
div
{
margin:15px 15px;/* first for top and bottom, second for right and left.*/
}
div
{
margin:15px 15px 15px;/* first for top, second for right and left, third for bottom.*/
}
div
{
margin:15px 15px 15px 15px;/* for top, right, bottom and left margin.*/
}
div
{
margin:15px auto 15px auto;/* auto makes the layout center align in the browser.*/
}

CSS Border

Knowledge about CSS border properties can allow you to completely customize a border around an element, except for a table. This would solve all your CSS border problems. This property would allow you to change the width, style and color of a border. You can even inherit the border properties from a parent element. This tutorial would also tell you about CSS border precedence, CSS border radius IE, CSS border rounded corners and much more.

You can also use CSS border shorthand to set all of the above discussed aspects in one declaration.

Table of Contents

The commonly used CSS border properties are:

border-width
border-style
border-color
border (shorthand)

CSS Border Width

You can try CSS border-width property for setting the width of an element’s four borders. This property can have from one to four values.

For example, border-width:thin medium thick 10px syntax would mean that the top border is thin, right border is medium, bottom border is thick and left border is 10px. Similarly, you can set border-width:thin medium thick. This would make the top border thin, right and left borders medium and bottom border thick.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
border-width:	thin	Allows to set a thin border	All Elements
border-width:	medium	Can create a medium border	All Elements
border-width:	thick	Allows to set a thick border	All Elements
border-width:	px or % or em	Helps you to define the thickness of the border in px, % or em	All Elements
border-width:	inherit	Use it to inherit border width from the parent element	All Elements

div
{
border-width:5px;/* define top, right, bottom, left.*/
}
div
{
border-width:5px 3px;/* first for top and bottom, second for right and left.*/
}
div
{
border-width:5px 3px 7px;/* first for top, second for right and left, third for bottom.*/
}
div
{
border-width:5px 3px 7px 3px;/* for top, right, bottom and left.*/
}

CSS Border Style

The border-style property is also important for you as it allows you to set the style of an element’s four borders. You can specify particular styles for particular borders.

For example, if you use border-style:dotted solid double dashed. This would mean that the top border is dotted, right border is solid bottom border is double and the left border is dashed. Similarly, border-style:dotted solid double syntax would make the top border dotted, right and left borders solid and bottom border is double. In this same way, border-style:dotted solid would mean top and bottom borders are dotted and right and left borders are solid. You can also set one style for all the borders.

The following table would give you a better idea:

Syntax	Value	Description	Applies to
border-style:	none	Use it when don’t want any border	All Elements
border-style:	dotted	Allows to create a dotted border	All Elements
border-style:	dashed	Use it to create a dashed border	All Elements
border-style:	solid	Helps you to set a solid border	All Elements
border-style:	inherit	Use it to inherit border style from the parent element	All Elements

div
{
border-style:solid;/* define top, right, bottom, left.*/
}
div
{
border-style:dashed solid;/* first for top and bottom, second for right and left.*/
}
div
{
border-style:dashed dotted solid;/* first for top, second for right and left, third for bottom.*/
}
div
{
border-style:dotted solid dashed solid;/* for top, right, bottom and left.*/
}

CSS Border Color

To set the color of an element’s four borders, you must try CSS border-color property. This property can allow you to set the border color for all four borders separately as well as chop and change according to your needs.

A simple syntax of border-color:red green blue pink would make sure that the top border is red, right border is green, bottom border is blue, left border is pink. Similarly, border-color:red green blue would mean top border is red, right and left borders are green and the bottom border is blue. In this same way, you can also set one border color for top and bottom and the other for right and left borders. You can even apply one border color to all four borders.

See the table below for a better idea:

Syntax	Value	Description	Applies to
border-color:	color name, hex value, rgb value	Allows to set the border color in terms of color name, hex value, rgb value	All Elements
border-color:	transparent	Use it to keep the border color transparent	All Elements
border-color:	inherit	Use it to inherit border color from the parent element	All Elements

div
{
border:#ff0000;/* define top, right, bottom, left.*/
}
div
{
border:#ff0000 green;/* first for top and bottom, second for right and left.*/
}
div
{
border:green #ff0000 blue;/* first for top, second for right and left, third for bottom.*/
}
div
{
border:#ff0000 green #000000 rgb(0,0,255);/* for top, right, bottom and left.*/
}

CSS Border (shorthand)

CSS border is a shorthand property that can allow you to specify all border properties like border width, style and color in all four borders of an element and most importantly in a single command.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
border:	border-color, border-width, border-style	Allows to define all border properties in one declaration	All Elements

div
{
border:#ff0000 5px solid;/* for top, right, bottom, left.*/
}
div
{
border-top:green 5px dotted;
}
div
{
border-bottom:rgb(255,0,0) 5px dashed;
}
div
{
border-right:#00ff00 5px solid;
}
div
{
border-left:#0000ff 5px dotted;
}

CSS List

CSS list style properties help you in defining CSS list style color, CSS list style indent, image, type and much more. CSS list style property is a very powerful and important thing in CSS learning.

Table of Contents

There are four CSS list style properties, they are:

list-style-type
list-style-position
list-style-image
list-style (shorthand)

CSS List Style Type

This is the property you can use to specify the type of list-item marker in a list. This is a really important aspect. It helps you to define so many parameters and has lots of possibilities.

The following table will clarify its possibilities further:

Unordered Lists

Syntax	Value	Description	Applies to
list-style-type:	none	Use it when you need no marker	All Elements
list-style-type:	circle	Allows to set the marker as a circle	All Elements
list-style-type:	disc	Use this default to set the marker as a filled circle	All Elements
list-style-type:	square	Use it to set the marker as a square	All Elements

ul
{
list-style-type:disc;
}

Ordered Lists

Syntax	Value	Description	Applies to
list-style-type:	armenian	Use it when the marker is traditional Armenian numbering	All Elements
list-style-type:	decimal	Use it when the marker is a number	All Elements
list-style-type:	decimal-leading-zero	Use it when the marker is a number padded by initial zeros	All Elements
list-style-type:	lower-alpha	Allows to set the marker as lower-alpha	All Elements
list-style-type:	lower-greek	use it to set the marker as lower-greek	All Elements
list-style-type:	lower-latin	helps to set the marker as lower-latin	All Elements
list-style-type:	lower-roman	Allows to set the marker as lower-roman	All Elements
list-style-type:	upper-alpha	Use it to set the marker as upper-alpha	All Elements
list-style-type:	upper-latin	Helps you to set the marker as upper-latin	All Elements
list-style-type:	upper-roman	Use it to set the marker is upper-roman	All Elements

ol
{
list-style-type:decimal-leading-zero;
}

CSS List Style Position

This is the property you can use to define whether the list-item markers should appear inside or outside the content flow. If you define it for inside then it will indent the marker and the text. This you can use if you want to make the bullets appear inside the content flow. You can also use the outside value, which is the default.

This value will allow you to keep the marker to the left of the text making the bullets appear outside the content flow. The list-style-position property also allows you to inherit the list-style-position property from a parent property.

See the following table:

Syntax	Value	Description	Applies to
list-style-position:	inside	Use it to make bullets appear inside the content flow	All Elements
list-style-position:	outside	Use this default to make the bullets appear outside the content flow	All Elements
list-style-position:	inherit	Use it to inherit list style position from the parent element	All Elements

ul
{
list-style-position:outside;
}

CSS List Style Image

This is the property you can use to replace the list-item marker with an image. There are these values to it. One is of none, which is the default one. If you use this then there will be no image displayed. Instead, the list-style-type property will define what type of list marker will be rendered.

Another one is URL. It will help you to define the path of an image in the web. The list-style-image property also allows you to inherit the list-style-image property from a parent property.

The following table would give you a better idea:

Syntax	Value	Description	Applies to
list-style-image:	url	Use the path to an image as a list-item marker	All Elements
list-style-image:	none	Try this default if you don’t want to display an image	All Elements
list-style-image:	inherit	Use it to inherit list style image from the parent element	All Elements

ul
{
list-style-image:url(“image.gif”);
}

CSS List Style (shorthand)

CSS List Style is a shorthand property that can allow you to specify all lists properties like list-style-image, list-style-position and list-style-type in a single command.

Have a look at the following table and you would understand it better:

Syntax	Value	Description	Applies to
list-style:	list-style-type, list-style-image, list-style-position	Allows to set all the properties for a list in one declaration	All Elements

CSS Background

CSS Background Image

CSS Background Color

CSS Background Repeat

CSS Background Position

CSS Background Attachment

CSS Background (shorthand)

CSS Font

CSS Font Family

CSS Font Size

CSS Font Style

CSS Font Variant

CSS Font Weight

CSS Font (shorthand)

CSS Text

CSS Text Color

CSS Line Height

CSS Letter Spacing

CSS Text Align

CSS Text Decoration

CSS Text Indent

CSS Text Transform

CSS Vertical Align

CSS White Space

CSS Padding

CSS Padding Top

CSS Padding Bottom

CSS Padding Left

CSS Padding Right

CSS Padding (shorthand)

CSS Margin

CSS Margin Top

CSS Margin Bottom

CSS Margin Left

CSS Margin Right

CSS Margin (shorthand)

CSS Border

CSS Border Width

CSS Border Style

CSS Border Color

CSS Border (shorthand)

CSS List

CSS List Style Type

Unordered Lists

Ordered Lists

CSS List Style Position

CSS List Style Image

CSS List Style (shorthand)

Leave a Reply

More in solution

About Me:

Szabi Kisded

Mega Plugin Bundle:

CodeCanyon Portfolio:

Online Courses:

Recommended Theme:

Popular Posts:

seo

Domain Names 101 – Get the most out of your new site

announcements

A new project idea came to my mind

seo

Sitemaps 101? Benefits of and Tips on Designing a Sitemap

wordpress

Top 10 Things You Should Know About WordPress Multisite

plugins

Common Mistakes to Avoid When Building a Multilingual WordPress Site

Latest Posts:

business

Does Your Site Need a Web Designer or a Web Developer?

marketing

Building an Opt-In List, Building Relationships

wordpress

How to Add Author Bios to Your WordPress Theme

coding

Development Tools I Can’t Live Without

plugins

Common Mistakes to Avoid When Building a Multilingual WordPress Site