Skip to content

Commit 19d1fa5

Browse files
Aksshay88Aksshay88
authored
Merge branch 'CodeHarborHub:main' into main
2 parents 8945b62 + f52e5b2 commit 19d1fa5

File tree

10 files changed

+666
-26
lines changed

10 files changed

+666
-26
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,11 @@ This project is licensed under the [MIT License](LICENSE).
8989

9090
## Contributors
9191

92+
<!--
9293
[![Contributors](https://contributors-img.web.app/image?repo=codeharborhub/codeharborhub)](https://github.com/CodeHarborHub/codeharborhub/graphs/contributors)
94+
-->
95+
96+
![Contributors](https://opencollective.com/codeharborhub/contributors.svg?button=false&avatarHeight=50&width=600)
9397

9498
## Chat with us
9599

‎docs/CSS/css-basics/Colors-and-Backgrounds.md

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
# Colors and Background
2+
3+
In CSS, controlling colors and background properties is fundamental for styling web pages. This includes setting text colors, background colors, images, gradients, and more. Below are the main properties and techniques for handling colors and backgrounds in CSS.
4+
5+
**1. Text Color**
6+
7+
The color property sets the color of the text. Colors can be defined using various formats, such as named colors, HEX codes, RGB, RGBA, HSL, and HSLA.
8+
9+
Hex - Codes :
10+
11+
<img src="https://tse4.mm.bing.net/th?id=OIP.9ipFzqjVN-PlJKwrpuAiuQHaFM&pid=Api&P=0&h=180" alt="HexCode" height="200cm" width="200cm"/>
12+
13+
RGB (Red-Green-Blue):
14+
15+
<img src="https://tse4.mm.bing.net/th?id=OIP.zBlyNAyf8fFyqp7_vdv2mgHaCx&pid=Api&P=0&h=180" alt="RGB"/>
16+
17+
HSL (Hue-Saturation-Lightness):
18+
19+
<img src="https://giggster.com/guide/static/fed42130c194b0c240a4ec10408adf97/8282f/hsl-cover-2.png" alt="HSL"/>
20+
21+
```css
22+
/* Named color */
23+
p {
24+
color: red;
25+
}
26+
27+
/* HEX code */
28+
h1 {
29+
color: #ff5733;
30+
}
31+
32+
/* RGB */
33+
div {
34+
color: rgb(255, 87, 51);
35+
}
36+
37+
/* RGBA (with opacity) */
38+
span {
39+
color: rgba(255, 87, 51, 0.8);
40+
}
41+
42+
/* HSL */
43+
a {
44+
color: hsl(11, 100%, 60%);
45+
}
46+
47+
/* HSLA (with opacity) */
48+
footer {
49+
color: hsla(11, 100%, 60%, 0.8);
50+
}
51+
```
52+
53+
**2. Background Color**
54+
55+
The `background-color` property sets the background color of an element.
56+
57+
```css
58+
/* Named color */
59+
body {
60+
background-color: lightblue;
61+
}
62+
63+
/* HEX code */
64+
header {
65+
background-color: #333333;
66+
}
67+
68+
/* RGB */
69+
section {
70+
background-color: rgb(240, 240, 240);
71+
}
72+
73+
/* RGBA (with opacity) */
74+
nav {
75+
background-color: rgba(0, 0, 0, 0.5);
76+
}
77+
78+
/* HSL */
79+
article {
80+
background-color: hsl(210, 100%, 95%);
81+
}
82+
83+
/* HSLA (with opacity) */
84+
aside {
85+
background-color: hsla(210, 100%, 95%, 0.8);
86+
}
87+
```
88+
89+
**3. Background Image**
90+
91+
The `background-image` property sets an image as the background of an element. You can also control its position, size, repeat behavior, and more.
92+
93+
```css
94+
/* Background image */
95+
body {
96+
background-image: url('path/to/image.jpg');
97+
background-repeat: no-repeat; /* Prevents image from repeating */
98+
background-size: cover; /* Scales image to cover the entire element */
99+
background-position: center; /* Centers the image */
100+
}
101+
102+
/* Gradient background */
103+
div {
104+
background-image: linear-gradient(to right, red, yellow);
105+
}
106+
```
107+
108+
**4. Background Repeat**
109+
110+
The `background-repeat` property controls if/how a background image repeats.
111+
112+
```css
113+
div {
114+
background-image: url('path/to/image.jpg');
115+
background-repeat: no-repeat; /* Do not repeat the image */
116+
background-repeat: repeat-x; /* Repeat the image horizontally */
117+
background-repeat: repeat-y; /* Repeat the image vertically */
118+
background-repeat: round; /* Repeat the image, but rescale to fit */
119+
background-repeat: space; /* Repeat the image, but add space between repetitions */
120+
}
121+
```
122+
123+
**5. Background Size**
124+
125+
The `background-size` property specifies the size of the background image.
126+
127+
```css
128+
section {
129+
background-image: url('path/to/image.jpg');
130+
background-size: auto; /* Default, original size */
131+
background-size: cover; /* Scale the image to cover the element */
132+
background-size: contain; /* Scale the image to be contained within the element */
133+
background-size: 100px 200px; /* Specify exact size */
134+
background-size: 50% 50%; /* Specify size as a percentage */
135+
}
136+
```
137+
138+
**6. Background Position**
139+
140+
The `background-position` property sets the starting position of the background image.
141+
142+
```css
143+
header {
144+
background-image: url('path/to/image.jpg');
145+
background-position: left top; /* Align image to top left */
146+
background-position: center; /* Center the image */
147+
background-position: 50% 50%; /* Center the image using percentages */
148+
background-position: 10px 20px; /* Set position using exact values */
149+
}
150+
```

‎docs/CSS/css-basics/Typography.md

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# Typography
2+
3+
Typography in CSS is an essential aspect of web design, as it greatly influences the readability, aesthetics, and overall user experience of a website. Here are the key concepts and properties related to typography in CSS:
4+
5+
**1. Font Family**
6+
7+
The `font-family` property specifies the typeface for the text. It can include a specific font name and one or more generic font families.
8+
9+
```css
10+
body {
11+
font-family: 'Arial', sans-serif;
12+
}
13+
```
14+
15+
**2. Font Size**
16+
17+
The font-size property controls the size of the text. It can be set in various units like pixels (`px`), em units (`em`), rem units (`rem`), percentages (`%`), and more.
18+
19+
```css
20+
p {
21+
font-size: 16px;
22+
}
23+
24+
h1 {
25+
font-size: 2em; /* 2 times the current font size */
26+
}
27+
```
28+
You can check the relation between units
29+
30+
| Unit | Description |
31+
| :--------: | :--------: |
32+
| `em` | Calculated relative to the current font size. For example, 2em indicates 2 times larger size than current element's font size. |
33+
| `px` | `px` stands for "pixels." It's a unit of measurement commonly used in digital design and web development to define the size of elements on a screen. |
34+
| `%` | Percentage (`%`) is a relative unit of measurement that expresses a value as a fraction of the parent element's size or the viewport's dimensions.For example, 50% of the width of the container. |
35+
| `rem` | Relative to font size of the root-element. |
36+
| `vw` | Viewport width (`vw`) is a relative unit of measurement that expresses a value as a fraction of the width of the browser viewport. `1vw` is equal to 1% of the width of the viewport. |
37+
| `vh` | Viewport height (`vh`) is a relative unit of measurement that expresses a value as a fraction of the height of the browser viewport. `1vh` is equal to 1% of the height of the viewport. |
38+
39+
40+
**3. Font Weight**
41+
42+
The `font-weight` property defines the thickness of the characters. Common values include `normal`, `bold`, `bolder`, `lighter`, or numerical values ranging from 100 to 900.
43+
44+
```css
45+
strong {
46+
font-weight: bold;
47+
}
48+
49+
p.light {
50+
font-weight: 300;
51+
}
52+
```
53+
54+
**4. Font Style**
55+
56+
The `font-style` property allows you to italicize the text.
57+
58+
```css
59+
em {
60+
font-style: italic;
61+
}
62+
63+
p.oblique {
64+
font-style: oblique;
65+
}
66+
```
67+
68+
**5. Font Variant**
69+
70+
The `font-variant` property is used for small-caps and other typographic features.
71+
72+
```css
73+
p {
74+
font-variant: small-caps;
75+
}
76+
```
77+
78+
**6. Text Transform**
79+
80+
The `text-transform` property changes the case of the text.
81+
82+
```css
83+
h1 {
84+
text-transform: uppercase;
85+
}
86+
87+
p {
88+
text-transform: capitalize;
89+
}
90+
```
91+
92+
**7. Text Alignment**
93+
94+
The `text-align` property sets the horizontal alignment of the text.
95+
96+
```css
97+
div {
98+
text-align: center;
99+
}
100+
101+
p {
102+
text-align: justify;
103+
}
104+
```
105+
106+
**8. Text Decoration**
107+
108+
The `text-decoration` property adds decorations to the text, such as underlines, overlines, and line-throughs.
109+
110+
```css
111+
a {
112+
text-decoration: none; /* Removes underline from links */
113+
}
114+
115+
del {
116+
text-decoration: line-through;
117+
}
118+
```
119+
120+
**9. Text Shadow**
121+
122+
The `text-shadow` property adds a shadow effect to the text.
123+
124+
```css
125+
h1 {
126+
text-shadow: 2px 2px 5px gray;
127+
}
128+
```

0 commit comments

Comments
 (0)