Scribd
Upload
5 views

CSS-reviewer

reviewer for CSS

Uploaded by

darkp0641
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

CSS-reviewer

reviewer for CSS

Uploaded by

darkp0641
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

What is CSS?

 CSS stands for Cascading Style Sheets

 CSS describes how HTML elements are to be displayed on screen, paper, or in other media

 CSS saves a lot of work. It can control the layout of multiple web pages all at once

 External stylesheets are stored in CSS file

1. CSS Introduction

 CSS Syntax: CSS rules are written in the form of selectors and declarations:

css

Copy code

selector {

property: value;

 Selectors: Choose elements to style (e.g., h1, .class, #id).

 Declaration Block: Contains one or more properties and values to apply to the selector.

2. CSS Selectors

 Basic Selectors:

o element selector (e.g., p).

o .class selector (e.g., .box).

o #id selector (e.g., #header).

 Combinators:

o Descendant ( ): Targets elements within a specified parent.

o Child (>): Selects direct child elements.

o Adjacent Sibling (+): Selects the next sibling.

o General Sibling (~): Selects all siblings following an element.

3. CSS Colors

 Color Names, HEX, RGB, HSL: Ways to define colors.

o HEX (e.g., #ff5733)

o RGB (e.g., rgb(255, 87, 51))

o HSL (e.g., hsl(9, 100%, 60%))

 Opacity & Transparency: Use rgba and hsla for transparent colors.

4. CSS Backgrounds
 Background Color: background-color: color;

 Background Image: background-image: url('image.jpg');

 Background Position: background-position: center;

 Background Repeat: background-repeat: no-repeat;

 Background Attachment: background-attachment: fixed;

5. CSS Borders

 Border Style: e.g., solid, dotted, dashed.

 Border Width: e.g., 1px, 5px.

 Border Color: e.g., border-color: red;.

 Border Radius: Rounds the corners, e.g., border-radius: 10px;.

6. CSS Margins and Padding

 Margins: Space outside an element (margin: 10px;).

 Padding: Space inside an element (padding: 10px;).

7. CSS Box Model

 Defines how width and height are calculated, including content, padding, border, and margin.

8. CSS Display and Position

 Display Property: block, inline, inline-block, none.

 Position Property:

o Static: Default, no positioning.

o Relative: Positioned relative to itself.

o Absolute: Positioned relative to the nearest positioned ancestor.

o Fixed: Fixed relative to the viewport.

o Sticky: Switches between relative and fixed based on scroll.

9. CSS Flexbox

 Used to create flexible and responsive layouts.

 Main Properties:

o display: flex;

o flex-direction: row / column;

o justify-content: Aligns items horizontally.

o align-items: Aligns items vertically.

10. CSS Grid

 Powerful for 2D layouts.


 Main Properties:

o display: grid;

o grid-template-columns / rows: Defines columns and rows.

o gap: Defines spacing between grid items.

You might also like