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
- 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 😃😃