Connect with us

CSS Basic Tutorial – part 2

solution

CSS Basic Tutorial – part 2

Published on

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:

SyntaxValueDescriptionApplies to
background-image:url(‘URL’)Use it to link a web image to set the backgroundAll Elements
background-image:noneUse when you don’t need any backroundAll Elements
background-image:inheritAllows to inherit an image background from a parent elementAll Elements

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

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.

SyntaxValueDescriptionApplies to
background-color:#ff0000,
rgb(0,255,255),
Red		Sets background by defining color name, hex number or RGB number.All Elements
background-color:transparentAllows to keep the backgound color transparentAll Elements
background-color:inheritUse it to inherit background color from a parent elementAll Elements

  1. body
  2. {
  3.     background-color:Red or #ff0000 or rgb(255, 0, 0);
  4. }

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:

SyntaxValueDescriptionApplies to
background-repeat:repeatUse it to repeat backgound image both vertically and horizontallyAll Elements
background-repeat:repeat-xUse it to repeat background image only horizontallyAll Elements
background-repeat:repeat-yAllows to repeat background image only verticallyAll Elements
background-repeat:no-repeatUse it if you don’t want to repeat a background imageAll Elements
background-repeat:inheritAllows to inherit background-repeat property from the parent elementAll Elements

  1. body
  2. {
  3.     background-repeat:repeat-x;
  4. }
  5. div
  6. {
  7.     background-repeat:repeat-y;
  8. }
  9. span
  10. {
  11.     background-repeat:no-repeat;
  12. }
  13. table
  14. {
  15.     background-repeat:repeat;
  16. }

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:

SyntaxValueDescriptionApplies 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:inheritAllows to inherit background-position property from the parent elementAll Elements

  1. div
  2. {
  3.     background-position:x(% or px) y(% or px);
  4. }

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.

SyntaxValueDescriptionApplies to
background-attachment:scrollUse it to make a scrolling background imageAll Elements
background-attachment:fixedAllows to create a fixed background imageAll Elements
background-attachment:inheritAllows to inherit background-attachment property from the parent elementAll Elements

  1. div
  2. {
  3.     background-attachment:fixed;
  4. }

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.

SyntaxValueDescriptionApplies to
background:background-image,
background-color,
background-position,
background-repeat		Allows to set all properties in one declarationAll Elements
background:inheritAllows to inherit all background properties from the parent elementAll Elements

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

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.

SyntaxValueDescriptionApplies to
font-family:Arial, VerdanaCan use to create prioritized list of font family namesAll Elements
font-family:“Lucida Roman”Can use to create prioritized list of generic family namesAll Elements
font-family:inheritSpecifies that the font family should be inherited from the parent elementAll Elements

  1. body
  2. {
  3.     font-family:Arial, Verdana, Helvetica, sans-serif,”Lucida Grande”;
  4. }

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:

SyntaxValueDescriptionApplies to
font-size:px or % or emUse to set font-size to a percent of the parent element’s font sizeAll Elements
font-size:inheritUse it to inherit font size properties form a parent elementAll Elements

  1. body
  2. {
  3.     font-size:5px or 5% or 0.5em;
  4. }

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.

SyntaxValueDescriptionApplies to
font-style:normalUse this default value to display a normal font style on browserAll Elements
font-style:italicUse this to make browser display an italic font styleAll Elements
font-style:obliqueUse it to make the browser display a oblique font styleAll Elements
font-style:inheritUse it to inherit the font style from the parent elementAll Elements

  1. body
  2. {
  3.     font-style:italic;
  4. }

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:

SyntaxValueDescriptionApplies to
font-variant:normalUse this default to make browser display a normal fontAll Elements
font-variant:small-capsAllows you to make the broser display font in small capsAll Elements
font-variant:inheritUse it to inherit the font variant from the parent elementAll Elements

  1. body
  2. {
  3.     font-variant:small-caps;
  4. }

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.

SyntaxValueDescriptionApplies to
font-weight:normalUse this default to defines normal charactersAll Elements
font-weight:boldAllows you to define thick charactersAll Elements
font-weight:inheritUse it to inherit the font weight from the parent elementAll Elements

  1. div
  2. {
  3.     font-weight:bold;
  4. }

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.

SyntaxValueDescriptionApplies to
font:font-style, font-variant, font-weight,
font-size, line-height, font-family		Sets all font values in one declarationAll Elements
font:inheritUse it to inherit all font properties from the parent elementAll Elements

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

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.

