If we want to apply same styling to multiple selectors then they can be declared together. This is called “grouping”.Just separate the selectors with a comma.

Syntax:

Example:

For example, if <h1>, <h2>, and <h3> share they same style, they can be declared together as follows:

You can combine various ID selectors together as shown below:

 

CSS Class Selector

CSS classes are set of styling rules that can be applied or assigned to the HTML entity using it’s class attribute and all the HTML elements having that class assigned will be assigned the styling as per the definition of the defined CSS class.

Syntax

The syntax for declaring a Class selector is as:

Example:

To apply this style to the HTML, using the following code:

If you want to use the same class name for different selector , but each with a different styling behavior as per their selector. This is achieved by using the or prefix the dot with the HTML Selector name.

Example:

For example, if we have the following CSS declaration:

Both the special class have the different behavior based on their selector.

Applying Multiple CSS Classes

It is possible to assign multiple classes at the same time for the class attribute of the HTML Entity and the classes will apply their styling to the element.

Example:

The above classes can be applied as follows:

 

 

HTML Entities can be accessed using their ID attribute. So we can use ID as a selector for the HTML Entities, and we can create a set of styling rules for the HTML entity having the defined value for their ID attribute.

Syntax:

Example:

This CSS rule be applied to HTML Element having ID attribute value “nav”

We can define styling rules for a selected HTML Tag having specific value for their ID attribute

Means this CSS can be applied only on <p></p> tag having ID=”nav”

Tag or Type selector enable us to define CSS for a HTML Element(tag), and all the occurrence of that HTML tags will be assigned defined CSS by default.

Syntax:

Example:

Means all the occurrence of <b> </b> element will have color = red.

CSS Scrollbars gives us way to handle cases when there is overflow of the content for an HTML Element Container.

We can add “Inline scrollbars” by creating a container smaller than its contents. This can be accomplished in conjunction CSS Overflow property.

Note:- The overflow property is supported by all major browsers.

Here is the list of possible values for the overflow property –

Value	Description
visible	Contents will be visible completely regardless of the dimensions on the container.
hidden	Overflow contents will be hidden.
scroll	Vertical or/and horizontal scroll bar added to the container.
auto	Scorllbar added if contents overflows

Example:

auto  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using	hidden  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using
visible  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using	scroll  It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using

When using computer we have seen many different style for mouse cursor icons. A normal mouse cursor icon looks like a “I” symbol or a skewed arrow when selecting text. CSS Cursors property enables us to change the type of cursor to be displayed when pointing on an element.

Here is the list of available cursor style –

CSS Cursor Value	Result
crosshair	Mouse cursor is set to crosshair
pointer	Mouse cursor is set to pointer
text	Mouse cursor is set to text
move	Mouse cursor is set to move
wait	Mouse cursor is set to wait
help	Mouse cursor is set to help
progress	Mouse cursor is set to progress
not-allowed	Mouse cursor is set to not-allowed
no-drop	Mouse cursor is set to no-drop
no-vertical-text	Mouse cursor is set to no-vertical-text
all-scroll	Mouse cursor is set to all-scroll
col-resize	Mouse cursor is set to col-resize
row-resize	Mouse cursor is set to row-resize
e-resize	Mouse cursor is set to e-resize
ne-resize	Mouse cursor is set to ne-resize
n-resize	Mouse cursor is set to n-resize
nw-resize	Mouse cursor is set to nw-resize
w-resize	Mouse cursor is set to w-resize
sw-resize	Mouse cursor is set to sw-resize
s-resize	Mouse cursor is set to s-resize
se-resize	Mouse cursor is set to se-resize

Padding specifies the space between the content of an HTML Element and its border. We can specify padding up to the four sides, CSS padding are specified in a same way as for borders – they can be set individually for each side, or all sides at once. Padding can be specified in 3 ways: length, percentage, or auto.

Padding on all Sides:

Example Code:

Output:

Padding of 20 pixels on all four sides.

Padding for Individual Side

If you don’t want the padding to be applied to all four sides, or if you want each side to have different padding applied, you can use the following properties:

