HTML & CSS

Example for block element

<div style="border: 1px solid black;"> About Us </div>

Positioning: absolute/relative

1. Absolute
2. This is a very powerful type of positioning that allows you to literally place any page element exactly where you want it.
3. You use the positioning attributes top, left, bottom, and right to set the location.
4. Absolute positioned elements are removed from the normal flow, and can overlap elements.

Syntax

position: absolute;

1. Relative
2. The relative positioning property is used to set the element relative to its normal position.
3. Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.

Syntax

position: relative;

Common CSS structural classes

• Structural pseudo classes allow access to the child elements present within the hierarchy of parent elements.
• We can select first-child element, last-child element, alternate elements present within the hierarchy of parent elements.

The following is the list of structural classes.

1. :first-child - it represents the element that is prior to its siblings in a tree structure.
2. :nth-child(n) - it applies CSS properties to those elements that appear at the position evaluated by the resultant of an expression.
3. :last-child - it represents the element that is at the end of its siblings in a tree structure.
4. :nth-last-child(n) - :nth-last-child(Expression) is the same as :nth-child(Expression) but the positioning of elements start from the end.
5. :only-child - it represents the element that is a sole child of the parent element and there is no other sibling.
6. :first-of-type - It selects the first element of the one type of sibling.
7. :nth-of-type(n) - it represents those elements of the same type at the position evaluated by the Expression.
8. :last-of-type - it represents the last element in the list of same type of siblings.
9. :nth-last-of-type(n) - It is the same as :nth-of-type(n) but it starts counting of position from the end instead of start.

Common CSS styling classes

• .container : This class is used to create a container that holds the content of a web page or sometimes container which will hold other elements.

• .header : This class is used to style the header section of a web page, which typically contains the site logo, navigation menu, and other important information.

• .nav : This class is used to style navigation menus on a web page, such as a top or side menu.

• .btn : This class is used to style buttons on a web page. It's often used to add a background color, border, and padding to create a clickable button.

• .card : This class is used to create a card-style layout for content, such as a blog post or product listing. It often includes a background color, border, and padding to create a contained section for the content.

• .footer : This class is used to style the footer section of a web page, which typically contains copyright information, social media links.

CSS specificity

Specificity Hierarchy :Every element selector has a position in the Hierarchy.

1. Inline style: Inline style has highest priority.
2. Identifiers(ID): ID have the second highest priority.
3. Classes, pseudo-classes and attributes: Classes, pseudo-classes and attributes are come next.
4. Elements and pseudo-elements: Elements and pseudo-elements have lowest priority.

• Start at 0, add 100 for each ID value, add 10 for each class value (or pseudo-class or attribute selector), add 1 for each element selector or pseudo-element.

Example

A: h1
B: h1#content
C: <h1 id="content" style="color: pink;">Heading</h1>

The specificity of A is 1 (one element selector)
The specificity of B is 101 (one ID reference + one element selector)
The specificity of C is 1000 (inline styling)

Flex box / Grid

Flex container:The flex container specifies the properties of the parent. It is declared by setting the display property of an element to either flex or inline-flex.

Flex items:The flex items specify properties of the children. There may be one or more flex items inside a flex container.

• it is used to specify the direction of the flexible items inside a flex container.
• It is used to align the flex items horizontally when the items do not use all available space on the main-axis.
• It is used to align the flex items vertically when the items do not use all available space on the cross-axis.

The flex container properties are:

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

The flex item properties are:

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

CSS Responsive queries

• The @media rule, introduced in CSS2, made it possible to define different style rules for different media types.
• Media queries can be used to check many things, such as:
  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

Syntax

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Value and description:

• all - Used for all media type devices
• print - Used for printers
• screen - used for computer screens, tablets, smart-phones etc.
• speech - Used for screenreaders that "reads" the page out loud

Example

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

Common header meta tags

• The tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
• You can add metadata to your web pages by placing tags inside the header of the document which is represented by and tags.

Attributes and descriptions

1. Name
   • Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
2. content
   • Specifies the property's value.
3. scheme
   • Specifies a scheme to interpret the property's value (as declared in the content attribute).
4. http-equiv
   • Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Example

<!DOCTYPE html>
<html>
  <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>
# output: Hello HTML5!