WEEKLYREPORT

WEEK-1
(From 25-06-22 to 01-07-22)
A) HTML
(1) Introduction to HTML
HTML stands for Hyper Text Markup Language. It is used to design web pages
using a markup language. HTML is the combination of Hypertext and Markup
language. Hypertext defines the link between web pages. A markup language is
used to define the text document within the tag which defines the structure of web
pages. This language is used to annotate (make notes for the computer) text so
that a machine can understand it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The language uses tags to define
what manipulation has to be done on the text. HTML is a markup language used
by the browser to manipulate text, images, and other content, in order to display it
in the required format. HTML was created by Tim Berners-Lee in 1991. The
first-ever version of HTML was HTML 1.0, but the first standard version was
HTML 2.0, published in 1995.

(2) Browsers and HTML

A web browser is a software application specifically for the purpose of reading
HTML instructions and displaying the resulting Web page. It is a fully functional
software that can interpret and display HTML Web pages, applications, JavaScript,
AJAX and other content hosted on Web servers. HTML is responsible for telling a
Web browser how text and other objects in a Web document should appear.
Hypertext Transfer Protocol (HTTP) is define how browsers should request Web
pages and how Web servers should respond to those requests.
How to Web Browsers Work ?
A web browser typically reads and renders HTML documents. This happens inside
the browser as two stages - the parsing stage and the rendering stage. During the
parsing stage, the browser reads the markup in the document, breaks it down into
components, and builds a document object model (DOM). When the DOM tree has
been constructed, and any CSS style sheets have been loaded and parsed, the
browser starts the rendering stage. Each node in the DOM tree will be rendered and
displayed in the browser.

Web Browser - Brief History

The first web browser was invented in 1990 by Sir Tim Berners Lee. It was called
WorldWideWeb and was later renamed as Nexus. After that the world's first
popular browser Mosaic innovated by Marc Andreessen in 1993, which made the
World Wide Web system easy to use and more accessible to the average person.
Over the years many other browsers were developed, but Microsoft Internet
Explorer, Mozilla Firefox and Google's Chrome continue to dominate today’s
market
Web Browser HTML Support
All web activity begins on the client side , when a user starts his or her browser.
Each browser renders HTML a bit differently such as handles JavaScript,
multimedia, style sheets, and other HTML add-ins differently. Web browsers were
created specifically for the purpose of reading HTML instructions and displaying
the resulting Web page. So when you work with HTML, you need to test your
pages on as many different browsers as you can.

WEEKLY REPORT
 WEEK-2
(From 02-07-22 to 08-07-22)

(3) Editors offline and online

Offline Editors
HTML editors are an integral part of creating websites. Whether you like to code
your own HTML, or prefer to simply click and drag elements around the page, a
good HTML editor will make your life easier.
We can use any of the online HTML editors on this website, or if you prefer, you
can download a commercial HTML editor for use on your own computer.
This free HTML editor lets you create HTML codes for your website or blog.
Click on the "Source" button to view the generated code. Also see the Full HTML
Editor which has more buttons, and check out our range of HTML Generators.
  The following HTML editors are also available for free.
 HTML Editor
 HTML Text Editor
 HTML Bold Editor
 Text Color Editor
 HTML Link Editor
 Image Code Editor
 Offline Editor
An offline editor allows you to create websites directly from your own computer
(as opposed to generating the HTML online, then copy/pasting like an online
editor). A good offline HTML editor will provide you with a vast array of
functionality that you can configure to your own personal liking.
KompoZer, CoffeeCup, and HTML-Kit are popular HTML editors that contain
features that you'd expect in most HTML editors, plus a few more. Typical features
include HTML and CSS support, split screen view, HTML entities library, built-in
FTP client and more.
Online Website Builder
Also try this online website builder at our partner site, ZappyHost. This is a "one-
stop-shop" for building your own website. Using this option, you don't need to
keep a copy of your website on your own computer - you can maintain your
website from any computer. Also, you don't even need to know HTML. The
website builder uses a "point and click" method and generates the entire HTML
behind the scenes.
About The Online HTML Editors
The online HTML editors on this website are known as "CKEditor", which can be
downloaded from the CKEditor website. It is distributed under the GPL, LGPL,
and MPL open source licences.
(4) Tags, Attributes and Elements
Elements and Tags: HTML uses predefined tags and elements which tell the
browser how to properly display the content. Remember to include closing tags.
If omitted, the browser applies the effect of the opening tag until the end of the
page.
HTML page structure: The basic structure of an HTML page is laid out below. It
contains the essential building-block elements (i.e. doctype declaration, HTML,
head, title, and body elements) upon which all web pages are created.
 WEEKLY REPORT