padding-top
padding-right
padding-bottom
padding-left

Example Code:

Output:

This text has a left padding of 20 pixels.

Padding Property in CSS

Padding property enable us to set all four padding in one declaration. This method uses a shorthand property for setting padding-top, padding-right, padding-bottom, and padding-left in the one place. This method is fast.

If there is only one value, it applies to all sides. If there are two values, the top and bottom paddings are set to the first value and the right and left paddings are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Variation	Description
padding:10px;	All four sides have a padding of 10 pixels.
padding:10px 20px;	Top and bottom have a padding of 10 pixels. Right and left have a padding of 20 pixels.
padding:10px 20px 30px;	Top is 10px Left and right are 20px Bottom is 30px
padding:10px 20px 30px 40px;	Top is 10px Right is 20px Bottom is 30px Left is 40px

HTML List Element used to display numbered or bulleted points on a web page, CSS List Properties helps us to control list type, position, style etc for the HTML List Elements.

List Element can be of two type:

Unordered lists – List items are presented with bullets.

Ordered lists – List items are presented with numbers or letters in a specific order.

Following is a list of basic five CSS properties for HTML List Element –

Property	Description
list-style-type	This property specifies the type of marker to be added to the HTML List Item. Possible Values – disc,circle,square,decimal,lower-roman etc.
list-style-position	This property specifies the list-item markers will added inside or outside of the HTML List Item. Possible Values – inside,outside
list-style-image	This property specifies an image as marker for the HTML List Item.
list-style	This property specifies all the properties for HTML List Item in one declaration. This is know as shorthand property too.
marker-offset	This property specifies space between marker and the HTML List Item content.

List Style Type

This property specifies the type of marker to be added to the HTML List Item.

Example Code:

Output:

• List item one
• List item two

1. List item one
2. List item two

List Style Position

This property specifies the list-item markers will added inside or outside of the HTML List Item. Possible Values.

Example Code:

Output:

• List item one
• List item two

• List item one
• List item two

1. List item one
2. List item two

1. List item one
2. List item two

List Style Image

This property specifies an image as marker for the HTML List Item.

Example Code:

Output:

• List item one
• List item two

1. List item one
2. List item two

List Style

This property specifies all the properties for HTML List Item in one declaration. This is know as shorthand property too.

Example Code:

Output:

• List item one
• List item two

1. List item one
2. List item two

Marker Offset

This property specifies space between marker and the HTML List Item content.

Example Code:

Output:

• List item one
• List item two

1. List item one
2. List item two

Margins specifies the space around the border of a HTML Element, and it specifies the spacing among the different HTML Elements. We can specify margins up to the four sides, CSS margins are specified in a same way as for borders – they can be set individually for each side, or all sides at once.

Margins on all Sides:

Example Code:

Output:

Margins for Individual Side

If you don’t want the margin to be applied to all four sides, or if you want each side to have different margins applied, you can use the following properties:

margin-top
margin-right
margin-bottom
margin-left

Example Code:

Output:

This text has a left margin of 20 pixels.

Margin Property

Margin property enable us to set all four margins in one declaration. This method uses a shorthand property for setting margin-top, margin-right, margin-bottom, and margin-left in the one place. This method is fast.

It is not necessary to provide different values for all four sides. We can set one, two, three, or four values. If there is only one value, it applies to all sides. If there are two values, the top and bottom margins are set to the first value and the right and left margins are set to the second. If there are three values, the top is set to the first value, the left and right are set to the second, and the bottom is set to the third. If there are four values, they apply to the top, right, bottom, and left, respectively.

Variation	Description
margin:10px;	All four sides have a margin of 10 pixels.
margin:10px 20px;	Top and bottom have a margin of 10 pixels. Right and left have a margin of 20 pixels.
margin:10px 20px 30px;	Top is 10px Left and right are 20px Bottom is 30px
margin:10px 20px 30px 40px;	Top is 10px Right is 20px Bottom is 30px Left is 40px

