Learn coding with amol

 Hello my name is amol or vineet and this is my second part of learn coding with amol and in this part we are learning css.


PART-2  CSS:-



🎨 Complete CSS Guide

This guide explains important CSS properties with examples and copyable code.

1. Color and Background

Set text color and background color.

p {

  color: white;

  background-color: blue;

}

2. Font and Text

Control font size, family, and alignment.

h1 {

  font-size: 32px;

  font-family: Arial, sans-serif;

  text-align: center;

}

3. Margin and Padding

Spacing outside (margin) and inside (padding) of elements.

div {

  margin: 20px;

  padding: 10px;

}

4. Borders and Border Radius

Add borders and rounded corners to elements.

img {

  border: 2px solid black;

  border-radius: 10px;

}

5. Box Model

Every element is a box: content + padding + border + margin.

.box {

  width: 300px;

  padding: 20px;

  border: 2px solid #000;

  margin: 10px;

}

6. Position

Used to place elements: static, relative, absolute, fixed.

.box {

  position: absolute;

  top: 50px;

  left: 100px;

}

7. Flexbox

Modern layout system for building flexible UIs.

.container {

  display: flex;

  justify-content: center;

  align-items: center;

}

8. CSS Grid

Two-dimensional layout system.

.grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 10px;

}

9. Hover Effects

Change styles when the mouse hovers.

a:hover {

  color: red;

  text-decoration: underline;

}

10. Responsive Design (Media Queries)

Make sites mobile-friendly.

@media screen and (max-width: 600px) {

  body {

    background-color: lightgray;

  }

}
Report a Bug

🐞 Report a Bug

OR

Comments

Post a Comment

Popular posts from this blog

Learn coding with amol

Image
 Hello my name is amol sharma or vineet and this is my seventh part of learn coding with amol and in this part we are learning C#. Let's Start  PART-7 C# 💻 Complete C# Guide This guide covers all basics of the C# programming language with examples. 1. Hello World The structure of a simple C# program. using System; class Program { static void Main() { Console.WriteLine("Hello, World!"); } } 2. Variables and Data Types Variables store data. C# is strongly typed. int age = 13; double pi = 3.14; char grade = 'A'; string name = "Amol"; 3. Input and Output Use Console.ReadLine() to get user input. Console.Write("Enter your name: "); string name = Console.ReadLine(); Console.WriteLine("Hello, " + name); 4. if / else Conditional execution in C#. int x = 10...
Read more

Learn coding with amol

Image
 Hello my name is amol sharma or vineet and this is my sixth part of learn coding with amol and in this part we are learning C++. Let's Start  Part-6 C++ 💻 Complete C++ Guide This guide includes all important C++ topics with examples and explanations. 1. Hello World Basic C++ program structure. #include <iostream> using namespace std; int main() { cout << "Hello, World!"; return 0; } 2. Variables and Data Types Declare and use variables with types. int age = 13; float pi = 3.14; char grade = 'A'; string name = "Amol"; 3. Input and Output Using cin and cout for user interaction. int num; cout << "Enter number: "; cin >> num; cout << "You entered: " << num; 4. if / else Conditions Control flow using conditionals. int x ...
Read more

Learn coding with amol

Image
 Hello my name is amol or vineet and i help you to learn complete coding like :-html,css,js,python,c,c++,c#. Lets start:- Part 1 - HTML what is html:- it is a markup language used to make websites the full form of html is hypertext mark-up language. Complete HTML Guide Complete HTML Guide <!DOCTYPE> Definition: Declares the HTML version (HTML5): <!DOCTYPE html> Copy Code <html> Definition: Root element of HTML document. <html lang="en"> ... </html> Copy Code <head> & Meta Tags Definition: Contains page info, links, metadata. <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Webpage</title> </head> Copy Code <title> Definition:...
Read more