Week 3
(From 09-07-22 to 15-07-22)

(5) Doctype Element

<!DOCTYPE html>: This is the document type declaration (not technically a
tag). It declares a document as being an HTML document. The doctype
declaration is not case-sensitive.
<html>: This is called the HTML root element. All other elements are contained
within it.
<head>: The head tag contains the “behind the scenes” elements for a webpage.
Elements within the head aren’t visible on the front-end of a webpage. HTML
elements used inside the <head> element include: 
<style>-This html tag allows us to insert styling into our webpages and make
them appealing to look at with the help of CSS.
<title>-The title is what is displayed on the top of your browser when you visit a
website and contains title of the webpage that you are viewing.
<base>-It specifies the base URL for all relative URL’s in a document.
<noscript>– Defines a section of HTML that is inserted when the scripting has
been turned off in the users browser.
<script>-This tag is used to add functionality in the website with the help of
JavaScript.
<meta>-This tag encloses the meta data of the website that must be loaded every
time the website is visited. For eg:- the metadata charset allows you to use the
standard UTF-8 encoding in your website. This in turn allows the users to view
your webpage in the language of their choice. It is a self closing tag.
<link>– The ‘link’ tag is used to tie together HTML, CSS and JavaScript. It is
self closing.
<body>: The body tag is used to enclose all the visible content of a webpage. In
other words, the body content is what the browser will show on the front-end.
An HTML document can be created using any text editor. Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened as
a webpage in the browser.
Note: Basic/built-in text editors are Notepad (Windows) and TextEdit (Macs).
Basic text editors are entirely sufficient for when you’re just getting started. As
you progress, there are many feature-rich text editors available which allow for
greater function and flexibility.
HTML <!DOCTYPE> Declaration
Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
Definition and Usage
All HTML documents must start with a <!DOCTYPE> declaration.
The declaration is not an HTML tag. It is an "information" to the browser about
what document type to expect.
In HTML 5, the declaration is simple:
<!DOCTYPE html>
Tip: The <!DOCTYPE> declaration is NOT case sensitive.

(6) Comments
An HTML comment:
<!--This is a comment. Comments are not displayed in the browser-->
<p>This is a paragraph.</p>
Definition and Usage
The comment tag is used to insert comments in the source code. Comments are not
displayed in the browsers.
You can use comments to explain your code, which can help you when you edit
the source code at a later date. This is especially useful if you have a lot of code.
Standard Attributes
The comment tag does not support any standard attributes.
Event Attributes
The comment tag does not support any event attributes.

(7) Headings, Paragraphs, and Formatting Text

What is an HTML Heading?
An HTML heading is a title or subheading that we want to display on a webpage.
In HTML, there are six headings defined using <h1> to <h6> tags. h1 is the
highest level or the main heading, while h6 is the least important.
The text inside the heading tags <h1>TEXT</h1> shows on the browser. The size
of the text depends on the heading tag.
HTML Headings Syntax:
<h1>TEXT</h1>
Output:

Explanation:
<h1>: It is the start tag for the H1 heading.
TEXT: This text will appear as the main heading on a visitor’s screen.
</h1>: This is the closing tag for the H1 heading.
Why are HTML Headings are Important?
Headings in HTML are helpful for both search engines and site visitors. Here are
the benefits:
Search Engines: HTML headings help search engines understand and index the
structure of a web page. The <h1>…</h1> tag is for main headings. It is followed
by <h2> through <h6> tags that denote subheadings.
Site Visitors: They also help site visitors quickly scan and understand a page.
Proper headings on a web page help visitors determine if the content is relevant to
them.
HTML Heading Tags
The following are the six HTML tags for different heading sizes.
<h1>Heading 1</h1> - (Most Important)
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6> - (Least Important)
 Here is a simple example in HTML to display the H1 through H6 headings on a
web page:
<!DOCTYPE html>
<html>
<head>
<title>Heading in HTML</title>
</head>
<body>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
</body>
</html>
Output:
What is an HTML Paragraph?
Paragraphs tags or <p> tags in HTML help us create paragraphs on a web page. On
web browsers, paragraphs display as blocks of text separated from adjacent blocks
by blank lines, white spaces, or first-line indentation.
You can use a <p> tag followed by the content you want to display in your
paragraph and a </p>. Whenever the web browser comes across a <p> tag, it starts
its contents on a new line.
HTML Paragraph Syntax:
<p>Paragraph Content</p>
Output:

Explanation:
<p>: Start tag for the paragraph.
Paragraph Content: The text will appear as a paragraph on a visitor’s screen.
</h1>: It is the closing tag for the paragraph.
Why are HTML Paragraph Tags Important?
HTML paragraphs help us in multiple ways, such as:
They make a web page more readable by giving it a structural view.
Paragraphs can consist of different types of related content, such as text, images,
forms, and more.
Here is a simple example in HTML to display different paragraphs on a web page:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph in HTML</title>
</head>
<body>
<p>This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph
1. This is paragraph 1. This is paragraph 1. This is paragraph 1. This is paragraph
1. This is paragraph 1. This is paragraph 1. This is paragraph 1.</p>
<p>This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph
2. This is paragraph 2. This is paragraph 2. This is paragraph 2. This is paragraph
2. This is paragraph 2. This is paragraph 2. This is paragraph 2.</p>
<p>This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph
3. This is paragraph 3. This is paragraph 3. This is paragraph 3. This is paragraph
3. This is paragraph 3. This is paragraph 3. This is paragraph 3.</p>
</body>
</html>
Output:
HTML Paragraph Tag Attributes
The paragraph tag in HTML supports some attributes, which include:

Attribute Value Description

left
right
align center Aligns the text within a paragraph
justif
y

Example:
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Align Attribute</title>
</head>
<body>
<pstyle="text-align: left;">This</p>
<pstyle="text-align: center;">Is </p>
<pstyle="text-align: right;">Paragraph Alignment</p>
</body>
</html>
Output:
HTML Line Break
HTML line break tags help when we don’t want to start a new paragraph but want
the sentence to start from a new line. Using the <br> tag, we can break the
sentence continuation and make it begin on a new line.
Example:
<!DOCTYPE html>
<html>
<head>
<title>HTML Line Break</title>
</head>
<body>
<p>This is an example to show how the line break tag can break the sentence
continuation and make it start from a new line. <br>This helps when we want our
content to start on a new line but do not want to start a new paragraph. </p>
</body>
</html>
Output:
 WEEKLYREPORT
WEEK -4
(From 16-07-22 to 22-07-22)

(8) Lists and Links

HTML lists allow web developers to group a set of related items in lists.
Example
An unordered HTML list:
o Item
o Item
o Item
o Item
An ordered HTML list:
1. First item
2. Second item
3. Third item
4. Fourth item
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:
Example
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items will be marked with numbers by default:
Example
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
HTML Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name), and
the <dd> tag describes each term:
Example
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

HTML List Tags

Tag Description

