Scribd
Upload
22 views3 pages

Introduction To CSS

CSS (Cascading Style Sheets) enhances the appearance of web pages by allowing customization of colors, backgrounds, borders, and layout through the Box Model. The Box Model consists of content, padding, border, and margin, which define how elements are displayed and spaced. Flexbox is a layout method that simplifies the arrangement of elements in rows or columns.

Uploaded by

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

Introduction To CSS

CSS (Cascading Style Sheets) enhances the appearance of web pages by allowing customization of colors, backgrounds, borders, and layout through the Box Model. The Box Model consists of content, padding, border, and margin, which define how elements are displayed and spaced. Flexbox is a layout method that simplifies the arrangement of elements in rows or columns.

Uploaded by

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

CSS (Cascading Style Sheets): CSS is a way to make web pages look nice.

It changes how
things like text, boxes, and backgrounds appear on a web page. Without CSS, websites look
very basic—just black text on a white background.

Colors:
CSS lets you change the color of text, backgrounds, and borders. For example:

 color: red; makes text red.

 background-color: yellow; makes the background yellow.

Backgrounds:
You can add colors or even pictures to the background of web page parts.

 Example: background-color: lightblue;

Borders:
Borders are lines around boxes (like around a paragraph or image).

 You can choose the thickness, color, and style (solid, do ed, etc.).

 Example: border: 2px solid green; puts a green line around the box.

 Box model: The CSS Box Model is a fundamental concept used to understand how
elements (like text, images, or bu ons) are displayed and spaced on a web page. Every part
of a web page is seen by CSS as a rectangular box made up of four layers, from inside out:

Content

 This is the innermost part of the box.

 It holds the actual stuff you see inside the element, like text, images, or videos.

 We can set the size of this area using width and height.
Padding

 Padding is the space inside the box, between the content and the border.

 It creates breathing room around the content so it does not touch the edges of the
border.

 Padding is transparent and shows the element’s background color.

 We can set padding separately for each side (top, right, bo om, le ).

Border

 The border is the visible line around the padding and content.

 It acts like a fence or frame around the element.

 We can control its width (border-width), style (solid, dashed, do ed), and color
(border-color).

 Borders add extra size to the element beyond the content and padding.

Margin

 Margin is the space outside the border.

 It creates distance between this element’s box and other elements on the page.

 Margin is also transparent and does not have a background or border.

 We can set margin separately on each side to control the spacing around elements.
 Flexbox
 Flexbox is a simple way to arrange boxes in a row or column.

 To use it, set display: flex; on the container.

 Flexbox makes it easy to put boxes side by side, space them out, or put them in a
column.

 Example:

 jus fy-content: center; will put the items in the middle.

 flex-direc on: column; stacks them on top of each other

You might also like