Skip to content

Commit 4db6dc1

Browse files
Yashgabani845Yashgabani845
committed
browserwindow added
1 parent 300262c commit 4db6dc1

File tree

4 files changed

+70
-68
lines changed

4 files changed

+70
-68
lines changed

‎docs/CSS/css-borders.md

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -6,24 +6,23 @@ div.all-borders {
66
}
77
```
88

9-
#### Output
10-
11-
<div class="all-borders" style={{border: "1px solid black", padding: "10px"}}>
9+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
10+
<div class="all-borders" style={{border: "1px solid black", padding: "10px"}}>
1211
I have borders on all sides.
1312
</div>
14-
13+
</BrowserWindow>
1514
```css
1615
div.bottom-border {
1716
border-bottom: 1px solid red;
1817
}
1918
```
2019

2120
#### Output
22-
21+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
2322
<div class="bottom-border" style={{borderBottom: "1px solid red", padding: "10px"}}>
2423
I have a red bottom border.
2524
</div>
26-
25+
</BrowserWindow>
2726
```css
2827
div.rounded-borders {
2928
border: 1px solid black;
@@ -32,23 +31,23 @@ div.rounded-borders {
3231
```
3332

3433
#### Output
35-
34+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
3635
<div class="rounded-borders" style={{border: "1px solid black", borderRadius: "10px", padding: "10px"}}>
3736
I have rounded borders.
3837
</div>
39-
38+
</BrowserWindow>
4039
```css
4140
div.left-border {
4241
border-left: 1px solid blue;
4342
}
4443
```
4544

4645
#### Output
47-
46+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
4847
<div class="left-border" style={{borderLeft: "1px solid blue", padding: "10px"}}>
4948
I have a blue left border.
5049
</div>
51-
50+
</BrowserWindow>
5251
### CSS Border Style
5352

5453
```css
@@ -66,7 +65,7 @@ p.mix { border-style: dotted dashed solid double; }
6665
```
6766

6867
#### Output
69-
68+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
7069
<p class="dotted" style={{borderStyle: "dotted"}}>A dotted border.</p>
7170
<p class="dashed" style={{borderStyle: "dashed"}}>A dashed border.</p>
7271
<p class="solid" style={{borderStyle: "solid"}}>A solid border.</p>
@@ -78,7 +77,7 @@ p.mix { border-style: dotted dashed solid double; }
7877
<p class="none" style={{borderStyle: "none"}}>No border.</p>
7978
<p class="hidden" style={{borderStyle: "hidden"}}>A hidden border.</p>
8079
<p class="mix" style={{borderStyle: "dotted dashed solid double"}}>A mixed border.</p>
81-
80+
</BrowserWindow>
8281
### CSS Border Width
8382

8483
```css
@@ -104,12 +103,12 @@ p.four {
104103
```
105104

106105
#### Output
107-
106+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
108107
<p class="one" style={{borderStyle: "solid", borderWidth: "5px"}}>5px border-width</p>
109108
<p class="two" style={{borderStyle: "solid", borderWidth: "medium"}}>Medium border-width</p>
110109
<p class="three" style={{borderStyle: "dotted", borderWidth: "2px"}}>2px border-width</p>
111110
<p class="four" style={{borderStyle: "dotted", borderWidth: "thick"}}>Thick border-width</p>
112-
111+
</BrowserWindow>
113112
### CSS Border Color
114113

115114
```css
@@ -130,11 +129,11 @@ p.three {
130129
```
131130

132131
#### Output
133-
132+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
134133
<p class="one" style={{borderStyle: "solid", borderColor: "red"}}>Red border</p>
135134
<p class="two" style={{borderStyle: "solid", borderColor: "green"}}>Green border</p>
136135
<p class="three" style={{borderStyle: "dotted", borderColor: "blue"}}>Blue border</p>
137-
136+
</BrowserWindow>
138137
### CSS Border - Individual Sides
139138

140139
```css
@@ -147,23 +146,23 @@ p {
147146
```
148147

149148
#### Output
150-
149+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
151150
<p style={{borderTopStyle: "dotted", borderRightStyle: "solid", borderBottomStyle: "dotted", borderLeftStyle: "solid"}}>
152151
Different Border Styles
153152
</p>
154-
153+
</BrowserWindow>
155154
```css
156155
p {
157156
border-style: dotted solid;
158157
}
159158
```
160159

161160
#### Output
162-
161+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
163162
<p style={{borderStyle: "dotted solid"}}>
164163
Different Border Styles
165164
</p>
166-
165+
</BrowserWindow>
167166
### CSS Border - Shorthand Property
168167

169168
```css
@@ -173,19 +172,19 @@ p {
173172
```
174173

175174
#### Output
176-
175+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
177176
<p style={{border: "5px solid red"}}>
178177
Some text
179178
</p>
180-
179+
</BrowserWindow>
181180
```css
182181
p {
183182
border-left: 6px solid red;
184183
}
185184
```
186185

187186
#### Output
188-
187+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
189188
<p style={{borderLeft: "6px solid red"}}>
190189
Some text
191190
</p>
@@ -195,13 +194,13 @@ p {
195194
border-bottom: 6px solid red;
196195
}
197196
```
198-
197+
</BrowserWindow>
199198
#### Output
200-
199+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
201200
<p style={{borderBottom: "6px solid red"}}>
202201
Some text
203202
</p>
204-
203+
</BrowserWindow>
205204
### CSS Rounded Borders
206205

207206
```css
@@ -212,11 +211,11 @@ p {
212211
```
213212

214213
#### Output
215-
214+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
216215
<p style={{border: "2px solid red", borderRadius: "5px"}}>
217216
Normal border
218217
</p>
219-
218+
</BrowserWindow>
220219
```css
221220
p {
222221
border: 2px solid red;
@@ -225,11 +224,11 @@ p {
225224
```
226225

227226
#### Output
228-
227+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
229228
<p style={{border: "2px solid red", borderRadius: "15px"}}>
230229
Round border
231230
</p>
232-
231+
</BrowserWindow>
233232
```css
234233
p {
235234
border: 2px solid red;
@@ -238,11 +237,11 @@ p {
238237
```
239238

240239
#### Output
241-
240+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
242241
<p style={{border: "2px solid red", borderRadius: "25px"}}>
243242
Rounder border
244243
</p>
245-
244+
</BrowserWindow>
246245
```css
247246
p {
248247
border: 2px solid red;
@@ -251,7 +250,8 @@ p {
251250
```
252251

253252
#### Output
254-
253+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
255254
<p style={{border: "2px solid red", borderRadius: "50px"}}>
256255
Roundest border
257256
</p>
257+
</BrowserWindow>

‎docs/CSS/css-margins.md

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -40,11 +40,11 @@ p {
4040
```
4141

4242
#### Output
43-
43+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
4444
<p style={{marginTop: "100px", marginBottom: "100px", marginRight: "150px", marginLeft: "80px", border: "1px solid blue"}}>
4545
This paragraph has different margins for all four sides.
4646
</p>
47-
47+
</BrowserWindow>
4848
## Margin - Shorthand Property
4949

5050
To shorten the code, it is possible to specify all the margin properties in one property.
@@ -78,11 +78,11 @@ p {
7878
```
7979

8080
#### Output
81-
81+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
8282
<p style={{margin: "25px 50px 75px 100px", border: "1px solid green"}}>
8383
This paragraph uses the margin shorthand with four values.
8484
</p>
85-
85+
</BrowserWindow>
8686
### If the margin property has three values:
8787

8888
```css
@@ -104,10 +104,10 @@ p {
104104
```
105105

106106
#### Output
107-
107+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
108108
<p style={{margin: "25px 50px 75px", border: "1px solid red"}}>
109109
This paragraph uses the margin shorthand with three values.
110-
</p>
110+
</p></BrowserWindow>
111111

112112
### If the margin property has two values:
113113

@@ -129,11 +129,11 @@ p {
129129
```
130130

131131
#### Output
132-
132+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
133133
<p style={{margin: "25px 50px", border: "1px solid purple"}}>
134134
This paragraph uses the margin shorthand with two values.
135135
</p>
136-
136+
</BrowserWindow>
137137
### If the margin property has one value:
138138

139139
```css
@@ -153,11 +153,11 @@ p {
153153
```
154154

155155
#### Output
156-
156+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
157157
<p style={{margin: "25px", border: "1px solid orange"}}>
158158
This paragraph uses the margin shorthand with one value.
159159
</p>
160-
160+
</BrowserWindow>
161161
## The `auto` Value
162162

163163
You can set the `margin` property to `auto` to horizontally center the element within its container.
@@ -177,11 +177,11 @@ div {
177177
```
178178

179179
#### Output
180-
180+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
181181
<div style={{width: "300px", margin: "auto", border: "1px solid red"}}>
182182
This div is centered horizontally with `margin: auto`.
183183
</div>
184-
184+
</BrowserWindow>
185185
## The `inherit` Value
186186

187187
This example lets the left margin of the `<p class="ex1">` element be inherited from the parent element (`<div>`):
@@ -202,13 +202,13 @@ p.ex1 {
202202
```
203203

204204
#### Output
205-
205+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
206206
<div style={{border: "1px solid red", marginLeft: "100px"}}>
207207
<p className="ex1" style={{marginLeft: "inherit", border: "1px solid blue"}}>
208208
This paragraph inherits its left margin from the parent div.
209209
</p>
210210
</div>
211-
211+
</BrowserWindow>
212212
## All CSS Margin Properties
213213

214214
| Property | Description |

‎docs/CSS/css-outline.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ p.outset {outline-style: outset;}
4242
```
4343

4444
#### Output
45-
45+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
4646
<p class="dotted" style={{outlineStyle: 'dotted'}}>A dotted outline.</p>
4747
<p class="dashed" style={{outlineStyle: 'dashed'}}>A dashed outline.</p>
4848
<p class="solid" style={{outlineStyle: 'solid'}}>A solid outline.</p>
@@ -51,7 +51,7 @@ p.outset {outline-style: outset;}
5151
<p class="ridge" style={{outlineStyle: 'ridge'}}>A ridge outline. The effect depends on the outline-color value.</p>
5252
<p class="inset" style={{outlineStyle: 'inset'}}>An inset outline. The effect depends on the outline-color value.</p>
5353
<p class="outset" style={{outlineStyle: 'outset'}}>An outset outline. The effect depends on the outline-color value.</p>
54-
54+
</BrowserWindow>
5555
## CSS Outline Width
5656

5757
The `outline-width` property specifies the width of the outline, and can have one of the following values:
@@ -94,12 +94,12 @@ p.ex4 {
9494
```
9595

9696
#### Output
97-
97+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
9898
<p class="ex1" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: 'thin'}}>A thin outline.</p>
9999
<p class="ex2" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: 'medium'}}>A medium outline.</p>
100100
<p class="ex3" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: 'thick'}}>A thick outline.</p>
101101
<p class="ex4" style={{border: '1px solid black', outlineStyle: 'solid', outlineColor: 'red', outlineWidth: '4px'}}>A 4px thick outline.</p>
102-
102+
</BrowserWindow>
103103
## CSS Outline Color
104104

105105
The `outline-color` property is used to set the color of the outline.
@@ -135,11 +135,11 @@ p.ex3 {
135135
```
136136

137137
#### Output
138-
138+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
139139
<p class="ex1" style={{border: '2px solid black', outlineStyle: 'solid', outlineColor: 'red'}}>A solid red outline.</p>
140140
<p class="ex2" style={{border: '2px solid black', outlineStyle: 'dotted', outlineColor: 'blue'}}>A dotted blue outline.</p>
141141
<p class="ex3" style={{border: '2px solid black', outlineStyle: 'outset', outlineColor: 'grey'}}>An outset grey outline.</p>
142-
142+
</BrowserWindow>
143143
## CSS Outline - Shorthand property
144144

145145
The `outline` property is a shorthand property for setting the following individual outline properties:
@@ -160,8 +160,9 @@ p.ex4 {outline: thick ridge pink;}
160160
```
161161

162162
#### Output
163-
163+
<BrowserWindow url="http://127.0.0.1:5500/index.html">
164164
<p class="ex1" style={{outline: 'dashed'}}>A dashed outline.</p>
165165
<p class="ex2" style={{outline: 'dotted red'}}>A dotted red outline.</p>
166166
<p class="ex3" style={{outline: '5px solid yellow'}}>A 5px solid yellow outline.</p>
167167
<p class="ex4" style={{outline: 'thick ridge pink'}}>A thick ridge pink outline.</p>
168+
</BrowserWindow>

0 commit comments

Comments
 (0)