To get the latest Udemy coupon and news, subscribe our telegram channel
https://t.me/ckmobi
Subscribe Youtube:
Follow us:
https://twitter.com/ckmobilejavasc1
React native Expo for multiplatform mobile app development
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:
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:
First of all, we want to talk about the difference between id and classes.
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
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
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:
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…
How to create a CSS external stylesheet?
In this article, we focus on talking about external stylesheet. Last time, we created a website that only use inline styling and internal styling.
Source code:
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.
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:
CSS is a collection of rules. These are used to define the style of the web page.
Syntax
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:
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
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.
Css variables
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:
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…
