-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
64 lines (62 loc) · 3.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>My Afrofem web development Assignment</title>
<link rel="stylesheet" href="./style.css"/>
</head>
<body>
<h1 class = "underline ">Introduction to CSS</h1>
<p>CSS (<span class=" bold underline">C</span>ascading <span class="bold underline">S</span>tyle <span class="bold underline">S</span>heets) is the code that styles web content. CSS basics walks through what you need to get started. We'll answer questions like: How do I make text red? How do I make content display at a certain location in the (webpage) layout?
How do I decorate my webpage with background images and colors?
<br/>
<br/>
<span id="intro-ps">
CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working with Tim Berners-Lee at CERN.
</span>
</p>
<h2 class = "underline">So what is CSS?</h2>
<p> Like HTML, CSS is not a programming language. It's not a markup language either.<span class="bold">CSS is a style sheet language.</span> CSS is what you use to selectively style HTML elements.
For example, this CSS selects paragraph text, setting the color to red:
</p>
<h2 id="css-anatomy-heading">Anatomy of an CSS ruleset</h2>
<img
src= "https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics/css-declaration-small.png"
alt = "Anatomy of a CSS, showing the selector and declaration"
width ="500"
/>
<p> The mains parts of a CSS rulest :</p>
<ol>
<li> <strong> The Selector:</strong> This is the HTML element name at the start of the ruleset.
It defines the element(s) to be styled (in this example, <p> elements).To style a different element, change the selector.
</li>
<li> <strong>Declaration:</strong>This is a single rule like color: red;.
It specifies which of the element's properties you want to style.
</li>
<li> <strong>Properties</strong> These are ways in which you can style an HTML element. (In this example, color is a property of the <p> elements.)
In CSS, you choose which properties you want to affect in the rule.
</li>
<li> <strong>Property value</strong>To the right of the property—after the colon—there is the property value. This chooses one out of many possible appearances for a given property.
(For example, there are many color values in addition to red.)
</li>
</ol>
<h2>Summary</h2>
<p>
CSS stands for Cascading Style Sheets.
It is a language designed to specify the overall appearance of webpages as well as the appearance and structure
of the text and elements such as images and buttons on webpages and their layout.
</p>
<ul>
<li>Font style and size(s)</li>
<li>page colour</li>
<li>Text weight</li>
<li>Font colour</li>
<li>text-decoration(link)</li>
</ul>
<p>We have barely scratched the surface of what's possible with CSS, to learn more you can checkout the resources below
<p>PS.This lesson is based on <a
target = "_blank"
href = "https://www.w3schools.com/css/"
>CSS basics</a> from W3schools.If you wish to learn more, totally checkout the page.</p>
</body>
</html>