WeCreativez WhatsApp Support
Our customer support team is here to answer your questions. Ask us anything!
Hi, how can I help?

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

HelloInBody

 

Example 2:  World Continents

 

Example 3: Months of the year

Months of the year

Download PDF Version of the revision

Sharing is care!

(2) Comments

  • Shaafici Mohamed November 14, 2020 @ 2:04 pm

    Hello

Leave a Reply

Your email address will not be published. Required fields are marked *