Skip to content

Commit e241c8b

Browse files
README.md
1 parent f76e24c commit e241c8b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

88 files changed

+2524
-272
lines changed

0.5.Selector CSS/index.html

-65
This file was deleted.

0.5.Selector CSS/readme.md

-29
This file was deleted.

01.Backgound_property/index.html

-39
This file was deleted.

01.Backgound_property/style.css

-44
This file was deleted.

01.get-start-css/image.webp

195 KB
Binary file not shown.

01.get-start-css/index.html

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Document</title>
7+
<style>
8+
h1{
9+
color:tomato;
10+
font-size: 60px;
11+
text-align: center;
12+
text-transform: uppercase;
13+
text-shadow: 2px 2px 2px black;
14+
font-family: Verdana, Geneva, Tahoma, sans-serif;
15+
word-spacing: 20px;
16+
letter-spacing: 10px;
17+
/* background-color: whitesmoke; */
18+
background-image: url(image.webp);
19+
}
20+
li{
21+
font-size: 1.5rem;
22+
color: royalblue;
23+
}
24+
</style>
25+
</head>
26+
<body>
27+
<!-- <font color="teal" size="5"> -->
28+
<h1> <i>CSS Text Style</i></h1>
29+
<!-- </font> -->
30+
<h2 style="color:tomato; font-size: 5rem;">Way To Apply CSS </h2>
31+
<ol>
32+
<li>Inline </li>
33+
<li>Internal</li>
34+
<li>External</li>
35+
</ol>
36+
</body>
37+
</html>

01.get-start-css/readme.md

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# 🎨 CSS : Cascading Style Sheet Language
2+
3+
> Use to Presentation Of Markup Language.
4+
5+
**CSS stands for Cascading Style Sheets. It is a language used to describe the presentation and formatting of HTML (Hypertext Markup Language) documents, which are commonly used for creating websites and web applications. CSS is used to control how elements on a webpage are displayed, including their layout, colors, fonts, and spacing.**
6+
7+
<hr>
8+
9+
### 🖥 CSS Syntax
10+
11+
12+
- > #### start with style attribute (style = " ") associated with html tag
13+
- > #### property name : Value or key : value
14+
-
15+
### 🖥 Method OF CSS Implementation
16+
<ol>
17+
<li>Inline </li>
18+
<li>Internal Type</li>
19+
<li>External Type</li>
20+
</ol>
21+
22+
### 🖥 TYPE OF Selectors
23+
<ol>
24+
<li>Tag Selector</li>
25+
<li>Attribute Selector</li>
26+
<li>class Selector</li>
27+
<li>id Selector</li>
28+
</ol>
29+
30+
## Difference between class and id ?
31+
32+
<hr>
33+
34+
<a href="/start-css.html">Click To show code</a>
35+
36+
<a href="https://punitkatiyar.github.io/css-master-guide/01.get-start-css/start-css.html">Show Result</a>

01.get-start-css/start-css.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<title>Start CSS</title>
9+
<style>
10+
/*
11+
css comments
12+
css selector [tag,attaribute,class(.),id(#)]
13+
*/
14+
p {
15+
color: red;
16+
}
17+
18+
input[type='text'] {
19+
width: 40%;
20+
height: 40px;
21+
}
22+
23+
.msg {
24+
text-align: center;
25+
}
26+
27+
.txt {
28+
font-size: 2rem;
29+
}
30+
31+
#msg {
32+
text-align: right;
33+
}
34+
35+
#txt {
36+
font-size: 2rem;
37+
}
38+
</style>
39+
40+
</head>
41+
42+
<body>
43+
<!--
44+
tag
45+
attribute style
46+
height=100px
47+
height : 100px
48+
-->
49+
<h1 style="color:red; text-align:center; background: royalblue;">Welcome to css </h1>
50+
<h2 style="color:white; text-align:center; background: red;">Lorem ipsum dolor sit amet.</h2>
51+
<p class="msg txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.</p>
52+
<p class="msg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.</p>
53+
<p class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.</p>
54+
<p class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.</p>
55+
<p id="msg txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.</p>
56+
<p id="msg">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat, soluta.</p>
57+
<input type="text">
58+
<input type="submit">
59+
60+
61+
62+
63+
</body>
64+
65+
</html>

01.get-start-css/style.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+

02.css-with-text/readme.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
# CSS With Text 📰
2+
3+
1. text-align:;
4+
5+
2. color: ;
6+
7+
3. font-size: ;
8+
9+
4. font-family: ;
10+
11+
5. letter-spacing: ;
12+
13+
6. word-spacing: ;
14+
15+
7. text-transform: ;
16+
17+
8. text-shadow: ;
18+
19+
9. text-decoration: ;
20+
21+
10. line-height: ;
22+
23+
11. font-weight: ;
24+
25+
<!-- 12. text-indent: ; -->
26+
27+
13. vertical-align: ;
28+
29+
14. font: ;
30+
31+
15. white-space: ;

0 commit comments

Comments
 (0)