ATU Sligo Semester 2 Website

Basics of CSS

Selectors: CSS selectors are used to target specific HTML elements on a web page, so you can apply styles to those elements. For example, you can use a selector to target all paragraphs "p" on a page, or to target a specific ID or class.

Properties: CSS properties are used to specify the visual style of an element. For example, you can use the "background-color" property to set the background color of an element, or the "font-size" property to set the size of the font.

Values: CSS values are used to define the specific setting for a property. For example, for the "background-color" property, you can set the value to a color name (e.g. "red"), a hexadecimal value (e.g. "#ff0000"), or an RGB value (e.g. "rgb(255, 0, 0)").

Advanced CSS

Flexbox: Flexbox is a CSS layout module that allows you to easily create flexible, responsive layouts. With flexbox, you can specify how elements should be arranged and aligned within a container, making it easy to create complex and dynamic layouts.

Grid: CSS Grid is another CSS layout module that allows you to create complex and dynamic layouts. With CSS Grid, you can create two-dimensional grids with rows and columns, and then place elements within those grids using grid lines and grid areas.

Transitions and animations: CSS transitions and animations allow you to create dynamic, animated effects on your web pages. With transitions, you can define a change in a property over time, such as a gradual change in color or size. With animations, you can create more complex and custom animations using keyframes and other advanced features.