DEV Community

Utsav
Utsav

Posted on • Updated on

HTML and CSS

#html #css #webdev

This paper on HTML and CSS aims to help the reader understand various concepts required for effective and efficient use of css

Basic concepts in HTML

Let's go through all the major tags in HTML:

  • <html>: Defines the root of an HTML document.

  • <title>: Used to define the title of the HTML document, it is displayed on the title bar of the page.

  • <h1> to <h6>: Define headings for the webpage, <h1> is the largest of them, <h6> is the smallest.

  • <br>: Defines a line break in the webpage.

  • <p>: Defines paragraphs in the webpage.

  • <link>: Defines the relationship between a document and an external file (most used to link to style sheets).

  • <style>: Defines CSS within the HTML file.

  • <script>: Defines JavaScript code within the HTML file.

  • <a>: The Anchor tag is used to define hyperlinks, linking one page to another. It has several attributes:

    • download: Specifies that the provided target will be downloaded upon being clicked.
    • href: Clicking will redirect you to the specified webpage.
    • target: Specifies where to open the link (target="__blank" will open the link in a new tab).

  • <ul>, <ol> and <li>: These tags are used to define lists, <ol> is for ordered lists while <ul> defines unordered lists, <li> are individual elements in the the defined list.

  • <div>: Defines a division or section in an HTML document. It is a versatile tag used to group and style other elements together. The user can give it properties via classes or ids.

  • <img>: Used to define images in HTML webpage, The src attribute is used to link the image.

  • <label>: Used to define name/label for input elements.

  • <span>: defines a span of text within a document. It is typically used to apply styles or target specific sections of content for scripting purposes.

The HTML document describes the skeleton of our webpage, the design responsibility lies with CSS.

The Box Model

Every element on a page is a rectangle

Box Model Representation

The image above is a representation of the box model, as you can see, the total size of the box is much more than what you'd expect.

Formula for total width of the box:-

padding= (padding-left+padding-right)
border= (border-left+border-right)
margin=(margin-left+margin-right)

total width=width+padding+border+margin
Enter fullscreen mode Exit fullscreen mode

You can further intuit what the the formula for height would be.

  • Padding: is to adjust the contents within a container.
  • Margin is used to adjust the container with respect to its sibling elements.

Inline vs Block Elements

Block Elements:

  • A block-level element always starts on a new line, and the browsers automatically add some margin before and after the element.
  • Block elements always occupy the maximum available width by default.

Inline Elements:

  • Inline elements don't start in a newline.
  • These elements only take up the necessary amount of width.

Positioning: Relative/Absolute

  • The position attribute has a lot of possible values, we'll just be talking about relative and absolute.

relative: positioned elements allow us to use left,top,right and bottom attributes, these attributes adjust the position of the element relative to it's normal position.

absolute: same as relative, but this time the object is positioned relative to its nearest relative or absolute ancestor.

In the flow / Out of flow.

  • It is important to understand the flow of elements within a container when you're adjusting them.

  • Elements that are in the flow change their surrounds(sibling elements) when they are adjusted in position, and they're also affected when their surroundings change.

  • Out of flow elements are unaffected by their surroundings as they are positioned relatively to their ancestor, they overlap other elements and can be individually placed anywhere.

  • Fixed and absolute positions take an element out of flow.

  • absolute is very useful when you're dealing with overlapping elements.

Common CSS pseudo classes

  • In this section we'll be dealing with pseudo selectors

  • Pseudo selectors are used to select child elements based on a pattern.

  • :first-child selects the first child within an element.

  • :nth-child[n]: used to select a sequence of child elements based on a pattern. for example:

    .class:nth-child[2n+1]

    The code above will select 3rd,5th,7th....(2n+1)th child elements from a class/element.

  • :last-child selects the last child.

  • :nth-last-child[n]: same as nth-child but selects the elements in reverse order.

  • :nth-of-type[n] selects elements of the same type based on a given expression.

Common CSS structures

CSS classes can be added to any element in an html, let's explore some common usages:

<p>, <div>, <body>, <span>, <a> etc.

You can select structres from specific classes:

    class-1 p{
        text-align:center;
    }
Enter fullscreen mode Exit fullscreen mode

The code above only applies to all the <p> elements within class-1.

CSS Specificity

If we have two or more rules that we're applying to the same element, then the webpage will use the specifity value of a rule to decide which one will be applied to the element.

  • Priority 1: Inline styles, the rules declared inline will override all the previous styles that would've been applied using classes or ids.

    <h1 style="color:pink;"> Hi</h1>

  • Priority 2: IDs, IDs are like classes but they're unique for every element whereas one class can be applied to several elements.

    #example-id{
    color:pink;
}

  • Priority 3: Classes, pseudo-classes and attribute selectors:

    .class-1{
    color:pink;
}
.class-1:hover{
    color:blue;
}
[target]{}

  • Priority 4: Elements and pseudo elements:

    h1{
    color:grey;
}

CSS responsive queries

Responsive queries are used to adjust the design of a website according to a certain property (usually width and orientation).
We use the @media rule to manage these queries. Example:

     @media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
        }
    }
Enter fullscreen mode Exit fullscreen mode
  • The code above changes the the background color if the width dips below 601px.

Flexbox

FlexBox

Flexbox is a useful way to structure your HTML code, It has useful attributes that allow you to place elements within the container with a lot of freedom.

Some commonly used flex-box properties:

  • flex-direction: specifies the direction of the flow of elements, row displays elements row-wise, column; column-wise. The value of this attribute is row by default.

  • justify-content: used to position elements horizontally(vertically is the flex-direction is column), center brings everything to center.space-around,space-between and space-evenly spread out the data with varying spaces between them.

  • align-items: used to align the items within a container vertically(horizontally if the flex-direction is column).flex-start and end bring the elements to opposite sides of the container, while center brings everything to center.

  • flex-wrap: wraps the container so elements are not stuck in a single line, instead they're spread out throughout the container.

  • order: can change the order in which elements appear in the container, this property is 0 by default.

  • grow and shrink increases or decreases the size of the flex-item based on the size of the flex-container.

Grids

Grid

Grids have a lot of similar properties as flex, we'll just be talking about what sets grid apart.

Defining a container as a grid of multiple boxes:

    .class-1{
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns:1fr 1fr;
    }
Enter fullscreen mode Exit fullscreen mode

  • The code above splits container into three rows and two columns. we can use the repeat function to automate the process.

    .class-1{
    display:grid;
    grid-template-rows: repeat(100,1fr);
    grid-template-rows: repeat(100,1fr);
}

  • The code above splits it into 100 rows and columns.

Precisely placing grid items withing a grid container:

    grid-item-1{
        grid-column: 1/10;
        grid-row:1/5;
    }
Enter fullscreen mode Exit fullscreen mode
  • The item above will cover the first 10 column items and first 5 row items.

row-gap and column-gap: used to define a gap between grid items.

    .class-1{
        display:grid;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-columns:1fr 1fr;
        row-gap:20px;
    }
Enter fullscreen mode Exit fullscreen mode
  • Places a gap of 20px between all containers.

Common meta header tags

Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

    <head>
    <meta charset="UTF-8">
    <meta name="description" content="Free Web tutorials">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <meta name="author" content="John Doe">
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0">
    </head>
Enter fullscreen mode Exit fullscreen mode

charset defines the character encoding of the document.

Keywords is used by search engines to display your webpages in results.

viewport is used to define the scale of the viewport width and height for the website.

References:

Top comments (0)

Read next

shivankshuklaa profile image

Keeping Your Microservices Safe: Best Practices and Patterns

Shivank Shukla -

vparul profile image

Choosing the Right CSS Approach: Tailwind CSS vs Bootstrap vs Vanilla CSS

Parul Verma -

davidepassafaro profile image

Angular fallback content in ng-content

Davide Passafaro -

lamnhan profile image

Features, future-proof and interoperable in TiniJS apps

Nhan Lam -