Fundamentals of HTML and CSS

HTML - Hypertext Markup Language

•  Hypertext refers to how web pages(HTML documents) are linked together.
• The markup language is a computer language that uses tags to define elements within a document.
• HTML DEscribes the structure of a WebPage.
• HTML elements tell the browser how to display the content.

Most commonly used HTML Elements 

<tagname> - Start tag

content  

</tagname> - End tag

Example : 

<H1> Hello World </H1>

<div> - This tag defines a division in an HTML document.

<p>    - This tag is used for the paragraph that starts on a new line and adds some margin before and adds some margin before and after a paragraph

<h1> to <h6> - These tags are used to give headings of different size

<a>   - These tags help you to insert an image into the web page

<ul>  - This will list items using plain bullets

<img> -These tags help you to insert an image into the web page

HTML Attributes

• HTML attributes provide additional information about HTML elements.
• Attributes are always specified in the start tags.
• Attributes usually come in name/value.

Example:

<a href="https://www.salesforce.com">Salesforce</a>

HTML data Attribute

    The data attribute is used to store custom data private to the page or application

Example:

<div data-name="Test">Username</div>

HTML Block Level

    Element always starts on a new line and occupies the full width.

Example : <div>,<p>,<h1> to <h6><ul>,<header>,<article>

HTML Inline Level

    The element does not start on a new line and it only takes up as much width as necessary 

Example : <span>,<img>,<a>,<label>,<strong>

CSS - Cascading Style Sheets

It is used to control the style of the web page

CSS Syntax

selector{property: value}

• Selector - it is used to find the HTML element you want to style

1. Element Selector - use of the HTML tags for styling

        p{color: blue;}

      2. ID Selector - uses the id attribute of an HTML element to select a specific element. To select an element with a specific id, write a hash(#) character, followed by the id of the element 

        #idofthetag{color:blue;}

      3. Class Selector - uses the class attribute of an HTML element to select a specific element. To select an element with a specific class, write a dot(.) character, followed by the class of the element.

        .classname{color:blue;}

• Property - CSS Property you want to apply like size, color, border etc
• Value - It is the value assigned to a property for color property value is red etc

Types of CSS Styles

There are three types of CSS styles 

1. Internal CSS - not used in LWC

2. Inline CSS

3. External CSS or third-party library like Bootstrap, salesforce lightning design system

😃😃 Happy Learning 😃😃