Skip to content

Commit ff343b2

Browse files
dinanathsj29dinanathsj29
authored
initial example files commit
initial example files commit
1 parent 1f7b208 commit ff343b2

File tree

65 files changed

+3821
-0
lines changed

Some content is hidden

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

65 files changed

+3821
-0
lines changed

‎_examples-css3-fundamentals/2. Introducing CSS/02.01.css.intro.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>02.01.css.intro.html</title>
10+
11+
<!-- internal style -->
12+
<style>
13+
/* css selector: { property:value; } */
14+
body{
15+
background-color: #FFC0E5;
16+
font-family: Arial, Helvetica, sans-serif;
17+
line-height: 30px;
18+
}
19+
</style>
20+
21+
</head>
22+
23+
<body>
24+
25+
<h1>02.01.css.intro.html</h1>
26+
27+
<!-- inline style -->
28+
<h1 style="font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-decoration: underline;"></h1>>Getting Started with CSS</h1>
29+
30+
<p>In this tutorial you'll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML. <br /> <br />
31+
If you're just starting out in the world of web development, start learning from here <br /><br />
32+
Well, let's get started with the most popular style sheet language.</p>
33+
34+
</body>
35+
36+
</html>

‎_examples-css3-fundamentals/3. CSS Basics/03.01.default.browser.styles.html‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>03.01.default.browser.styles.html</title>
10+
11+
</head>
12+
13+
<body>
14+
15+
<h1>03.01.default.browser.styles.html</h1>
16+
17+
<ul>
18+
<li><strong>Note: Check the page source or Inspect page with Debugger utilities like: `FireBug, Inspect/ Inspect Element` (in browser -> Right Click on page -> choose Inspect Element -> Check/observe actual HTML/CSS code/tags/properties).</strong></li>
19+
</ul>
20+
21+
<p>When Designer/Developer writes CSS to show custom look it overwrites browser default styles and apply `custom styles` <br /> <br />
22+
- Many HTML elements come with browser specific some default CSS properties which can sometimes result in unknown/unwanted behaviour</p>
23+
24+
</body>
25+
26+
</html>

‎_examples-css3-fundamentals/3. CSS Basics/03.02.syntax.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>03.02.syntax.html</title>
10+
11+
<!-- internal style -->
12+
<style>
13+
/* css selector: { property:value; } */
14+
body{
15+
background-color: #FFC0E5;
16+
font-family: Arial, Helvetica, sans-serif;
17+
line-height: 30px;
18+
}
19+
20+
p {
21+
color: #0000ff;
22+
font-size: 20px;
23+
}
24+
</style>
25+
26+
</head>
27+
28+
<body>
29+
30+
<h1>03.02.syntax.html</h1>
31+
32+
<ul>
33+
<li>A CSS rule consists of a set of style rules that are interpreted by the browser and then applied to the corresponding elements in the document.</li>
34+
</ul>
35+
36+
<img src="../assets/images/css-selector.png" alt="css-selector.png" title="css-selectors" />
37+
38+
<p>Selectors are used to declare which of the markup elements a style applies to. <br /> <br />
39+
The declarations that appear in the block that follows the selector may be applied to all elements of a specific type, or only those elements that match a certain attribute.
40+
</p>
41+
42+
</body>
43+
44+
</html>

‎_examples-css3-fundamentals/3. CSS Basics/03.04.selector.element.tag.type.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>03.04.selector.element.tag.type.html</title>
10+
11+
<!-- internal style -->
12+
<style>
13+
/* css selector: { property:value; } */
14+
h1 {
15+
background-color: #9999ff;
16+
text-transform: uppercase;
17+
}
18+
19+
li {
20+
line-height: 30px;
21+
letter-spacing: 3px;
22+
}
23+
24+
p {
25+
border: 2px dashed #9999ff;
26+
}
27+
</style>
28+
29+
</head>
30+
31+
<body>
32+
33+
<h1>3.3. Basic Selector types</h1>
34+
35+
<li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
36+
<li>CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more</li>
37+
<li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
38+
<li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
39+
40+
<p>Selector allows us to tell the browser which element/tag on the page we want to style.
41+
- CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
42+
- Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
43+
- Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
44+
</p>
45+
46+
<h1>03.04.selector.element.tag.type.html</h1>
47+
48+
<ul>
49+
<li>The element selector target/find/selects the HTML element/tag by name</li>
50+
<li>Global selectors based on any HTML element/tag name</li>
51+
<li>This is the simplest way to target all elements of a given element/tag/type</li>
52+
</ul>
53+
54+
<p>The element selector target/find/selects the HTML element/tag by name. Global selectors based on any HTML element/tag name. This is the simplest way to target all elements of a given element/tag/type.
55+
</p>
56+
57+
</body>
58+
59+
</html>

