HTML and CSS Revision notes (Updated)
- Web page: is a building block of the websites.
- Website: is a collection of web pages.
- HTML: Stands for Hyper Text Markup Language, it’s used to describe the structure of web pages.
- CSS: Stands for Cascading Style Sheet, CSS defines the display and layout of web pages.
- Browsers: are tools used to surve and visit internet web pages, to visit specific website type in the website URL at the address box.
- Webservers: are the machines that stores and hosts files and documents of your website.
- HTML has three types of Lists:
- Unordered lists <ul>: Used to define lists when order does not matter
- Ordered Lists <ol>: Used to define lists where sequence and order is the significance.
- Definition Lists <dd><dt>: used to describe list of terms and their definitions.
- HTML elements mostly come in pairs of tags, Opening tag and Closing tag
- <br> element used to introduce new line in HTML document and break the current line.
- <hr> element used to insert horizontal rule/line in HTML document.
- <p> element defines paragraphs in HTML.
- <a> element used to describe hyperlinks/links in HTML, links in HTML can be divided into Relative links and Absolute links.
- <img> element inserts images in your HTML document.
- <head> element contains title and meta information of the web page.
- <body> element contains actual contents that will be shown in the browser window.
- <!doctype> is not actually a tag, but a declaration, telling the browser what kind of HTML you are using. Default version is HTML 5.
- <b> element makes characters and texts appear bold.
- CSS stands for Cascading Style Sheets and were developed in 1994.
- CSS Syntax: selector/element {property: value;}
- CSS rule has two main parts: a selector, and one or more declarations.
- CSS selector points to the HTML element you want to style.
- CSS declaration block contains one or more declarations separated by semicolons.
- Each CSS declaration includes a CSS property name and a value, separated by a colon.
- A CSS declaration always ends with a semicolon.
- CSS Selectors are: Type/Element selector, ID selector, Class selector, Group selector
- CSS Type/Element: is used to apply the style using tag name. The type selector selects an element by its type, it represents the element or HTML tag to style.
- CSS ID Selector: Matches an element whose id attribute has a value that matches the one specified after the pound or hash symbol.
- CSS Class Selector: Matches an element whose class attribute has a value that matches the one specified after the period (or full stop) symbol.
- CSS Group Selector: Groups multiple selectors in a single style declaration.
- There are three ways of inserting a style sheet: In-line styles, internal style sheets (embedded), External style sheets (linked).
- In-line style is included with the tag it affects. To create an in-line style, simply add the STYLE attribute right into the attribute list of the tag.
- Internal Style Sheets.
- Internal style sheets: all instructions are collected and placed at the top of the HTML document. All instructions must be enclosed within the <STYLE> tag.
- CSS properties can be categorized into: Font attributes, Color attributes, Links attributes, Background attributes and Margins and Alignment.
- Common CSS font-formatting attributes are: font-family, font-style, font-weight, text-align, letter-spacing, text-decoration and text-transform.
- Common CSS color Attributes: color, background and border-color.
Lab Examples: Try to understand HTML Pages in the browser and their corresponding HTML code in the Editor
Example 1: HelloInBody
Example 2: World Continents
Example 3: Months of the year
Download PDF Version of the revision
(2) Comments