VANILLA CSS BASICS YOU SHOULD KNOW

BASICS OF CSS (Cascading Style Sheets)

Here in CSS, we get a target and pick up that specific element which we want to work on, from the web page.

How CSS works.

CSS has mainly 2 parts, that is to say;

• Selectors
• Declaration:This is also divided into : property and then, value.

THREE LEVELS OF CSS;

Inline CSS

   * Here, CSS is used within the target element.
   * For example:`<p color="white"> This is inline CSS </p>`

Internal CSS

  * Here, CSS is written within the html file above the body tag and within the head tag.
  * This is done with the help of `<style>` tags.

External CSS

• For this case, CSS file is linked to the index.html file.

• When compiling the CSS code, CSS also bases on priority. In such case, inline CSS always has the highest priority, followed by internal CSS then external CSS.

CSS SELECTORS

• These selectors enable us to know how to select elements from the html file. For the CSS selectors, we just need to know the type of selector we want to use, and also what it does to the target element.

The following are some of the common CSS selectors used.

Universal Selector: When such selector is used, everything in the html file (all the html tags) is targeted or selected.

For example:
*{
background-color: grey
}
This means that all the webpage will have a background color of grey

Individual Selector

• This targets individual elements for example, <p> targets all paragraphs in the index.html accordingly.
• In case you want each paragraph to have its own color or look, we can then go for *Class or Id selectors.

Class and Id Selectors

• For the class selectors, we use a dot while applying it .Then for an id selector, we use a hash (#) when applying it.

For example;
.warning{
align items: center;
}

• An id name should not be applied or used multiple times, although, even when you do so, there would be no error thrown in our file during compilation. But this would be a bad coding practice.

• Yet for a class name, you can use the same name multiple number of times .

Child Selector

• In this selector, we target the child of the parent element.
• For example: nav ul{ display: flex }
• This means we are targeting the ul element which is a child of the parent, nav.

We also have other selectors

• Like the nth child selector.

The most commonly used selectors are the class and id selectors

NOTE:

• When using colors for CSS, it is always best practice to use standard color codes (like #4d4d4d) unlike word colors like red or green.

• This is because, different browsers view the colors in different ways, but if color codes are used, this acts like a standard overall color which is viewed as the same color even in different browsers.

MARGIN AND PADDING.

• Margin is the amount of space from the outside and padding is the amount of space from inside where the text is.*

Note: We only apply FOCUS to input tags.

POSITIONS ON CSS

Absolute;

• This gives position of the target depending on the parent webpage, that is, border of the whole web page.

Relative;

• This gives position to the target element depending on the body or boxes in which the current target is ,that is, depending on the original position of the target.

Sticky;

• This gives position to the target, and after this, it will not move to another position.

Fixed;

• After applying this, the target won't be changed or modified. It would be in this position fixed as it had been allocated.

FLEX BOXES

When flex is applied, it means that the target elements can be placed in only one horizontal dimension.

• Therefore, flex is unidirectional. When using flex, we flex the parent. And based on the parent, the child will behave.

Incase we want dynamic display, this is where we can use grid.

• Grid is therefore bidirectional.

CONCLUSION

We use CSS to modify our webpages as it helps us to easily style our text.