CSS Intro

 

What is CSS?

CSS (Cascading Style Sheets) is a style sheet language primarily used to define the style and layout of web pages written in HTML. Its main purpose is to separate the content (HTML) from its visual presentation (CSS), offering numerous benefits in web development.

CSS is the language we use to style a Web page.

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen.
• CSS can control the layout of multiple web pages all at once.
• External stylesheets are stored in CSS files.

These are the key uses of CSS:

HTML Elements: CSS is used to control the visual appearance of HTML elements, including:

Colors: Setting text, background, and border colors.

Fonts: Defining font families, sizes, weights, and styles.

Text Properties: Adjusting line height, letter spacing, text alignment, and decoration.

Backgrounds: Applying background images, colors, and gradients.

Borders: Customizing border styles, widths, and colors.

Padding and Margins: Controlling the spacing around and between elements.

Page Layout and Positioning:

CSS enables precise control over the arrangement of elements on a page:

Box Model: Managing the content, padding, border, and margin of elements.

Positioning: Using static, relative, absolute, fixed, and sticky positioning to place elements.

Flexbox and Grid: Creating responsive and complex layouts for modern web design.

Creating Responsive Designs:

CSS media queries allow websites to adapt their layout and styling based on the characteristics of the viewing device, such as screen size, resolution, and orientation, ensuring a consistent user experience across different devices (desktops, tablets, mobile phones).

Adding Visual Effects and Interactivity:

CSS can enhance the user experience with visual effects:

Transitions: Smoothly animating changes in CSS properties over time.

Animations: Creating more complex and custom animations.

Transformations: Applying 2D and 3D transformations like rotation, scaling, and skewing.

Pseudo-classes and Pseudo-elements: Styling elements based on their state (e.g., :hover, :active) or targeting specific parts of an element (e.g., ::before, ::after).

Improving Maintainability and Efficiency:

By separating style from content, CSS simplifies website maintenance and updates. A single CSS file can control the styling of multiple HTML pages, allowing for consistent design and efficient changes across an entire website.

Example:

CSS Syntax

A CSS rule consists of a selector and a declaration block:

 

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.