solution
CSS Basic Tutorial – part 2
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 |
Usage:
- ul
- {
- list-style:disc url(“image.gif”) outside;
- }
