Guidershala

HTML

1. HTML - Hypertext Markup Language
2. used to give a STRUCTURE to the HTML Page/Document
3. Inline and Block Elements :-

   Inline	Block
   Only Occupy width needed by content	Use entire width of screen or parent element.
   Does not start in new line.	Always start in new line.
   Can only have right and left margins.	Can have margin on all 4 sides.
   Cannot set height and width.	Can set height and width.

4. Quotations and Citations

   • Job of blockquote

     It indents the details inside. The tag must include a cite to show what site the detail was taken from.

   • The role of q tag is: To quote the texts inside the q tag

   • The role of abbr tag is to shorten/abbreviate the name. eg: WHO Place the mouse cursor on top of the world with ..... to see fullform

   • The role of address quote :

     Written by Someone.
     Visit us at: Somewhere
     Example.com
     

   • The cite tag used to cite works of art. Put this under some images or something.

   • The role of bdo tag is to reverse the text inside. Check below:

     This text will be written from right to left

5. Links

   Used to link external sites or links. uses "a" tag

   W3Schools

6. iframe

   Iframe is used to open another brower window inside the current browser. You can increase the dimensions.

7. Forms

   Forms are used to collect User inputs. There are different kinds of forms which each serve different purposes. More about forms in W3Schools

   Name

   
   
   

   item1 item2

   
   

   rad 1 rad 1 rad 1

   Submit Reset

CSS

1. CSS - Cascading Style Sheets
2. Used to Design the HTML page/Document
3. Box Model of CSS
   
   

   • CSS contains 4 layers and is called a box model.
   • Content - where text and images appear.
   • Padding – Area around content. Between content and border. Is transparent.
   • Border – Goes around Padding and Content. Can be made visible and styled.
   • Margin – Clears an area outside border. Puts distance between two elements. Is transparent.

4. There are 3 different types of display in CSS. Inline, Block and Inline-Block. They have the folloeing properties:

   Inline	Block	Inline-block
   display:inline	display:block	display:inline-block
   Only Occupy width needed by content	Use entire width of screen or parent element.	They take up ONLY the space of the content.
   Does not start in new line.	Always start in new line.	Does NOT take a new line.
   Can only have right and left margins.	Can have margin on all 4 sides.	Can have margins on all sides
   Cannot set height and width.	Can set height and width.	Can manually set the height and width.

5. Selectors

   They are used to select different html elements. Following are the selectors :

   • Universal selector – Applies the style to the whole html document. Represented by *{}
   • Element/Tag Selector – Selects an element by calling its tag. Any style inside a tag selector is applied to ALL elements with that tag. Eg: h1-h6, p, span, div and any html tags.
   • Class selector – Selects an element that has been provided a class attribute. Multiple elements can have same class name. Eg: <p class=”paragraph”>. Called by .paragraph{}
   • ID selector – Selects an element that has been provided a id attribute. Only ONE element can have a unique ID name. Eg: <p id=”para”>. Called by #para{}.
6. Selector priority

   When same elements have same property changed using different selectors, the style will depend on the highest priority selector.

   The priority are as follows : ID > Class > Element/Tag > Universal

7. Properties and Selectors

   Inside a selector, the property and value for the property should be declared for style to take effect.

   Eg: div {
   height: 100px;
   width: 50%;
   background-color: powderblue;
   }

   In the above example, the height, width and background-color are the properties and 100px, 50% and powderblue are values.

8. Group and Attribute Selectors

   • Group Selectors - You can apply same style to multiple selectors buy chaining them using a comma. Eg: p, .paragraph, #para {any styles inside this will be applied to all selectors p, .paragraph and class which are separated by commas}

   • Attribute Selectors - Used to select element with a specific attribute inside it:

     Eg: <a href="1">w3schools.com</a>
     <a href="2" target="_blank">disney.com</a>
     <a href="3" target="_top">wikipedia.org</a>
     a[target]{selects the <a> elements that have target as an attribute inside it}

   • You can assign a value to the attribute inside the attribute selector.
     Eg: a[target=”_blank”]{selects the <a> element that has target with value equal to “_blank”}
9. Pseudo-Class Selectors

   Used to define a special state of an element. Eg: Mouse hover, style visited and unvisited links, change style when focused, change cursor style when hovering over an element etc.

10. Pseudo-Element Selectors

    A CSS pseudo-element is used to style specified parts of an element.

    For example, it can be used to: Style the first letter, or first line, of an element Insert content before, or after, the content of an element.
    Commonly used ones are ::first-line, ::first-letter etc

11. Position

    1)Static

    2)Relative

    3)Absolute

    4)Fixed

    5)Sticky

    There are 5 different positions that can be applied to HTML elements

    1. Static - Default position of elements. position:static. We don't have to explicitly write down the property.
    2. Relative An element with position: relative; is positioned relative to its normal position.
       What positioned relative means is that whenever we apply top, right, bottom, left propeties to the element, it will move from its original position.
    3. Absolute - An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).
       What it means is that if the position:absolute element is NOT inside another positioned element (usually positioned:relative), it will apply top, right, bottom, left properties ir respect to the whole view-port (visible area of the webpage)
       In the above example, the blue box is the closest parent container with position:relative property. So the absolute positioned box is placed in relation to the blue box.
    4. Fixed - An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
    5. Sticky - An element with position: sticky; is positioned based on the user's scroll position.
12. Float

    The Float property is used to float an element to the left or right side. The next content will WRAP AROUND the float element.

13. Flex

    The Flexible Box Layout Module, makes it easier to design flexible responsive layout structure without using float or positioning.
    It is applied in one-direction. Vertically or horizontally.
    To apply flex we write the following property and value - display:flex
    With flex property you can arrange all the elements inside the flext box vertically or horizontally and model the gaps and space between them. Flex box also allows it so that the elements inside will go to new line or shring or grow equally as the page size is increased or decreased.