CSS

CSS Tutorial-Part 2

January 18, 2020 comments off

List=> List property is used to create a list. There are two types of lists:
. Unordered lists- An unordered list uses bulleted as the list item markers. Ordered lists – An ordered list uses numbers or letters as the list item markers.

List-style-image- In this, an image is used as the list item marker. We can set this property to none or a web address of an image.

Ex-

List-style-position- It specifies the position of the list item marker. you can set this property to either inside or outside.

Ex-

list-style=> It is a shorthand property for list-style-type, list-style-image and list-style- position.

Ex-

Order: list-style-type, list-style-position, list-style-image.

border-style=> This property sets border style of an element. We can set this property to none, hidden, dashed, solid, double, groove, ridge, inset, outset.

Ex-

Border-width=> It sets width of element’s border. We can set this property to thin, medium, thick, length in the form of px.

Ex-

Border-color=> It sets color of border. We can set this property to transparent and color value.

Ex-

Table= . border, border-collapse, border-spacing, caption-side, empty-cells, table-layout,

For specifying table we use border property.
Ex- table, th, td {boder: 2 px solid blue;}

This property sets whether the table borders are collapsed into a single border or detached. We can set a property to separate (default)and collapse.
Ex- table {border-collapse:collapse;}

This property sets whether the table borders are collapsed into a single border or detached. We can set a property to separate (default)and collapse.
Ex- table {border-collapse:collapse;}

Ex-

This property is used to place a caption for the table. We can set this property to top (default) or bottom.

Ex-

Empty-cells= This Property is used to set whether or not to display borders and background on empty cells in a table.it will work only if the border-collapse is set to separate. we can set this property to show (default) or hide.

Ex-

table-layout= This property is used to set table layout. We can set this property either auto (default) or fixed.

Ex-

How to set Table width and Height- we use width and height property to set table width and height.
We can also set table heading (th) width and heading.

table {width:100%;}
th {height:10px;}

How to set Table Padding- This property is used to control the space between the border and the content in a table, this is used on and elements. th, td
{padding:10px;}

How to set Table color-

Display- this property is used to define how an element should display. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

inline, block, flex, inline-block, inline-flex, inline-table, list-item, run-in, table, table-row-group, table-caption, table-column-group, table-header-group, table-footer-group, table-cell, table-column, table-column, table-row, none.

Display- block-level Elements- A Block-level element always start on a new line and takes up the full width available.

Visibility- This property is used to specify whether or not an element is visible. We can set this property to visible (default), hidden or collapse.

Collapse- This value is only used for table elements. collapse removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for content. If the collapse is used on other elements, it will be treated as “hidden”.

Link-
a: link-a normal, unvisited link
a: visited-a link the user has visited
a: hover-a link when the user mouse over it
a: active-a link the moment it is clicked

Ex-

a: hover MUST come after a: link a: visited
a: active must come after a: hover

=> Position-

  • static, fixed, relative, absolute, left, right, top, bottom

Static- when we set static for an element then it is not positioned in any special way, it is always positioned according to the normal flow of the page.

left, right, top and bottom property won’t work with the static position.
Ex:-

overflow- This property is used to define what happens if content overflows an element’s box. it means it will define whether to clip content or to add scrollbars when an element with a specified height. we can set this property to visible (default). scroll, hidden, auto.
Ex-

Float- This property is used to specify that an element should be placed along the left or right side of its container, where text and inline elements will wrap around it. We can this property to left, right, none (default).

Ex-

=> div and span=
– The div is used to group various other HTML elements. It is a block-level element. We can say it also creates a block.

=> – The span tag is used to group inline elements. It is an inline element.

!important

Pseudo-classes= A pseudo-class is used to define a special state of an element.
Syntax:- selector:pseudo-class {property:value;}

Ex:-

Content- It is used to generated content at run time dynamically with the ::before and :: after pseudo-elements, to inset generated content.
Ex:-

Pseudo Element- This is used to style specified parts of an element.
Syntax:-
Selector:: pseudo-element {property:value;}
Ex:-

Selection- this is used to matches the portion of an element that is selected by a user then apply the CSS rule in the selected content.
– background properties
– color properties
– cursor properties
– outline properties

Ex:-

Rajesh Kumar
Follow me
Latest posts by Rajesh Kumar (see all)