Learn2code css

CSS is what makes websites beautiful, organized, and responsive. It controls how HTML elements look, making web pages visually appealing and user-friendly.

1.How to Link CSS in HTML

CSS (Cascading Style Sheets) is used to make your website beautiful by styling your HTML elements. Before the styles can work, you must link your CSS to your HTML file.

1. Inline CSS

Inline CSS is written inside an HTML tag using the style attribute. It only affects that specific element.

Example:

<div style="background-color: lightblue; color: white; padding: 20px;">
  <h2>This is an inline styled div</h2>
  <p>Inline CSS is written directly inside the tag.</p>
</div>

2. Internal CSS

Internal CSS is written inside the <style> tag in the <head> section of your HTML document. It’s useful when styling only one page.

Example:

<head>
  <style>
    div {
      background-color: green;
      color: white;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <h2>This is an internal CSS example</h2>
    <p>Style is written inside the head section.</p>
  </div>
</body>

3. External CSS (Most Common)

External CSS is written in a separate file (for example, style.css), and then linked to your HTML using the <link> tag. This method is best for large websites.

Example:

<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div>
    <h2>This is an external CSS example</h2>
    <p>The styles are written in a separate CSS file.</p>
  </div>
</body>

Summary

Inline CSS: Style inside an element tag.
Internal CSS: Style inside the <style> tag in the head section.
External CSS: Style in a separate .css file linked with the <link> tag.

2.How to Add Colors in CSS

In CSS, colors are used to make your web page elements more attractive. You can change the color of text, backgrounds, borders, and more using different color values.

Ways to Add Colors in CSS

CSS provides different ways to define colors. The most common ones are:

Using color names (e.g., red, blue, green)
Using HEX codes (e.g., #ff0000 for red)
Using RGB values (e.g., rgb(255, 0, 0))
Using RGBA values (e.g., rgba(255, 0, 0, 0.5) for transparent red)
Using HSL values (e.g., hsl(0, 100%, 50%))

Example 1: Coloring Text

You can use the color property to change text color.

Example:

<h2 style="color: red;">This text is red</h2>
<h2 style="color: #00ff00;">This text is green</h2>
<h2 style="color: rgb(0, 0, 255);">This text is blue</h2>

Example 2: Coloring Backgrounds

You can use the background-color property to set the background color of an element.

Example:

<div style="background-color: yellow; padding: 20px;">
  <p>This div has a yellow background.</p>
</div>

<div style="background-color: rgb(255, 0, 0); padding: 20px;">
  <p>This div has a red background.</p>
</div>

Example 3: Using CSS File

You can also add colors using an external CSS file. This is the preferred method for larger projects.

style.css:

p {
  color: blue;
  background-color: lightgray;
  padding: 10px;
}

HTML:

<p>This paragraph is blue with a light gray background.</p>

Summary

Use color to change text color.
Use background-color to change background color.
Colors can be written using names, HEX, RGB, RGBA, or HSL.

3.How to Use Borders in CSS

Borders in CSS are used to add lines around elements such as text, images, or boxes. You can customize the border’s style, width, color, and even make the corners rounded.

1. Basic Border

To add a simple border, use the border property.

Example:

<div style="border: 2px solid black; padding: 20px;">
  <p>This div has a solid black border.</p>
</div>

2. Border Styles

CSS provides several border styles you can use:

solid — normal line
dotted — dotted line
dashed — dashed line
double — double lines
groove — 3D grooved effect
ridge — 3D ridged effect
inset — looks pressed in
outset — looks raised

Example:

<div style="border: 3px dotted blue; padding: 15px;">Dotted border</div>
<div style="border: 3px dashed red; padding: 15px;">Dashed border</div>
<div style="border: 3px double green; padding: 15px;">Double border</div>

3. Border Width, Color, and Sides

You can control each part of the border separately:

border-width — sets how thick the border is
border-color — sets the border color
border-top, border-right, border-bottom, border-left — control each side individually

Example:

<div style="border-top: 5px solid red;
            border-right: 5px dashed blue;
            border-bottom: 5px double green;
            border-left: 5px dotted orange;
            padding: 20px;">
  <p>This div has different borders on each side.</p>
</div>

4. Rounded Borders

To make the corners of a border rounded, use the border-radius property.

Example:

<div style="border: 2px solid purple;
            border-radius: 15px;
            padding: 20px;">
  <p>This div has rounded corners.</p>
</div>

5. Example Using External CSS

You can also define all your border styles in a separate CSS file for cleaner code.

style.css:

.box {
  border: 3px solid teal;
  border-radius: 10px;
  padding: 20px;
}

HTML:

<div class="box">This div is styled using external CSS.</div>

Summary

Use border to add lines around elements.
You can control border style, width, color, and radius.
Use border-radius to create rounded corners.

4.How to Use Margins and Padding in CSS

Margins and Padding are two important CSS properties that control **spacing** around elements. They make your web page look neat and organized by giving elements room to “breathe.”

1. What is Margin?

Margin is the space **outside** the border of an element. It pushes elements away from each other.

Example:

<div style="background-color: lightblue; margin: 30px;">
  <p>This div has a margin of 30px.</p>
</div>

You can set margin for each side using:

margin-top
margin-right
margin-bottom
margin-left

<div style="background-color: yellow; margin-top: 20px; margin-bottom: 40px;">
  <p>Different top and bottom margins.</p>
</div>

2. What is Padding?

Padding is the space **inside** the border of an element. It pushes the content away from the element’s border.

Example:

<div style="background-color: lightgreen; padding: 25px;">
  <p>This div has padding of 25px inside it.</p>
</div>

You can also set padding for each side:

padding-top
padding-right
padding-bottom
padding-left

<div style="background-color: pink; padding-top: 10px; padding-bottom: 30px;">
  <p>Different padding for top and bottom.</p>
</div>

3. Margin vs Padding (Difference)

The main difference is:

Margin controls space outside an element.
Padding controls space inside an element.

Example:

<div style="background-color: lightgray;
            border: 2px solid black;
            margin: 20px;
            padding: 20px;">
  <p>This div has both margin and padding.</p>
</div>

4. Shorthand Property

You can set all sides at once using shorthand:

margin: 10px; — same margin on all sides
margin: 10px 20px; — top/bottom 10px, left/right 20px
padding: 5px 10px 15px 20px; — top, right, bottom, left

Example:

<div style="background-color: orange;
            margin: 20px 40px;
            padding: 10px 30px;">
  <p>This div uses shorthand for margin and padding.</p>
</div>

Summary

Use margin to control space outside an element.
Use padding to control space inside an element.
Both help improve layout and spacing on your web page.

5.How to Add Backgrounds in CSS

Backgrounds in CSS are used to make your web page more beautiful by adding colors, images, or gradients behind your content. You can apply backgrounds to any element — a whole page, a section, or even a single box.

1. Background Color

The background-color property sets the background color of an element. You can use color names, HEX, RGB, or HSL values.

Example:

<div style="background-color: lightblue; padding: 20px;">
  <p>This div has a light blue background.</p>
</div>

<div style="background-color: #ffcc00; padding: 20px;">
  <p>This div uses a HEX color.</p>
</div>

<div style="background-color: rgb(200, 100, 255); padding: 20px;">
  <p>This div uses an RGB color.</p>
</div>

2. Background Image

The background-image property allows you to add an image as a background.

Example:

<div style="background-image: url('background.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            padding: 40px; color: white;">
  <p>This div has an image background.</p>
</div>

Explanation:

background-repeat — controls if the image repeats (repeat, no-repeat, repeat-x, repeat-y)
background-size — defines how the image fits (cover fills the area, contain fits the image)
background-position — sets image position (like center, top, bottom)

3. Background Gradient

CSS gradients let you blend two or more colors together. There are two main types: linear and radial gradients.

Linear Gradient:

Example:

<div style="background: linear-gradient(to right, red, yellow);
            padding: 30px;">
  <p>This background fades from red to yellow.</p>
</div>

Radial Gradient:

Example:

<div style="background: radial-gradient(circle, lightblue, purple);
            padding: 30px;">
  <p>This background fades in a circular pattern.</p>
</div>

4. Background Attachment

The background-attachment property controls if a background scrolls with the page or stays fixed.

Example:

<div style="background-image: url('bg.jpg');
            background-attachment: fixed;
            background-size: cover;
            color: white;
            height: 300px; padding: 20px;">
  <p>This background stays fixed when you scroll.</p>
</div>

5. Shorthand Property

You can use the background shorthand to set multiple background properties in one line.

<div style="background: url('bg.jpg') no-repeat center/cover;
            color: white; padding: 30px;">
  <p>This uses shorthand for all background settings.</p>
</div>

Summary

background-color — adds color behind content
background-image — adds image backgrounds
background-repeat, background-size, background-position — control how images display
linear-gradient and radial-gradient — create gradient backgrounds
background-attachment — fixes background when scrolling
background — shorthand for all background properties

🧱 CSS Display Property

The display property in CSS controls how an element is shown (displayed) on a web page. It determines whether an element appears as a block, inline, inline-block, or something else.

📘 Common Display Values

block – The element takes up the full width of the page and starts on a new line.
inline – The element stays in the same line and only takes up as much space as needed.
inline-block – Similar to inline, but allows setting width and height.
none – The element will not be displayed on the page (it’s hidden).

🧩 Example: Block vs Inline vs Inline-block

Here’s how the display property changes how elements appear:

<div class="box1">Block Element</div>
<span class="box2">Inline Element</span>
<span class="box3">Inline-Block Element</span>

CSS:

div.box1 {
  display: block;
  background-color: lightgreen;
  padding: 10px;
  margin-bottom: 10px;
}

span.box2 {
  display: inline;
  background-color: orange;
  padding: 10px;
}

span.box3 {
  display: inline-block;
  background-color: lightblue;
  padding: 10px;
  width: 150px;
  height: 50px;
}

🪄 Example: Using `display: none`

<div class="hidden-box">This text is hidden</div>

.hidden-box {
  display: none;
}

When you use display: none;, the element disappears completely from the page. Unlike visibility: hidden;, it doesn’t even take up space.

📖 Summary Table

Value	Description
`block`	Takes full width, starts on a new line
`inline`	Stays in line with other elements
`inline-block`	In line, but you can set width and height
`none`	Completely hides the element

📍 CSS Position Property

The position property in CSS controls how an element is placed (positioned) on a web page. It allows you to move, fix, or stick elements in specific locations using top, right, bottom, and left.

💡 Common Values of the Position Property

static – Default position; the element appears in normal order.
relative – Positioned relative to its normal place.
absolute – Positioned relative to the nearest positioned parent.
fixed – Stays in the same spot when you scroll.
sticky – Sticks to the top when scrolling past it.

🧱 Example 1: Static (Default)

<div class="box static">Static Box</div>

.static {
  position: static;
  background-color: lightgray;
  padding: 15px;
  margin: 10px 0;
}

Explanation: The box stays where it naturally appears on the page. This is the default.

🧭 Example 2: Relative

<div class="box relative">Relative Box</div>

.relative {
  position: relative;
  top: 20px;
  left: 30px;
  background-color: skyblue;
  padding: 15px;
}

Explanation: The box moves 20px down and 30px right from its normal position, but still keeps its original space.

📦 Example 3: Absolute

<div class="parent">
  <div class="box absolute">Absolute Box</div>
</div>

.parent {
  position: relative;
  background-color: #eee;
  height: 150px;
}

.absolute {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: orange;
  padding: 15px;
}

Explanation: The absolute box is placed inside the parent using exact coordinates.

📌 Example 4: Fixed

<div class="box fixed">Fixed Box</div>

.fixed {
  position: fixed;
  bottom: 10px;
  right: 10px;
  background-color: red;
  color: white;
  padding: 10px;
}

Explanation: This box stays in the bottom-right corner even when the page is scrolled.

🧷 Example 5: Sticky

<div class="box sticky">Sticky Box</div>

.sticky {
  position: sticky;
  top: 0;
  background-color: green;
  color: white;
  padding: 10px;
}

Explanation: This box behaves like relative until you scroll; then it sticks to the top of the page.

📖 Summary Table

Value	Description
`static`	Default position; element stays in normal flow
`relative`	Moves element relative to its normal spot
`absolute`	Positioned based on nearest parent with position
`fixed`	Stays in place even when scrolling
`sticky`	Sticks to top when scrolled into view

Css For Beginners

1.How to Link CSS in HTML

1. Inline CSS

2. Internal CSS

3. External CSS (Most Common)

Summary

2.How to Add Colors in CSS

Ways to Add Colors in CSS

Example 1: Coloring Text

Example 2: Coloring Backgrounds

Example 3: Using CSS File

Summary

3.How to Use Borders in CSS

1. Basic Border

2. Border Styles

3. Border Width, Color, and Sides

4. Rounded Borders

5. Example Using External CSS

Summary

4.How to Use Margins and Padding in CSS

1. What is Margin?

2. What is Padding?

3. Margin vs Padding (Difference)

4. Shorthand Property

Summary

5.How to Add Backgrounds in CSS

1. Background Color

2. Background Image

3. Background Gradient

Linear Gradient:

Radial Gradient:

4. Background Attachment

5. Shorthand Property

Summary

🧱 CSS Display Property

📘 Common Display Values

🧩 Example: Block vs Inline vs Inline-block

🪄 Example: Using display: none

📖 Summary Table

📍 CSS Position Property

💡 Common Values of the Position Property

🧱 Example 1: Static (Default)

🧭 Example 2: Relative

📦 Example 3: Absolute

📌 Example 4: Fixed

🧷 Example 5: Sticky

📖 Summary Table

🎨 CSS Basics Quiz

🪄 Example: Using `display: none`