Exploring Some CSS Features

CSS stands for Cascading Style Sheets which is used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

Here's what i’m Describe:

Box Model–CSS

In CSS ,Box Model is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. It can be used as a toolkit for customizing the layout of different elements.

Box-Model has multiple properties in CSS. Some of them are given below:

content: This property is used to display the text, images, etc, that can be sized using the width & height property.
padding: This property is used to create space around the element, inside any defined border.
border: This property is used to cover the content & any padding, & also allows to set the style, color, and width of the border.
margin: This property is used to create space around the element , around the border area.It is useful to separate the element from its neighbors.

Overflow–CSS

The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.

Overflow has multiple properties in CSS. Some of them are given below:
Visible: The content is not clipped and visible outside the element box.
Hidden: The overflow is clipped and the rest of the content is invisible.
Scroll: The overflow is clipped but a scrollbar is added to see the rest of the content. The scrollbar can be horizontal or vertical.
Auto: It automatically adds a scrollbar whenever it is required.
Overflow-x and Overflow-y: This property specifies how to change the overflow of elements. x deals with horizontal edges and y deals with vertical edges.

Float–CSS

The float CSS property is used to position the elements to the left, right, of its container along with permitting the text and inline elements to wrap around it. The float property defines the flow of content in the page. The remaining elements will be part of the flow if the element is removed from the normal flow of the content. This property is ignored by the absolutely positioned elements.

Float has multiple properties in CSS. Some of them are given below:
left: The element will be positioned to the left side of its containing block.
right: The element will be positioned to the right side of its containing block.
none: The element remains the same as it is declared ie it will have no effect on the element & this is the default value.
inherit: It is used to inherit a property to an element from its parent element property value.

2D Transforms–CSS

In CSS, transforms is used to modify an element by its shape, size and position. It transforms the elements along the X-axis and Y-axis.
Transforms has six properties in CSS. Some of them are given below:
translate() Method: The translate() method is used to move the element from its actual position along the X-axis and Y-axis.
rotate() Method: The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. The degree is given in the parenthesis.
scale() Method: It is used to increase or decrease the size of an element according to the parameter given for the width and height.
skewX() Method: This method is used to skew an element in the given angle along the X-axis.
skewY() Method: This method is used to skew an element in the given angle along the Y-axis.
matrix() Method: This method combines all the 2D transform property into a single property. The matrix transform property accepts six parameters as matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() ).

3D Transforms–CSS

In 3D transformation, the elements are rotated along X-axis, Y-axis and Z-axis.
There are three main types of transformation which are listed below:

1. rotateX()
2. rotateY()
3. rotateZ()

Media queries–CSS

The Media query in CSS is used to create a responsive web design. It means that the view of a web page differs from system to system based on screen or media types. The breakpoint specifies for what device-width size, the content is just starting to break or deform.
Media queries can be used to check many things:
width and height of the viewport
width and height of the device
Orientation
Resolution

Features of Media query

There are many features of media query which are listed below:
color: The number of bits per color component for the output device.
grid: Checks whether the device is grid or bitmap.
height: The viewport height.
aspect-ratio: The ratio between width and height of the viewport.
color-index:** The number of colors the device can display.
max-resolution:The maximum resolution of the device using dpi and dpcm.
monochrome: The number of bits per color on a monochrome device.
scan: The scanning of output devices.
update: How quickly can the output device modify.
width: The viewport width.
Media Types in CSS: There are many types of media types which are listed below:
all: It is used for all media devices
print: It is used for printer.
screen: It is used for computer screens, smartphones, etc.
speech: It is used for screen readers that read the screen aloud.