CSS Borders allow us to completely customize the appearance of the borders that appear around HTML Elements. CSS Border properties gives us way to specify the width,style and color of an HTML Element’s border.We use the border-width, border-style, and border-color properties.

Property	Description
border-width	This property specifies thickness of your border for the HTML Element.
border-style	This property specifies colors for the border can be any color defined by RGB, hexadecimal, or key terms.
border-color	This property specifies what style of border to display for the HTML Element. Example – none,solid,dotted,dashed,double,groove,ridge,inset,outset and hidden

 

Border Style

The border-style property specifies what style of border to display.Borders can have the following possible style values

none,solid,dotted,dashed,double,groove,ridge,inset,outset and hidden

Example Code:

Output:

This is a border with none width.

This is a solid border.

This is a dahsed border.

This is a double border.

This is a groove border.

This is aridge border.

This is a inset border.

This is a outset border.

This is a hidden border.

Borders for Each Side

In CSS we can specify different borders properties for four different sides:

Side	Properties
Bottom	border-bottom-color border-bottom-style border-bottom-width
Left	border-left-color border-left-style border-left-width
Right	border-right-color border-right-style border-right-width
Top	border-top-color border-top-style border-top-width

Example Code:

This is a a border with four different styles.

Border Shorthand property

We can specify all the individual border properties in one property. This is called a shorthand property.

Syntax:

Example Code:

 

CSS gives us better way to add styling to the HTML Tables, we can set various properties for HTML Table using CSS.

We can set CSS using table, th, tr, and td as selectors.

Property	Description
empty-cells	This property specifies whether the border should be shown if a cell is empty for the HTML Table.
border-collapse	This property specifies whether the adjacent borders that touch each other or each cell should keep borders separate for HTML Table.
border-spacing	This property specifies horizontal and vertical cellspacing that separates adjacent cells for the HTML Table.
table-layout	This property specifies lay out of the HTML Table. Example – fixed, auto or inherit.
caption-side	This property specifies the placement of the caption for HTML Table. Example – top,bottom,left,right.

CSS Fonts property allows us control the way content or text being presented on the web page, using CSS Fonts we can add more styling and formatting to the content on a web page.

Here is the list of common CSS Fonts Properties –

Property	Description
font-family	This property specifies the face/family of the font for the HTML Element. Example – Serif,Sans-serif,Mono space
font-style	This property specifies the style of the font for the HTML Element. Example – Normal,Italic,Oblique
font-variant	This property sets the font to be small-caps for HTML Element
font-stretch	This property can be used for condensing or expanding your font for the HTML Element. Example – Normal,Wider,Narrower etc.
font-weight	This property specifies how bold will be the the font for the HTML Element. Example – Bold,Bolder,Lighter etc.
font-size	This property specifies the size of the font for the HTML Element. Example – Small,Medium,Large etc.
font	This is shorthand property can be used to set all properties of the font for the HTML Element.

CSS Font Family

This property specifies the face/family of the font for the HTML Element. Example – Serif,Sans-serif, Monospace

Example Code:

Output:

This text is rendered in sans serif font .

CSS Font Style

This property specifies the style of the font for the HTML Element. Example – Normal,Italic,Oblique

Example Code:

Output:

This text is in italics.

CSS Font Variant

This property sets the font to be small-caps for HTML Element.

Example Code:

Output:

This Text in Small Caps.

CSS Font Stretch

This property can be used for condensing or expanding your font for the HTML Element. Example – Normal,Wider,Narrower etc.

Example Code:

Expanded version of the font.

CSS Font Weight

This property specifies how bold will be the the font for the HTML Element. Example – Bold,Bolder,Lighter etc.

Example Code:

Output:

This text is in bold.

CSS Font Size

This property specifies the size of the font for the HTML Element. Example – Small,Medium,Large etc.

Example Code:

Output:

This text is using a font size x-large;.

CSS Font Property

This is shorthand property can be used to set all properties of the font for the HTML Element.

Example Code:

Output:

The styles for this text has been specified with the ‘font’ shorthand property.