<ul> Defines an unordered list

 <ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand.
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:
<a href="url">link text</a>
The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
The link text is the part that will be visible to the reader.
Clicking on the link text, will send the reader to the specified URL address.
Example
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
By default, links will appear as follows in all browsers:
An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red
Tip: Links can of course be styled with CSS, to get another look!
HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.
The target attribute specifies where to open the linked document.
The target attribute can have one of the following values:
_self - Default. Opens the document in the same window/tab as it was clicked
_blank - Opens the document in a new window or tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the window
Example
Use target="_blank" to open the linked document in a new browser window or tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Absolute URLs vs. Relative URLs
Both examples above are using an absolute URL (a full web address) in
the href attribute.
A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Link to an Email Address
Use mailto: inside the href attribute to create a link that opens the user's email
program (to let them send a new email):
Example
<a href="mailto:[email protected]">Send email</a>
Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.
JavaScript allows you to specify what happens at certain events, such as a click of
a button:
Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>
Link Titles
The title attribute specifies extra information about an element. The information is
most often shown as a tooltip text when the mouse moves over the element.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
More on Absolute URLs and Relative URLs
Example
Use a full URL to link to a web page: 
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
Example
Link to a page located in the html folder on the current web site: 
<a href="/html/default.asp">HTML tutorial</a>
Example
Link to a page located in the same folder as the current page: 
<a href="default.asp">HTML tutorial</a>
Example
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>
Chapter Summary
Use the <a> element to define a link
Use the href attribute to define the link address
Use the target attribute to define where to open the linked document
Use the <img> element (inside <a>) to use an image as a link
Use the mailto: scheme inside the href attribute to create a link that opens the user's
email program

(9) Images and Tables

HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
 width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
 <td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
HTML Images
Images can improve the design and the appearance of a web page.
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
HTML Images Syntax
The HTML <img> tag is used to embed an image in a web page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
The <img> tag is empty, it contains attributes only, and does not have a closing
tag.
The <img> tag has two required attributes:
src - Specifies the path to the image
alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext">
The src Attribute
The required src attribute specifies the path (URL) to the image.
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
The alt Attribute
The required alt attribute provides an alternate text for an image, if the user for
some reason cannot view it (because of slow connection, an error in the src
attribute, or if the user uses a screen reader).
The value of the alt attribute should describe the image:
Example
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:
Example
<img src="wrongname.gif" alt="Flowers in Chania">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
Example
<img src="img_girl.jpg" alt="Girl in a
jacket" style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
Example
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600">
The width and height attributes always define the width and height of the image in
pixels.
Width and Height, or Style?
The width, height, and style attributes are all valid in HTML.
However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:
Example
<!DOCTYPE html>
<html>
<head>
<style>
img {
  width: 100%;
}
</style>
</head>
<body>

<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">

</body>
</html>

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in
the src attribute:
Example
<img src="/images/html5.gif" alt="HTML5
Icon" style="width:128px;height:128px;">
Images on another Server/Website
Some web sites point to an image on another server.
To point to an image on another server, you must specify an absolute (full) URL in
the src attribute:
Example
<img src="https://www.w3schools.com/images/w3schools_green.jpg" al
t="W3Schools.com">
Notes on external images: External images might be under copyright. If you do not
get permission to use it, you may be in violation of copyright laws. In addition, you
cannot control external images; they can suddenly be removed or changed.
Animated Images
HTML allows animated GIFs:
Example
<img src="programming.gif" alt="Computer
Man" style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
Example
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a text:
Example
<p><img src="smiley.gif" alt="Smiley
face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley
face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
 WEEK REPORT
WEEK-5
(From 23-07-22 to 29-07-22)