SyntaxValueDescriptionApplies to
color:color name,
hex value or
rgb value.		Allows you to set color as per color code, hex code and RGB codeAll Elements
Related:  Best Ecommerce Plugins for WordPress

  1. body
  2. {
  3.     color:Red;
  4. }
  5. body
  6. {
  7.     color:#ff0000;
  8. }
  9. body
  10. {
  11.     color:rgb(255,0,0);
  12. }

CSS Line Height

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

The following table would give you a better idea:

SyntaxValueDescriptionApplies to
line-height:normalUse this default to set a normal line heightAll Elements
line-height:px or % or emAllows to set a fixed line height in px, pt, cm, etc.All Elements
line-height:inheritUse it to inherit line height from the parent elementAll Elements

  1. p
  2. {
  3.     line-height:15px or 15% or 0.5em;
  4. }

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:

SyntaxValueDescriptionApplies to
letter-spacing:normalUse this default to keep no extra space between charactersAll Elements
letter-spacing:px or % or emUse it to define extra space between characters using px or % or emAll Elements

  1. div
  2. {
  3.     letter-spacing:15px or 15% or 0.5em;
  4. }

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:

SyntaxValueDescriptionApplies to
text-align:leftUse it to align text to the leftAll Elements
text-align:rightUse it to align text to the rightAll Elements
text-align:centerUse it to align text to the centerAll Elements
text-align:justifyUse it to justify text by stretching them end to endAll Elements

  1. p
  2. {
  3.     text-align:left or right or center or justify;
  4. }

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:

SyntaxValueDescriptionApplies to
text-decoration:noneUse this default to define a normal textAll Elements
text-decoration:underlineUse it to define a line below the textAll Elements
text-decoration:overlineAllows to set a line above the textAll Elements
text-decoration:line-throughHelps you to set a line through the textAll Elements

  1. a:hover
  2. {
  3.     text-decoration:underline;
  4. }
  5. p
  6. {
  7.     text-decoration:line-through;
  8. }

CSS Text Indent

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

See the table below:

SyntaxValueDescriptionApplies to
text-indent:px or % or emAllows to define a fixed indentation in px, pt, cm, emAll Elements
text-indent:inheritUse it to inherit text indent from the parent elementAll Elements

  1. div
  2. {
  3.     text-indent:15px or 15% or 0.5em;
  4. }

CSS Text Transform

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

See the below table for a clearer concept:

SyntaxValueDescriptionApplies to
text-transform:noneUse this default for as it is text rendering with no capitalizationAll Elements
text-transform:capitalizeUse it to make first character of each word in uppercaseAll Elements
text-transform:uppercaseAllows to set all characters to uppercaseAll Elements
text-transform:lowercaseUse it to set all characters to lowercaseAll Elements

  1. div
  2. {
  3.     text-transform:capitalize;
  4. }

CSS Vertical Align

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

SyntaxValueDescriptionApplies to
vertical-align:topUse it to align with the top element on the lineAll Elements
vertical-align:middleUse it to place the element in the middle of the parent elementAll Elements
vertical-align:bottomAllows you to align with the lowest element on the lineAll Elements

  1. table td
  2. {
  3.     vertical-align:top;
  4. }

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:

SyntaxValueDescriptionApplies to
white-space:normalUse this default to collapse sequences of whitespace into a single whitespaceAll Elements
white-space:preUse it to make sure that text only wraps on line breaksAll Elements
white-space:nowrapAllows you to make sure that the text never wraps to the next lineAll Elements

  1. div
  2. {
  3.     white-space:nowrap;
  4. }

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:

