A.P.
International School
2023 - 2024
(Subject - Coding)
Notes For the Second Term
• Div- The HTML <div> element is used to create different sections on a
webpage, and also helps group and organize content.
The <div> tag is used as a container for HTML elements - which is then
styled with CSS or manipulated with JavaScript.
• Button- The <button> tag defines a clickable button.
By default, a button won't do anything when clicked — JavaScript is needed
to make the button work!
To make the Button work we need to use the onclick attribute of the <button>
tag and use JavaScript to write the logic for the button.
The onclick attribute is used to call a JavaScript function. This means that a
function must be created in JavaScript first, or it won't work!
CSS Selectors:
In CSS, a selector refers to the HTML element you want to target in order to
style it.
A selector can be used to target an HTML element by its tag name, its id, and/or
its class.
1. CSS ELEMENT SELECTOR
The element selector selects HTML elements based on the element name.
2. CSS CLASS SELECTOR
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed
by the class name.
3. CSS ID SELECTOR
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element is unique within a page, so the id selector is used to
select one unique element!
To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
4. CSS UNIVERSAL SELECTOR
The universal selector (*) selects all HTML elements on the page.
5. CSS GROUPING SELECTOR
The grouping selector selects all the HTML elements with the same style
definitions.
NOTE: ID is unique for each tag of HTML but Class can be common for
more than 1 HTML Tag. So if a common style is to be applied to more than 1
element use the Class selector instead of the ID selector.
CSS Types.
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements.
Internal - by using a <style> element in the <head> section.
External - by using a <link> element to link to an external CSS file.
Inline CSS was already discussed in the part 1 coding Notes of the previous
term.
Internal CSS- we write the CSS code within the <head> tag of <html> by
using the <style> tag.
External CSS- An external style sheet is used to define the style for many
HTML pages.
To use an external style sheet, add a link to it in the <head> section of each
HTML page.
Nested Elements.
HTML elements can be nested (this means that elements can contain other
elements).
All HTML documents consist of nested HTML elements.
The <html> element is the root element and it defines the whole HTML
document. Within <html> tag we have nested <body> tag and within <body>
tag we have <h1> and <p> tag nested. Within <h1> tag we have <b> tag.
div of name B
div of name A
div of name C
A. Commonly used CSS properties
1. font-family:
Explanation:
font-family determines the type of font used for text.
2. font-weight:
Explanation:
font-weight controls how bold or light the text looks.
3. color:
Explanation:
color sets the color of the text.
4. font-size:
Explanation:
font size adjusts the size of the text.
5. text-align:
Explanation:
text-align aligns text to the left, right, center, or justified.
6. width:
Explanation:
width sets the width of an element, like a box or an image.
7. height:
Explanation:
height controls the height of an element.
8. background-color:
Explanation:
background color gives a background color to an element.