B) CSS
(1) Introduction to CSS
CSS is the language we use to style a Web page.
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
CSS Demo - One HTML Page - Multiple Styles!
Here we will show one HTML page displayed with four different stylesheets. Click
on the "Stylesheet 1", "Stylesheet 2", "Stylesheet 3", "Stylesheet 4" links below to
see the different styles:
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
CSS Example
body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
If you don't know what HTML is, we suggest that you read our HTML Tutorial.
(2) Applying CSS to HTML
Linking CSS to HTML
To link your CSS to your HTML, you have to use the link tag with some relevant
attributes.
The link tag is a self-closing tag you should put at the head section of your HTML.
To link CSS to HTML with it, this is how you do it:
<link rel="stylesheet" type="text/css"href="styles.css" />
Place the link tag at the head section of your HTML as shown below:
<head>
<metacharset="UTF-8"/>
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet"type="text/css"href="styles.css"/>
<title>Link CSS to HTML</title>
</head>
Attributes of the Link Tag
The rel Attribute
rel is the relationship between the external file and the current file. For CSS, you
use stylesheet. For example, rel="stylesheet".
The type Attribute
type is the type of the document you are linking to the HTML. For CSS, it
is text/css. For example type="text/css".
The href Attribute
href stands for “hypertext reference”. You use it to specify the location of the CSS
file and the file name. It is a clickable link, so you can also hold CTRL and click it
to view the CSS file.
For example, href="styles.css" if the CSS file is located in the same folder as the
HTML file. Or href="folder/styles.css" if the CSS file is located on another folder.
 WEEK REPORT
WEEK-6
(From 30-07-22 to 05-08-22)

(3) CSS Selectors, Properties and Values

 By Ivaylo Ivanov  December 03, 2020  How to, Programming, UI/UX Design  11
Minutes
CSS is a style sheet used to style HTML elements carefully. Besides interacting with HTML
elements for styling, CSS controls the feel, topography, box models, screen/device
adaptation, and general layout of a web page.
CSS has a basic syntax. It consists of a selector, property, a value, followed by a
declaration block.
p{
color: blue;
text-transform: uppercase;
}
In the above code snippet, p (paragraph) is a selector pointing to the HTML
element that needs to be styled. Color and text-transform are properties. Blue and
uppercase are values of the property. The declaration block for p starts at the first
curly braces - '{' and ends at the second curly braces '}'. Each declaration must
include property and a value and is separated from other declarations by a semi-
colon.
CSS SELECTORS
A selector is simply the element to be styled. But as you write more CSS code,
you'll discover that selectors aren't just elements. They could be attributes, pseudo-
classes, ids, classes, and descendants.
According to W3resource, "CSS selectors select the elements on an HTML page
which match patterns described in a selector and style rules adhere to the selector
are applied on those selected elements".
This section will look at the different selectors in CSS and how you can implement
them.
The syntax for using any of the selectors is the same as CSS basic syntax.
UNIVERSAL SELECTOR
A universal selector is denoted by the symbol *. It affects every single element on
the document tree.
*{
color: purple;
}
This changes the color of all HTML document elements to purple, be it a
paragraph, an h1, h4, or a list. * are also used to target all values of a particular
element.
*h1 {
text-transform: uppercase;
}
This will change the value of all h1 elements only to uppercase. No other element
will be affected.
ELEMENT SELECTORS
This is the most common selector, and it involves targeting members of a
particular element when that element is defined.
p{
font-style: italic;
}
This code targets all paragraphs in a document and changes them to italics.
CLASSES AND IDS
Classes and IDs are defined in the HTML and earmarked in the CSS using '.' (for
classes) and '#' (for IDs). They target HTML elements with specific class or ID
names.
<p>This is a paragraph </p>
<p class="red">This is a red text </p>
<h4 id="uppercase">This is an uppercase text </p>
.red {
color: red;
}
#uppercase{
text-transform: uppercase;
}
The <p> tag without a class or id assigned to it will not be affected by the class or
id selectors.
DESCENDANT SELECTORS
A descendant selector is a selector that is a child of another selector.
nav>li {
list-style: none;
}
PSEUDO-CLASSES
These are classes that are based on their state. Their state is also a response to user
actions. Pseudo-classes do not stand alone on their own. They are attached to other
selectors, followed immediately by a colon, then state.
Hover, visited, before and active are common pseudo-classes.
a:hover{
color: green;
}
CSS PROPERTIES
CSS properties are the styles used on specified selectors. They are written before
values in the CSS ruleset and are separated from property values by a colon.
Different HTML selectors and elements have different properties. Some properties
are universal and can be used on every selector. Others work only on specific
selectors and under particular conditions.
An example of that is grid-template-columns, which is used to style the layout of a
page. It works mainly with divs with their display property set to the grid (display:
grid).
There are many properties and their values for HTML selectors. According to CSS
Tricks, there are "520 distinct property names from 66 technical reports and 66
editor's drafts".
Here are four common properties to work with
o List properties
o Font properties
o Border properties
o Text properties
These properties are common because they are frequently used in all CSS
documents and can be applied to different selectors. One unique thing about
properties is that they have more than one value attached to them. Text-transform,
for example, a property that controls a text's capitalization, can be set to uppercase,
lowercase, capitalize, or none. But this also poses a restraint. You must specify a
value to the right property else nothing happens. If we have 'text-transform:
underline;' nothing will change on the text part because underline is a value for
text-decoration.
Below are some properties, their descriptions, and the values they accommodate.
TEXT PROPERTIES
Properties Description Values
color Sets the color of a text Hex, RGB, keyword
text-transform Sets the capitalization of the text uppercase, lowercase, capitalize,
none
text-align Sets the alignment of the text on the right, left, center, justify
screen
letter-spacing Sets the spacing between text normal, length
characters
text- Sets the decoration added to the text none, underline, line-through,
decoration overline

