CSS Style Properties

CSS stands for Cascading Style Sheets. CSS describes and defines how should the elements be displayed in a web page. These stylesheets change the layout of your HTML pages. Using CSS we could create multiple styles in one HTML page.

Initially HTML was designed only to display contents of the page without any inbuilt formatting tags. Later in HTML 3.2 some formatting tags such as and other attributes were added. But while creating large websites using HTML formatting tags in every single page of the website was a hectic, long and expensive task for the web developers.

The introduction of CSS styles made life easy for web developers where CSS removed the style formatting from the HTML page. CSS controlled the layout of multiple web pages all at once. The style definitions are saved in external .css files. By changing just one such external stylesheet file, you could change the look and feel of an entire website. CSS defines the styles for your web pages such as design, layout and dynamic display for various devices and screens.

There are a number of properties used in CSS which define the styles of the webpage. The below section provides a brief description of those properties. Click on the properties to learn more.

CSS: css()

The css() style property is used to return the property value of an element. This property allows to change the style property of an element.

Height: height()

The height() style property is used to return the height of the specified element. This property will return your selected element's height including top and bottom padding.

Inner Height: innerHeight()

The innerHeight() style property is used to return the height of a particular element with padding value.

Outer Height: outerHeight()

The outerHeight() style property is used to return the height of a particular element with padding, border and margin values.

Width: width()

The width() style property is used to get the width of a specified element.

Inner Width: innerWidth()

The innerWidth style property is used to return the width of an element with padding value.

Outer Width: outerWidth()

The outerWidth() style property is used to return the width of a particular element with padding, border and margin.

Offset: offset()

The offset() style property is used to return the left and top position value of a particular element in pixels. The offset(coordinates) style property allows to change the selected element position.

Position: position()

The position() style property is used to find out the position of the current element in the document. The position is found relative to the parent element of the selected element.

Scroll top: scrolltop()

The scrolltop() style property is used to get the vertical position of the scrollbar in an element.

Scroll left: scrollleft()

The scrollleft() style property is used to get the horizontal position of the scrollbar in an element.

Offsetparent: offsetparent()

The offsetparent() style property is used to return the first positioned parent element.



Ask Questions

Ask Question