Year 12

HTML <div> Tag

The <div> tag defines a division
or a section in an HTML
document.
The <div> tag is used as a
container for HTML elements -
which is then styled with CSS or
manipulated with JavaScript.
The <div> tag is easily styled by
using the class or id attribute.
Any sort of content can be put
inside the <div> tag!
Note: By default, browsers
always place a line break before
and after the <div> element.
CSS Selectors
We can divide CSS selectors into five categories:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific
relationship between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or
attribute value)
Simple Selectors (select elements based on
name, id, class)
Combinator Selectors
A combinator is something that explains the relationship between the
selectors.
A CSS selector can contain more than one simple selector. Between
the simple selectors, we can include a combinator.
• There are four different combinators in CSS:
• descendant selector (space)
• child selector (>)
• adjacent sibling selector (+)
• general sibling selector (~)
Descendant selector (space)

The descendant selector matches all elements that are descendants of

a specified element.
Child selector (>)
The child selector selects all elements that are the children of a
specified element.
Adjacent sibling selector (+)
• The adjacent sibling selector is used to select an element that is
directly after another specific element.
• Sibling elements must have the same parent element, and "adjacent"
means "immediately following".
General sibling selector (~)
The general sibling selector selects all elements that are next siblings
of a specified element.
CSS Attribute Selectors
It is possible to style HTML elements that have specific attributes or attribute
values.
1. existence
2. equality
3. Space
4. prefix
5. substring
6. suffix.

• CSS [attribute] Selector

• CSS [attribute="value"] Selector
• CSS [attribute~="value"] Selector
• CSS [attribute|="value"] Selector
• CSS [attribute^="value"] Selector
• CSS [attribute$="value"] Selector
• CSS [attribute*="value"] Selector
Summary
HOW TO ADD CSS – CSS STYLES
There are three ways of inserting a style sheet:
• External CSS
• Internal CSS
• Inline CSS
DOM TREE
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
For example:
<p style=”color:white;background-color:black;font-size:14pt;”>Welcome to CSS</p>
Note:Inline styles get apply only to that specific tag in which they are declared.
Internal CSS
• An internal style sheet may be used if one single HTML page has a
unique style.
• The internal style is defined inside the <style> element, inside the
head section.
For example:
{
color:whte;
background-color:black;
font-size:24pt;
}
External CSS

https://www.youtube.com/watch?v=b3_n5UPYvMo&t=284s
STEPS FOR EXTERNAL STYLE SHEET
1. Create code for mystyle in your text editor i-e notepad or any other.
2. Save this with extension of .CSS and place it in the same folder
where your html web page is available.
3. Use the code given the pervious slide no 19.
mystyle while only contain:
body{ the body style of your html page such as background , images , colors,
etc.}
elements such as h1, p, table , etc.{ style for heading either color, font size, etc.}
4. Call the link in the head section of your html as shown in the
pervious slide no 19.
Other
•
CSS
CSS Comments
Elements
• CSS Colors
• CSS Background { Image, color, repeat, etc.}
• CSS Border { width, color, size, etc.}
• CSS Margins
• CSS Padding{Right, Left, Bottom, Top}
• CSS height, Width
• CSS Text {Colors, Size , etc.}
• CSS Font , Size
• CSS Table {Span Row & Col}
• CSS Lists
• CSS Link

Practices these in your code.

CSS Units

CSS has several different units for expressing a length.

• Many CSS properties take "length" values, such as width, margin, padding, font-size, etc.
• Length is a number followed by a length unit, such as 10px, 2em, etc.
 Absolute Lengths
1. The absolute length units are fixed and a length expressed in any of these will appear as
exactly that size.
2. Absolute length units are not recommended for use on screen, because screen sizes vary so
much. However, they can be used if the output medium is known, such as for print layout.
3. * Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel
(dot) of the display. For printers and high resolution screens 1px implies multiple device
pixels.
Absolute Length
Relative Length
Relative length units specify a length relative to another length
property. Relative length units scale better between different rendering
medium.
Relative Length
Note: For more CSS units review
slide no 24 & 26.
Class Practice Task
Make a timetable with different colors of cells.
HOME TASK
Understand the purpose of CSS:
a. control page layout.
b. consistent page design.
https://www.w3schools.com/css/css_website_layout.asp

Search for absolute value and relative length units.

Complete your work and place in OneNote in homework section.

For assistance visit

https://www.w3schools.com/css/default.asp
https://www.w3schools.com/html/default.asp