BORDER PROPERTIES
Properties Description Values
border Sets the shorthand combination border-width, border-style, border-color
for border-width, border-style
and border-color
border- Sets the color for the border Keyword, RGB, Hex, transparent, inherit
color
border- Sets the radius of the four length, percentage, initial, inherit
radius corners of an element's border
border- Sets the style for an element's none, hidden, dotted, solid, dashed, double,
style border groove, inset, outset, ridge, initial, inherit
border- Sets an image as an element's border-image-source, border-image-width,
image border border-image-slice, border-image-repeat,
Properties Description Values
border-image-outset, initial, inherit

FONT PROPERTIES
Properties Description Values
font Sets the shorthand for all font-style, font-variant, font-weight, font-size/line-
the font specifications height, font-family, caption, icon, menu, message-
box, small-caption, status-bar, inherit
font- Sets the weight of a font normal, bold, bolder, lighter,
weight 100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
font-style Sets the style of a font Normal, italic, oblique, initial, inherit

LIST PROPERTIES
Properties Description Values
list-style Shorthand combination for list-style-type, list-style-position, list-style-
list-style-type, list-style- image, inherit
position, and list-style-
image
list-image Sets an image as the list- none, url, initial, inherit
item marker
list-type This sets the type of list- none, disc, circle, square, decimal, decimal-
item marker leading-zero, armenian, georgian, lower-alpha,
upper-alpha, lower-greek, lower-latin, upper-
latin, lower-roman, upper-roman, inherit
We cannot cover all the CSS properties here because it is quite broad, but you can
find an extensive list covering properties, their values, and CSS versions here
at meiert.com. W3schools also has a CSS reference that covers properties, their
descriptions, and values here.
CSS VALUES
Values are written immediately after the colon that separates them from CSS
properties. CSS values aren't just text; they come in different forms - URLs, units,
measurements, integers, strings, inherit, auto, none, etc. We will look at different
CSS values and how to implement them.
TEXT
Text values are prevalent in CSS. They are usually written without quotes, unlike
strings. Every valid CSS property has a text as a value. Margin takes units as
values, but it also has auto, which in this case, is taken as text.
h1 {
color: red;
text-align: center;
}
Red and center are text values of color and text-align.
INTEGERS
Integers are numbers from one to zero or zero to nine. Some CSS properties make
allowance for their values to be defined as integers, even negative integers. The
values for properties like column-count and z-index are defined using integers.
div {
column-count: 4;
}
div {
z-index: -1;
}
UNITS/MEASUREMENTS
Because CSS must be used to position items on a web page, general layout, and
media queries, many properties take units and measurements as their value. There
are many property-specific units for CSS values, but available units like px, em, fr
and percentages are standard.
h3 {
font-size: 24px;
}
div{
grid-template-columns: 1fr 1fr1fr1fr;
}
div {
width: 100%;
font-size: 2em;
}
URLS
Properties like background-image take an actual URL as their value. This URL
could be absolute or relative. Meaning, you could copy the address of an image
online and use it as your background image, or you could get images from the
project directory/folder you are working with on your computer.
div{
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-
736885__340.jpg");
}
div{
background-image: url("./Images/landscape.jpg");
}
STRINGS
Strings are text within quotes. The content property which you can use to insert
generated content allows strings within its parameter.
.div :: after {
content: "This is me";
}
COLORS
The color/background-colors are properties used to set the color of HTML
elements. Their values accept either a hexadecimal color combination value, an
RGB specification, or a defined color.
h2 {
color: red;
}
div{
background-color: #000000;
}
AUTO, NONE, INHERIT
Auto, None, and Inherit are keywords values in CSS. Auto value allows the
property to fill or adjust according to the content of the element.
div {
width: auto;
margin: auto;
}
None adds no value to the specified property.
div{
border: none;
}
Inherit keyword allows the property to inherit the same value from the parent
element. All CSS properties accept inherit.
<div>
<p> this is me </p>
<p id="pickme"> this is not me </p>
</div>
p{
color: red;
}
#pickmep {
color: inherit;
}
Although all the examples above are of properties with one value, CSS values can
have more than one value, and you can manipulate it to write shorthand. Shorthand
in CSS is a shorter, more compact way of setting values for similar but multiple
properties.
These values,
div{
border-style: solid;
border-color: red;
border-width: 5px;
}
can be rewritten in shorthand as
div{
border: 5px solid red;
}
Other properties with multiple values include, but not limited to
margin: 1px 3px 6px 2px; /* defining the top, left, bottom and left of a margin */
font: italicsmall-capsbold 12pxGeorgia, serif; /*defining font-style, font-variant-
caps, font-weight, font-size, and font-family. */
box-shadow: 5px 2px 8px#aaaaaa; /* defining the horizontal offset, vertical offset,
blur, and color values */