‎_examples-css3-fundamentals/3. CSS Basics/03.05.selector.class.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>03.05.selector.class.html</title>
10+
11+
<!-- internal style -->
12+
<style>
13+
/* css selector: { property:value; } */
14+
.headingsLarge {
15+
border: 2px dotted red;
16+
text-transform: uppercase;
17+
text-decoration: underline;
18+
padding: 10px;
19+
}
20+
21+
.highlightRed{
22+
background-color: #ffd1d1;
23+
margin: 30px;
24+
}
25+
26+
.highlightGreen{
27+
background-color: #d1ffd1;
28+
}
29+
</style>
30+
31+
</head>
32+
33+
<body>
34+
35+
<h1 class="headingsLarge">3.3. Basic Selector types</h1>
36+
37+
<li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
38+
<li>CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more</li>
39+
<li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
40+
<li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
41+
42+
<p>Selector allows us to tell the browser which element/tag on the page we want to style.
43+
- CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
44+
- Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
45+
- Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
46+
</p>
47+
48+
<h1 class="headingsLarge">3.5. Class Selector</h1>
49+
50+
<ul>
51+
<li class="highlightRed">The class selector selects HTML elements with a specific class attribute </li>
52+
<li class="highlightGreen">It is used with a period character . (full stop symbol) followed by the class name</li>
53+
<li class="highlightRed">Attribute selector based on `class attributes` applied to HTML element/tag</li>
54+
<li class="highlightGreen">Generic set of rules applied to similar looking item</li>
55+
<li class="highlightRed">.class is very important attribute while dealing with HTML+CSS as similar looking/output based things on web page usually belongs to one class</li>
56+
</ul>
57+
58+
<p>The class selector selects HTML elements with a specific class attribute . It is used with a period character . (full stop symbol) followed by the class name. Attribute selector based on `class attributes` applied to HTML element/tag.
59+
</p>
60+
61+
</body>
62+
63+
</html>

‎_examples-css3-fundamentals/3. CSS Basics/03.06.selector.id.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>03.06.selector.id.html</title>
10+
11+
<!-- internal style -->
12+
<style>
13+
/* css selector: { property:value; } */
14+
.headingMain {
15+
border: 2px dotted red;
16+
text-transform: uppercase;
17+
text-decoration: underline;
18+
padding: 10px;
19+
font-family:Arial;
20+
font-style: italic;
21+
letter-spacing: 6px;
22+
text-align: center;
23+
}
24+
</style>
25+
26+
</head>
27+
28+
<body>
29+
30+
<h1>3.3. Basic Selector types</h1>
31+
32+
<li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
33+
<li>CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more</li>
34+
<li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
35+
<li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
36+
37+
<p>Selector allows us to tell the browser which element/tag on the page we want to style.
38+
- CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
39+
- Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
40+
- Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
41+
</p>
42+
43+
<h1 class="headingMain">3.6. ID Selector</h1>
44+
45+
<ul>
46+
<li>The id selector selects the id attribute of an HTML element to select a specific element</li>
47+
<li>It is used with a hash/pound character # followed by the id name</li>
48+
<li>Attribute selector based on specific id attributes applied to HTML element/tag</li>
49+
<li>An `id` is always `single/unique` within the page so it is chosen to select a single, unique element in web page</li>
50+
<li>#id is very important attribute while dealing with HTML+CSS to make and target single unique thing</li>
51+
</ul>
52+
53+
<p>The id selector selects the id attribute of an HTML element to select a specific element. It is used with a hash/pound character # followed by the id name. Attribute selector based on specific id attributes applied to HTML element/tag.
54+
</p>
55+
56+
</body>
57+
58+
</html>

‎_examples-css3-fundamentals/3. CSS Basics/03.07.selector.universal.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
9+
<title>03.07.selector.universal.html</title>
10+
11+
<!-- internal style -->
12+
<style>
13+
/* css selector: { property:value; } */
14+
* {
15+
color: purple;
16+
letter-spacing: 3px;
17+
line-height: 36px;
18+
word-spacing: 5px;
19+
text-transform: capitalize;
20+
}
21+
22+
</style>
23+
24+
</head>
25+
26+
<body>
27+
28+
<h1>3.3. Basic Selector types</h1>
29+
30+
<li>Selector allows us to tell the browser which element/tag on the page we want to style</li>
31+
<li>CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more</li>
32+
<li>Selector may target: Single element, group of elements, .class, #id, any specific conditional element</li>
33+
<li>Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style</li>
34+
35+
<p>Selector allows us to tell the browser which element/tag on the page we want to style.
36+
- CSS selectors are used to "target/find/select" HTML elements based on element/tag name, id, class, attribute, and more.
37+
- Selector may target: Single element, group of elements, .class, #id, any specific conditional element.
38+
- Selectors are used to declare which of the markup elements a style applies to, Selector indicates the HTML element you want to style.
39+
</p>
40+
41+
<h1>3.7. Universal Selector</h1>
42+
43+
<ul>
44+
<li>The universal selector selects all the elements on the page </li>
45+
<li>Rather selecting elements of a specific type, the universal selector simply matches the name of any element type</li>
46+
<li>The universal selector is used as a wildcard * character</li>
47+
</ul>
48+
49+
<p>The universal selector selects all the elements on the page . Rather selecting elements of a specific type, the universal selector simply matches the name of any element type. The universal selector is used as a wildcard * character.
50+
</p>
51+
52+
</body>
53+
54+
</html>

0 commit comments

Comments
 (0)