social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn social-media-apn

Style with your own way

CSS

CSS

CSS (Cascading Style Sheets) is a styling language used to define the presentation and visual appearance of a webpage. With CSS, you can control the layout, colors, fonts, and more. In here we'll take a closer look at CSS and how it works.

CSS Selectors

CSS selectors are used to target specific HTML elements on a webpage. They allow you to apply styles to a particular element or group of elements. Selectors can be based on the element's tag name, class, or ID. For example, the following code applies a style to all < p > elements on a webpage

p {
color: blue;
}

In this example, the "p" selector targets all < p > elements, and the "color" property sets the text color to blue.

CSS Properties

CSS properties are used to define the style of an element. They can control the size, color, font, and more. CSS properties are written as name/value pairs, separated by a colon. For example, the following code sets the background color of an element to red:

background-color: red

CSS Units

CSS units are used to specify the size and positioning of elements on a webpage. There are several types of units available in CSS, including pixels, ems, and percentages. Pixels are a fixed unit of measurement, while ems and percentages are relative units. For example, the following code sets the font size of an element to 16 pixels:

font-size: 16px;

CSS Box Model

The CSS box model is a way of describing the layout and sizing of HTML elements. Each element is represented as a rectangular box, which is made up of content, padding, border, and margin. The content is the actual content of the element, while the padding is the space between the content and the border. The border is a line that surrounds the element, and the margin is the space between the border and other elements on the webpage

CSS Layout

CSS layout is used to position and arrange elements on a webpage. There are several types of layout available in CSS, including float, flexbox, and grid. Float is an older layout method that is still used in some cases, while flexbox and grid are newer and more powerful layout tools. For example, the following code uses flexbox to center an element horizontally and vertically:

display: flex;
justify-content: center;
align-items: center;

CSS Code

Preview