(Part 2)Some Basics of CSS that you should have a look at.

In this post, I will be summarising some basics of CSS, which, you need to know if you are diving into Front-end development.

This part will be covering:

• The CSS Box Model
• Media Queries
• CSS Animations and Keyframes

The Box Model

For CSS, every HTML element is a box.CSS determines the size, position, and properties (color, background, border size, etc.) of these boxes.

It can be best understood with the following image.

Every box is composed of four parts (or areas), defined by their respective edges: the content edge, padding edge, border edge, and margin edge.

• Padding - Clears an area around the content. The padding is transparent.
• Margin - Clears an area outside the border. The margin is also transparent.

Positioning

• Block Elements - those which usually start from a new line. Example: headings, paragraphs, divs, etc.
• Inline Elements - are those which sits with the surrounding element. For example: images, spans etc.

The default layout of elements as per their type as listed above is called the Normal Flow of a document
We have position property of CSS to override the Normal flow.
This pairs with the CSS offset properties (left,right,top,bottom) to set how many pixels(or any other unit) away the element has to be positioned from where it is in the Normal Flow.
It accepts the following values.

• position:relative
• position:absolute
• position:fixed

Read More about positioning.

Border

The following properties is used for providing border to an element.

• border-weight - The thickness of border
• border-style - solid, dotted, double, grove etc.
• border-color - Provide the colour, or the default color black is applied. And you can use border shorthand property to set all above values directly as shown below.

.class{
    width:100px;
    height:100px;
    border:10px solid #FA1298;
}

Tip

Set box-sizing to border-box, this makes styling easier.

Quoting from MDN
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

Media Queries

They help you make your site responsive to different screen size.
The @media can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

(Think it like an if-statement, where the conditions are based on viewport sizes.)

Example:

@media screen and (min-width: 900px) {
  div {
    width:100px;
  }
}

More Details Here.

CSS Animations and Keyframes

In order to animate an element, you need to add the Animation properties in its styling.
The actual appearance of the animation is defined by the @keyframe rule.

• animation-name gives the name of the keyframe rule. animation-iteraton-count - use infinite for endless animation.
• animation-timing-function This can be linear, ease, cubic-bezier() etc. Read More about all possible values here.

Example:

Want to connect?

Connect with me here.