SyntaxValueDescriptionApplies to
padding-top:px or % or emUse it to specify a fixed top padding in px, pt, cmAll Elements

  1. div
  2. {
  3.     padding-top:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
padding-bottom:px or % or emAllows to define a fixed bottom padding in px, pt, cmAll Elements

  1. div
  2. {
  3.     padding-bottom:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
padding-left:px or % or emHelps you to define a fixed left padding in px, pt, cmAll Elements

  1. div
  2. {
  3.     padding-left:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
padding-right:px or % or emUse it to set a fixed right padding in px, pt, cmAll Elements

  1. div
  2. {
  3.     padding-right:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
padding:px or % or emUse it to set sets all the padding properties in one declarationAll Elements

  1. div
  2. {
  3.     padding:15px;/* define padding for top, right, bottom, left.*/
  4. }
  5. div
  6. {
  7.     padding:15px 15px;/* first for top and bottom, second for right and left.*/
  8. }
  9. div
  10. {
  11.     padding:15px 15px 15px;/* first for top, second for right and left, third for bottom.*/
  12. }
  13. div
  14. {
  15.     padding:15px 15px 15px 15px;/* for top, right, bottom and left padding.*/
  16. }

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:

SyntaxValueDescriptionApplies to
margin-top:px or % or emAllows to specify a fixed top margin in px, pt, cmAll Elements

  1. div
  2. {
  3.     margin-top:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
margin-bottom:px or % or emUse this to set a fixed bottom margin in px, pt, cmAll Elements

  1. div
  2. {
  3.     margin-bottom:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
margin-left:px or % or emHelps you to set a fixed left margin in px, pt, cmAll Elements

  1. div
  2. {
  3.     margin-left:15px;
  4. }

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:

SyntaxValueDescriptionApplies to
margin-right:px or % or emAllows you to set a fixed right margin in px, pt, cmAll Elements

  1. div
  2. {
  3.     margin-right:15px;
  4. }

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.

Related:  Top 10 Best WordPress Translation Plugins

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:

SyntaxValueDescriptionApplies to
margin:px or % or em or autoUse this to define all margin properties in one declarationAll Elements

  1. div
  2. {
  3.     margin:15px;/* define margin for top, right, bottom, left.*/
  4. }
  5. div
  6. {
  7.     margin:15px 15px;/* first for top and bottom, second for right and left.*/
  8. }
  9. div
  10. {
  11.     margin:15px 15px 15px;/* first for top, second for right and left, third for bottom.*/
  12. }
  13. div
  14. {
  15.     margin:15px 15px 15px 15px;/* for top, right, bottom and left margin.*/
  16. }
  17. div
  18. {
  19.     margin:15px auto 15px auto;/* auto makes the layout center align in the browser.*/
  20. }

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:

SyntaxValueDescriptionApplies to
border-width:thinAllows to set a thin borderAll Elements
border-width:mediumCan create a medium borderAll Elements
border-width:thickAllows to set a thick borderAll Elements
border-width:px or % or emHelps you to define the thickness of the border in px, % or emAll Elements
border-width:inheritUse it to inherit border width from the parent elementAll Elements

  1. div
  2. {
  3.     border-width:5px;/* define top, right, bottom, left.*/
  4. }
  5. div
  6. {
  7.     border-width:5px 3px;/* first for top and bottom, second for right and left.*/
  8. }
  9. div
  10. {
  11.     border-width:5px 3px 7px;/* first for top, second for right and left, third for bottom.*/
  12. }
  13. div
  14. {
  15.     border-width:5px 3px 7px 3px;/* for top, right, bottom and left.*/
  16. }

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:

SyntaxValueDescriptionApplies to
border-style:noneUse it when don’t want any borderAll Elements
border-style:dottedAllows to create a dotted borderAll Elements
border-style:dashedUse it to create a dashed borderAll Elements
border-style:solidHelps you to set a solid borderAll Elements
border-style:inheritUse it to inherit border style from the parent elementAll Elements

  1. div
  2. {
  3.     border-style:solid;/* define top, right, bottom, left.*/
  4. }
  5. div
  6. {
  7.     border-style:dashed solid;/* first for top and bottom, second for right and left.*/
  8. }
  9. div
  10. {
  11.     border-style:dashed dotted solid;/* first for top, second for right and left, third for bottom.*/
  12. }
  13. div
  14. {
  15.     border-style:dotted solid dashed solid;/* for top, right, bottom and left.*/
  16. }

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:

SyntaxValueDescriptionApplies to
border-color:color name, hex value, rgb valueAllows to set the border color in terms of color name, hex value, rgb valueAll Elements
border-color:transparentUse it to keep the border color transparentAll Elements
border-color:inheritUse it to inherit border color from the parent elementAll Elements

  1. div
  2. {
  3.     border:#ff0000;/* define top, right, bottom, left.*/
  4. }
  5. div
  6. {
  7.     border:#ff0000 green;/* first for top and bottom, second for right and left.*/
  8. }
  9. div
  10. {
  11.     border:green #ff0000 blue;/* first for top, second for right and left, third for bottom.*/
  12. }
  13. div
  14. {
  15.     border:#ff0000 green #000000 rgb(0,0,255);/* for top, right, bottom and left.*/
  16. }

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:

SyntaxValueDescriptionApplies to
border:border-color, border-width, border-styleAllows to define all border properties in one declarationAll Elements

  1. div
  2. {
  3.     border:#ff0000 5px solid;/* for top, right, bottom, left.*/
  4. }
  5. div
  6. {
  7.     border-top:green 5px dotted;
  8. }
  9. div
  10. {
  11.     border-bottom:rgb(255,0,0) 5px dashed;
  12. }
  13. div
  14. {
  15.     border-right:#00ff00 5px solid;
  16. }
  17. div
  18. {
  19.     border-left:#0000ff 5px dotted;
  20. } 

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

SyntaxValueDescriptionApplies to
list-style-type:noneUse it when you need no markerAll Elements
list-style-type:circleAllows to set the marker as a circleAll Elements
list-style-type:discUse this default to set the marker as a filled circleAll Elements
list-style-type:squareUse it to set the marker as a squareAll Elements

  1. ul
  2. {
  3.     list-style-type:disc;
  4. }

Ordered Lists

SyntaxValueDescriptionApplies to
list-style-type:armenianUse it when the marker is traditional Armenian numberingAll Elements
list-style-type:decimalUse it when the marker is a numberAll Elements
list-style-type:decimal-leading-zeroUse it when the marker is a number padded by initial zerosAll Elements
list-style-type:lower-alphaAllows to set the marker as lower-alphaAll Elements
list-style-type:lower-greekuse it to set the marker as lower-greekAll Elements
list-style-type:lower-latinhelps to set the marker as lower-latinAll Elements
list-style-type:lower-romanAllows to set the marker as lower-romanAll Elements
list-style-type:upper-alphaUse it to set the marker as upper-alphaAll Elements
list-style-type:upper-latinHelps you to set the marker as upper-latinAll Elements
list-style-type:upper-romanUse it to set the marker is upper-romanAll Elements

  1. ol
  2. {
  3.     list-style-type:decimal-leading-zero;
  4. }

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:

SyntaxValueDescriptionApplies to
list-style-position:insideUse it to make bullets appear inside the content flowAll Elements
list-style-position:outsideUse this default to make the bullets appear outside the content flowAll Elements
list-style-position:inheritUse it to inherit list style position from the parent elementAll Elements

  1. ul
  2. {
  3.     list-style-position:outside;
  4. }

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:

SyntaxValueDescriptionApplies to
list-style-image:urlUse the path to an image as a list-item markerAll Elements
list-style-image:noneTry this default if you don’t want to display an imageAll Elements
list-style-image:inheritUse it to inherit list style image from the parent elementAll Elements

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

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:

SyntaxValueDescriptionApplies to
list-style:list-style-type,
list-style-image,
list-style-position		Allows to set all the properties for a list in one declarationAll Elements

Usage:

  1. ul
  2. {
  3.     list-style:disc url(“image.gif”) outside;
  4. }
Continue Reading
You may also like...
Related Topics:

We are a WordPress plugin developer company that focuses on useful WordPress plugin creation and empowering people to earn passive incomes from their blogs. We build unique and groundbreaking plugins that will revolutionize your blog!

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in solution

    Sign up for our newsletter and get a free affiliate e-book!

    About Me:

    Szabi Kisded

    Hi, my name is Szabi and I'm documenting my journey earning an online (semi)passive income. Learn more

    Mega Plugin Bundle:

    CodeCanyon Portfolio:

    Online Courses:

    Recommended Theme:

    Popular Posts:

    plugins

    10 Coming Soon Plugins for WordPress Sites

    plugins

    9 WordPress Author Bio Plugins for Adding Authority to Your Blog Posts

    wordpress

    SSL For The Win – SSL Setup for WordPress Websites

    themes

    Extra – a Great WordPress Theme by Elegant Themes: The Ultimate Review

    themes

    18 Feminine WordPress Themes for Creative, Stylish & Elegant Sites

    Latest Posts:

    wordpress

    7 Key Benefits of WordPress

    By 18/02/2020

    seo

    How To Update Your Site for The Google Sitelinks Search Box Feature

    By 16/02/2020

    seo

    Annual SEO Spring Clean – Your Quick SEO Checklist!

    By 12/02/2020

    wordpress

    SSL For The Win – SSL Setup for WordPress Websites

    By 01/02/2020

    themes

    18 Feminine WordPress Themes for Creative, Stylish & Elegant Sites

    By 27/01/2020
    To Top