Essentials of Webpage Development
2.2 CSS
Cascading Style Sheets (CSS) is a language used to control the presentation and layout of web pages. It is used to separate the presentation of a web page from its structure, which is defined using HTML. By using CSS, you can control the layout, colors, fonts, spacing, and other visual elements of a web page.
Some of the key concepts in CSS include:
Selectors: These are used to select the HTML elements that you want to style. There are several types of selectors, such as element selectors, class selectors, and ID selectors.
Properties: These are used to define the visual characteristics of an HTML element, such as color, font size, and spacing. CSS has a wide range of properties that can be used to control the appearance of web pages.
Values: These are used to specify the values for CSS properties. For example, the color property can be set to a specific color value such as "red" or a value in RGB or HEX format.
Box model: The box model is the layout system used by CSS. It defines the way that elements are rendered on a web page, including their dimensions, margins, borders, and padding.
Display: The display property is used to control the way that elements are displayed on a web page. For example, the display property can be set to "block" to make an element take up the full width of its parent container or "inline" to make the element take up only as much width as necessary.
Positioning: The positioning property is used to control the position of an element on a web page. Elements can be positioned using properties such as "absolute", "relative", "fixed" and "sticky" among others.
Flexbox and Grid: These are CSS layout modules that provide an efficient way to layout, align, and distribute space among items in a container. They are especially useful for responsive design and allow for the creation of responsive grid-based layouts.
Transitions and animations: CSS also provides a way to create smooth transitions and animations on web pages. The transition and animation properties can be used to create subtle effects such as hover states, scrolling animations and more.
