Gain insights into creating stunning web layouts with HTML5, CSS3, and Bootstrap 4. Learn about responsive design, CSS frameworks, and advanced techniques like transitions, animations, and transforms.

usamaBoy.tar.gz

usamaBoy

usamaBoy-copy

This course provides an in-depth look into building web layouts from scratch. It includes detailed guidance on HTML5, CSS3, and Bootstrap 4. 


You will begin with an overview of the basics of HTML and CSS. Using the knowledge you gain in the first few lessons, you will build an HTML5 and CSS3 layout. Next, you will make the layout responsive using media queries. Then, you will learn about popular CSS frameworks and create your own micro framework. After this, you will build a layout using the Bootstrap 4 framework. Finally, you will learn about CSS grid, transitions, animations and transforms.

By the end of this course, you will become an expert in creating web layouts and know about the tools and technologies required for this task.

Build Amazing Layouts with HTML5, CSS3, and Bootstrap 4

# CSS `id` syntax
Similar to the `class` attribute, we also have an `id` attribute in our HTML. 

As we’re already well aware, the class attribute is targeted in CSS like this:

```CSS
.some-class-name
{ 
  property: value
}
```


In terms of syntax, the `id` attribute is almost identical:

```CSS
#some-id-name
{
 property: value 
}
```

The difference is that we use the `#` symbol to signify the `id`.

All the other syntax rules are the same. Just like in a CSS class, in a CSS `id` selector, we can specify
a single `property: value` pair, or as many `property: value` pairs as we want.

The important difference between IDs and classes in CSS lies in specificity and usage:
- An `id` HTML attribute is supposed to be used only once per page.
- The `id` CSS selector has greater specificity than many class selectors.

We’ll discuss how much greater the CSS specificity is later.

The practical conclusion at this point is that we can see the solution to our mini-test above by simply removing comments from our `#child` selector.

As always, feel free to play around with this code.

> **Note:** We’re also using the `unset` value in several CSS properties. That’s because the
`unset` value will reset any CSS property back to the default.

So, if we didn’t use `right: unset` and `bottom: unset` in the `#child` selector, the `<div>` element would still have the bottom and `right0` classes applied to it, which would result in
the inner div stretching to the bottom right corner of the outer div.

In other words, if we didn’t unset the `bottom` and `right` properties, this is what we’d get:





Introduction

Whitespace, HTML Elements, and CSS Selectors

CSS Display Property

The Box Model

CSS Positioning

Images and Floats in CSS

CSS Selectors and CSS Targeting Revisited

Building the First Layout

Converting Our First Layout Into a Responsive One

CSS Resets and Emmets

Column-Based CSS Layouts

An Overview of Popular CSS Frameworks

Micro CSS Framework

CSS Transitions, Animations, and Transforms

Introducing the CSS Grid

CSS Tips and Tricks for Beginners

Wrapping Up

Positioning with the CSS ID Attribute

CSS `id` syntax

Positioning with the CSS ID Attribute

CSS id syntax

CSS `id` syntax