What Do You Mean By HTML and CSS?
Common HTML Terms
Creating HTML Document Structure
Common CSS Terms
Selectors
Referencing CSS
CSS Resets
Getting to Know HTML And Semantics Overview
Identifying Divisions and Spans
Using Text Based Element
Building Structure
Creating Hyperlinks
Getting to Know CSS :The Cascade
Calculating Specificity
Combining Selectors
Layering Styles With Multiple Classes
Common CSS Properties
CSS Aural Media/Style Sheets
CSS Pagination
CSS Overflow
CSS White Space
CSS Word Wrap
CSS Outline
CSS Visibility
CSS Counters
CSS Animation
CSS Transition
CSS Tooltips
CSS Tooltip Animation
CSS Arrow
CSS Flexbox
CSS Media Queries
CSS 2D Transforms
CSS 3D Transforms
How are Elements Displayed?
Display Property Controls And Box Model?
Working With Box Model
Width and Height
Margins and Padding
Borders, Individual Border Sides, Border Radius, Box Sizing, Content Box and Padding Box
Developer Tools
Removing Spaces between Inline-Block Elements
Positioning With Floats
Floats in Practice
Positioning With Inline-Block
Clearing and Containing Floats
Creating Reusable Layouts
Uniquely Positioning Layouts
Adding Colour To Text
Changing Font Properties
Font Family
Font Size, Font Style, Font Variant, Font Weight And Line Height
Shorthand Font Properties
Applying Text Properties
Text Properties All Together
Using Web-Safe Fonts
Including Citation And Quotes
Adding A Background Colour
Adding a Background Image and Background Repeat
Background Position and Shorthand Background Image Values
Designing Gradient Backgrounds
Changing the Direction of a Gradient Background
Using Multiple Background Images
Exploring New Background Properties
Unordered Lists
Ordered Lists
Description Lists
Nested Lists
List Item Styling
List Style Type Values
List Style Position Property
Adding Media And Adding Images
Sizing Images
Positioning Images, Inline Positioning Images, Blocking Positioning Images , Positioning Images Flush Left or Right
Adding Audio
Adding Videos
Adding Inline Frames
Semantically Identifying Figures And Captions
Building Forms And Initializing a Form
Text Fields And Text Areas
Multiple Choice Inputs And Menus
Form Buttons
Other Inputs
Organizing Form Element
Form And Input Attributes
Login Form Example
Organizing Data with Tables
Creating A Table
Table Header
Table Structure
Table Head, Body and Foot
Combining Multiple Cells
Table Borders
Table Striping
Aligning Text
Completely Styled Table
HTML Coding Practices
Use the Proper Document Structure
Keeping the Syntax Organized
Use Practical ID and Class Values
CSS Coding Practices
Write CSS Using Multiple Lines and Spaces
Use Proper Class Names
Build Proficient Selectors
Use Desired Classes When Needed
Use Shorthand Hexadecimal Color Values
Drop Units Zero Values
HTML abbr tag
HTML acronym tag (Not for HTML 5)
HTML area tag
HTML basefont tag
HTML blockquote tag
HTML datalist tag
HTML Description List
HTML ins tag
Marquee HTML Tag
HTML object tag
HTML picture tag
HTML SVG
Apart from text, one of the important features of the Internet is the hyperlink which helps in linking web pages. Hyperlinks can be made using the anchor, 
element. If you want to link one resource to another, then use the href attribute (hyperlink reference) with the anchor element.
Example - 
In the above line if you will click on the "Amazon" text, then you will be redirected to http://amazon.com.
Relative and Absolute Paths
As said earlier, there are 2 types of link present on the Internet. One links with other pages inside the same website while the other links to some external websites. These links can be identified using their href values.
Links that refer to the pages of the same website will not have a relative path in their href value, i.e. it will not contain (.com, .edu, .org etc.). In this case, the href attribute value will only include the file name of the page that is linked. Example – about.html, index.html etc.
If the file is present in a directory or a folder, then it should also be present in the href value. Just take up an example like ‘index.html’ is present inside the ‘file’ directory then the href will refer to ‘file/index.html’.
If you want to link the webpage that is not present inside your website, then you will need an absolute path. Here the href attribute value will contain the full domain. Suppose you want to link to Facebook. The href attribute value here will be http://facebook.com. Check here, it starts with an http and ends with .com.
Linking to an Email Address
Sometime we may want to set up a hyperlink that leads us to our email address. For example, we have a hyperlinked text saying "Email Me", which when clicked switches to the default email window of the user.
To establish an email link, the attribute value of href should begin with mailto: succeeded by the email address where the email needs to be sent. If you want to set up an email link to xyz@precisetestingsolution.com, then the value of href should be
mailto: xyz@precisetestingsolution.com
Additionally, the body text, subject and other info for the email needs to be filled up. If you want to add the subject line, then put the 'subject=' parameter just after the email address. The 1st parameter succeeding the email address should start with the '?' (Question) Mark. Different words inside a subject line necessitate that spaces be encoded utilizing %20.
You can add the body text the same way as you did for the subject text. Use the 'body=' parameter inside the href value. As we are summing up one parameter with another, it is necessary to use ‘&’ (Ampersand) symbol to separate both of them. Line breaks must be encoded utilizing %0A.
In the above line:
Email - xyz@precisetestingsolution.com
Subject – “Reaching Out”
Body – “How are you."
Opening Links in New Window
One of the characteristic features of hyperlinks is to determine where the link will open when clicked. Generally, links get triggered in the same window where it is clicked. But there is also a way to open links in different windows.
If you want to open up a link in a new window, then use the 'target' attribute with the value as '_blank'. The 'target' attribute defines exactly where the link will be shown, and the '_blank' value ensures a new window.
Linking to parts of the Same Page
To create an on-page link we first need to give an id attribute to the element we wish linking. Then we should provide that id attribute value as the href attribute value.
The above code shows us that both the id value as well as the href value are the same. We have just used a '#' symbol at the start of the href attribute value.
Thus we are now all clear with linking pages on the internet. Hope that you liked this section.
Don't miss out!
Study Material