DEV Community

CNavya21
CNavya21

Posted on

HTML & CSS

Box model

  • When laying out a document, the browser's rendering engine represents each element as a rectangular box according to the standard CSS basic box model.
  • CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes. *Every box is composed of four parts defined by their respective edges: the content edge, padding edge, border edge, and margin edge.
  1. Content area

    • The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player.
    • Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.
  2. Padding area

    • The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.
    • The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.
  3. Border area

    • The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.
    • The border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.
  4. Margin area

    • The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.
    • The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.

Inline vs Block elements

  • In HTML elements historically were categorized as either "block-level" elements or "inline-level" elements. Since this is a presentational characteristic it is nowadays specified by CSS in the Flow Layout.

Example for inline

<div>
  The following span is an <span class="highlight">inline element</span>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
</div>
Enter fullscreen mode Exit fullscreen mode

In this example, the

block-level element contains some text. Within that text is a element, which is an inline element. Because the element is inline, the paragraph correctly renders as a single, unbroken text flow.

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!

Top comments (0)