To get the latest Udemy coupon and news, subscribe our telegram channel

https://t.me/ckmobi

https://twitter.com/ckmobilejavasc1

React native Expo for multiplatform mobile app development

Free

Best Price

Complete NodeJS course with express, socket…


What is CSS Cascade and Inheritance

In this article, we are going to talk about the CSS Cascade and Inheritance.

CSS stands for Cascading Style Sheet. What the CSS Cascade does is it reads from the top to the bottom.

Source code:

Photo by Francesco Ungaro on Unsplash

For example, we have the following html file

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="styles.css"></head><body><h1 id="header1">Heading</h1><h1 id="header2">Heading 2</h1><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, eligendi incidunt quasi perferendis cum optio inpraesentium? Eligendi, recusandae blanditiis? Consequuntur quo dolor id. Inventore enim adipisci recusandaelaboriosam quo.</p><p>Lorem…

What is classes and id?

In this article, we are going to talk about select the html with id or with classes.

Source code:

Photo by Mika Baumeister on Unsplash

First of all, we want to talk about the difference between id and classes.

id is unique in a page. It only apply on only one element.

Classes can apply on multiple elements.

id selector is to select a specific element with id attribute.

To select an element with id, say # and followed by id name.

class selector is to select elements with class attribute. It will select multiple elements that with the same class name.

To select elements with…


Add styles to html elements

In this article, we are going to talk about how to select the elements and add the styles.

Source code:

Photo by Florian Olivo on Unsplash

Now, we have an index.html document like this

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="styles.css"></head><body><h1>Heading</h1><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, eligendi incidunt quasi perferendis cum optio inpraesentium? Eligendi, recusandae blanditiis? Consequuntur quo dolor id. Inventore enim adipisci recusandaelaboriosam quo.</p><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi, eligendi incidunt quasi perferendis cum optio inpraesentium? Eligendi, recusandae blanditiis? Consequuntur…

The benefits and the disadvantages of using inline and internal CSS

In this article, we are going to talk about inline and internal CSS styling. We will learn what are the benefits of using these methods. Moreover, we will talk about the disadvantages and leads to why we need external styling.

Photo by Branko Stancevic on Unsplash

Source code:

https://www.udemy.com/course/a-complete-css-course/?couponCode=AFCE661D3F23D529FEBC

Let’s take an example. In the previous example, we already have an index.html that uses internal styling.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><style>#myname{font-size: 200px;background-color: blue;color: white;}/* p{background-color: lightblue;font-size: 200px;margin: 0;} */</style><body><header id="myname">ckmobile</header><p>Lorem…

Why we need CSS and how we style the elements with CSS?

In this article, we are going to talk about what is the use of the CSS and the syntax of the CSS.

Source code:

Photo by Maik Jonietz on Unsplash

CSS is a collection of rules. These are used to define the style of the web page.

Now, we are going to talk about the syntax, we use the selector to select the html element by using tag name, id and classes, and then use the declaration to style the elements.

#firstname {
background-color: yellow;
}
target {
declaration
}

Declaration contains property and values. It always starts with the curly end with closing curly braces.


Change the theme with CSS variable and tinyColor.js

In this article, we are going to talk about how to change the value of the variable inside the root element with the help of JavaScript.

Source code:

Photo by Pawel Czerwinski on Unsplash

We created an index.html in the previous project.

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="styles.css"></head><body><div class="container"><h2>CSS variables</h2><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda magnam fugit, tempora mollitia harum quas, magni nam repellendus veniam at atque dolore similique rem soluta tenetur inventore, animi non? Eveniet.</p><button>Submit</button><h2>CSS variables</h2><p class="lorem">Lorem ipsum dolor sit amet consectetur…

An example to use CSS variable to define theme color and primary color.

In this article, we are going to talk about how to use variable in CSS.

Source code:

https://www.udemy.com/course/a-complete-css-course/?referralCode=D70F3923FF6501A398AA

Photo by Pankaj Patel on Unsplash

To define a variable, we have to define it inside the selector.

If we want to access the variable inside the whole document. :root represents the <html> elements except its specificity is higher.

The variable name must begin with two dashes (--) and it is case sensitive!

index.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="styles.css"></head><body><div class="container"><h2>CSS variables</h2><p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda magnam…

Using media queries to create responsive grid

In this article, we are going to make a responsive grid with the help of the media queries.

Source code:

Photo by NordWood Themes on Unsplash

To create a responsive grid,we can put the container style inside the media queries. This will make the grid items follow the previous project layout when the screen size is larger than or equal to 700px.

@media screen and (min-width:700px){.container{max-width: 960px;display: grid;grid-template-columns: repeat(3,1fr);grid-auto-rows: minmax(100px,auto);margin:0 auto;gap:10px;grid-template-areas:"header header header""nav nav  .""aside section section""aside main main""footer footer footer";}}

And on top of this media queries, we can…

Ckmobile

Teaching JavasScript, React, React Native, MongoDB and NodeJS https://linktr.ee/ckmobile

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store