HTML and CSS Basics
1.HTML <!DOCTYPE> Declaration
- HTML 5
<!DOCTYPE html>The <!DOCTYPE> declaration is NOT case sensitive.
The <!DOCTYPE> declaration is optional.
2. HTML 4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd">2.HTML <a> Tag
Used to navigate/link one page to other pages.
An unvisited link is underlined and the colour is blue.
A visited link is underlined and the colour is purple.
Attributes
download -> will download as a file.
href -> to link different pages by URL. We can give the specific ID of the current page like href=”#id_of_elemnt”. We can use href=”#top” or href=”#” to link to the top of the current page.
rel -> relationship between the current document and the linked document.
target → where to open the linked document.
3.File Paths
File paths are of two types:
· Absolute File Paths
· Relative File Paths
Absolute File Paths
It is a full address of the file. For example
<img src=”https://www.example.com”>
Relative File Paths
<img src=”Sample.file”> The “Sample.file” file is located in the same folder as the current page
<img src=”images/Sample.file”> The “Sample.file” file is located in the images folder in the current folder
<img src=”/images/Sample.file”> The “Sample.file” file is located in the images folder at the root of the current web
<img src=”../Sample.file”> The “Sample.file” file is located in the folder one level up from the current folder
4.Attributes
Attributes are to give additional information to the element. It specified in the start tag of the element. It has a key-value pair. Ex key=”value”
Custom Attributes
We can use custom attributes in HTML. But I will not change the element or its style. We can use it to set & get a value of the custom attribute by Javascript.
Example
<body>
<strong id=”the_id” original-title=”I NEED THIS”>Some text</strong>
</body>
<script>
alert(document.getElementById(“the_id”).getAttribute(“original- title”));
</script>5.ID vs Class
IDs are unique. Should use the # symbol to specify the id in CSS.
Classes are not unique. We can use the same class for different elements. We should use the class when applying the same styles to multiple elements. Need to use the dot symbol (.) to specify the class in CSS.
id selectors take precedence over class selectors if you had this,
<p id=”intro” class=”foo”>Hello!</p>
#intro { color: red }
.foo { color: blue }It is by specificity. Reference
6.Units
Units are to specify the length of the element like width, height, etc. A length is a number followed by a length unit, such as 10px, 2em, etc. if the value is 0, the unit can be omitted. For some CSS properties, negative lengths are allowed. There are two types of length units
· Absolute
· Relative
Absolute
Absolute units are fixed. Absolute Units are cm, mm, in (=96px=2.54cm), px (=1/96 inch), pt (1/72 pt), pc (=12pt)
Relative
Relative length unit is relative to other length properties.
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the “0” (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport’s smaller dimension
vmax Relative to 1% of viewport’s larger dimension
% Relative to the parent element
Box Model
width + padding + border = actual width of an element
height + padding + border = actual height of an element
7. z-index
The z-index property specifies the order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements.
8. rgba()
it defines the colours by red green blue alpha.
Red defines the presents of red colour between 0 to 255.
green defines the presents of green colour between 0 to 255.
blue defines the presents of blue colour between 0 to 255.
alpha defines the opacity(transparency-level) between 0.0 (fully transparent) to 1.0