(4) CSS Colours and Backgrounds

Color Property

Complete CSS Reference

Example
Set the background color for a page:
body {background-color: coral;}
More "Try it Yourself" examples below.
Definition and Usage
The background-color property sets the background color of an element.
The background of an element is the total size of the element, including padding
and border (but not the margin).
Tip: Use a background color and a text color that makes the text easy to read.

Default value: transparent

Inherited: no

Animatable: yes.
 Version: CSS1

JavaScript syntax: object.style.backgroundColor="#00FF00"Try it

CSS Syntax
background-color: color|transparent|initial|inherit;
Property Values

Value Description Demo

color Specifies the background color. Demo ❯

transparent Specifies that the background color should be transparent. This Demo ❯
is default

initial Sets this property to its default value. 

inherit Inherits this property from its parent element. 

WEEK-7
(From 06-08-22 to 16-08-22)

(5) CSS Box Model

(6) CSS Margins, Padding, and Borders
All HTML elements can be considered as boxes.
The CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:

WEEKLYREPORT
WEEK-8
(From 17-08-22 to 24-08-22)
(6) CSS Margins, Padding, and Borders
Explanation of the different parts:
Content - The content of the box, where text and images appear
Padding - Clears an area around the content. The padding is transparent
Border - A border that goes around the padding and content
Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
between elements. 
Example
Demonstration of the box model:
div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.
Important: When you set the width and height properties of an element with CSS,
you just set the width and height of the content area. To calculate the full size of an
element, you must also add padding, borders and margins.
Example
This <div> element will have a total width of 350px: 
div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin

(7) CSS Text and Font Properties

Set some font properties with the shorthand declaration:
p.a {
  font: 15px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}
More "Try it Yourself" examples below.
Definition and Usage
The font property is a shorthand property for:
font-style
font-variant
font-weight
font-size/line-height
font-family
The font-size and font-family values are required. If one of the other values is
missing, their default value are used.