Scribd
Upload
2 views

CSS__basicz

The document provides an overview of CSS, including its basic syntax, types (inline, internal, and external), and various selectors (element, class, ID, descendant, and universal). It also explains the CSS box model, which consists of content, padding, border, and margin, as well as different positioning methods and flexbox properties for layout management. This foundational knowledge is essential for styling HTML elements effectively.

Uploaded by

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

CSS__basicz

The document provides an overview of CSS, including its basic syntax, types (inline, internal, and external), and various selectors (element, class, ID, descendant, and universal). It also explains the CSS box model, which consists of content, padding, border, and margin, as well as different positioning methods and flexbox properties for layout management. This foundational knowledge is essential for styling HTML elements effectively.

Uploaded by

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

CSS

Basic Syntax
selector {
property: value;
}

Selector: The HTML element to style (e.g., h1, .class-name,


#id-name).
Property: The CSS property to change (e.g., color, font-
size).
Value: The value for the property (e.g., blue, 16px).
Types of CSS:

There are three main types of CSS:


1. Inline CSS
2. Internal CSS
3. External CSS
Inline CSS
- Applied directly to an HTML element
- Uses the `style` attribute
- Example: `<p style="color: red;">Text</p>`
Internal CSS
- Defined within the `<style>` tag
- Placed in the HTML document's `<head>` section
- Example:
```
<head>
<style>
p{
color: red;
}
</style>
</head>
External CSS
- Linked to an external CSS file
- Uses the `<link>` tag
- Example:
<head>
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>
CSS Selectors
Element Selector: h1 { color: red; }
Class Selector: .class-name { color: green; }
ID Selector: #id-name { color: blue; }
Descendant selector : parent child { color:black;}
Universal Selector : * {margin: 0;}

h1 { .container p{
color: blue; color: red;
font-size: 36px; }
text-align: center;
}
CSS Box Model
• Content: The actual content inside the element.
• Padding: Space between the content and the border.
• Border: The boundary around the content and
padding.
• Margin: Space outside the border.
Positioning Elements
• Static Positioning
• Relative Positioning
• Absolute Positioning
• Fixed Positioning
• Sticky Positioning
Flexbox
• flex-direction: Defines the direction of flex items (row,
column, etc.).
• flex-wrap: Specifies whether flex items should wrap
onto multiple lines.
• justify-content: Aligns items along the main axis
(horizontal by default).
• align-items: Aligns items along the cross axis (vertical
by default).

You might also like