CSS Basics

 CSS -> Cascading Style Sheet

inline styling

<!DOCTYPE html>
<html>
<head>
<title> HTML with CSS </title>
</head>
<body>
<p style="color:blue;"> This is a paragraph </p>
<p style="color:blue;"> This is also a paragraph </p>
</body>
</html>

Adding CSS in head section of html

<!DOCTYPE html>
<html>
<head>
<title> HTML with CSS </title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p> This is a paragraph </p>
<p> This is also a paragraph </p>
</body>
</html>

Here
p {
color: blue;
}

selector {
    property: value;
}


Calling CSS from a file

HTML -> index.html

<!DOCTYPE html>
<html>
<head>
<title> HTML with CSS </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p> This is a paragraph </p>
<p> This is also a paragraph </p>
</body>
</html>

CSS -> style.css

p {
color: blue;
}

In CSS -> cascading is done. There are a set rules for this. Example we can define property define twice, the second one will be effective.

Type of selectors:

HTML -> index.html
<!DOCTYPE html>
<html>
<head>
<title> HTML with CSS </title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p> This is a paragraph </p>
<p class="normal-paragraph"> This is also a paragraph </p>

<h1> This is my heading </h1>

<h2 id="myid"> This is sub heading </h2>
</body>
</html>

CSS -> style.css
/* type selector */

h1 {
font-size: 3em;
}

/* class selector */

.normal-paragraph {
color:aquamarine;
}

/* id selector */
#myid {
color:brown;
}

Multiple elements CSS
/* multiple elements */

h1, p {
border: 1px, solid, black;
}

Multiple Classes
/* multple classes */

.ingredientsList, .instructionsList {
font-size: 1.2em;
}

Selecting multiple types of elements

/* Using multiple kind of selector */

h2, .red, #redElement {
color: red;
}

distance between lines
.paragraph {
line-height: 1.6;
}

Aligning text to the centre in a box
.centered {
text-align: center;
}

No underline on the text
.no-underline {
text-decoration: none;
}

Spacing between letters
.spaced {
letter-spacing: 2px;
}

Make an element block type
.block-element {
display: block;
}

Make an element inline type
.inline-element {
display: inline;
}

Make an element inline-block

.inline-block {
display: inline-block;
}

Hide an element
.hidden {
display: none;
}


Positioning elements

relative positioning
.relative {
position: relative;
top: 10px;
}

absolute positioning
.absolute {
position: absolute;
}

z-index positioning
.front {
z-index: 10;
}


Flexbox
.container {
display: flex;
}

Change the axis to column
.column {
display: flex;
flex-direction: column;
}

Justify-content to move the elements
.centered {
display: flex;
justify-content: center;
}

align vertical direction
align-items: center;

flex-wrap - need to understand
.wrap {
display: flex;
flex-wrap: wrap;
}


spacing between elements
.spaced {
display: flex;
gap: 20px;
}

.grow {
flex-grow: 1;
}

.center-both {
display: flex;
justify-content: center;
align-items: center;
}


Grid:
columns
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

rows
.grid {
display: grid;
grid-template-rows: 100px 100px;
}

Span-2
.span-2 {
display: grid;
grid-column: span 2;
}


Gradient image:

.bg {
background-image: linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5));
}

.rounded {
border-radius: 10px;
}




// Decoration

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1> CSS properties </h1>
</header>
<main>
<!-- box shadow -->
<div class="shadow"> shadow </div>

<!-- text shadow -->
<h1 class="text-shadow"> Text with Shadow </h1>

<!-- gradient -->
<div class="gradient">
Gradient
</div>

<!-- background size -->
<div class="title-background"></div>

<!-- transparent -->
<div class="transparent"> 50% Transparent </div>

<!-- mutliple shadow -->
<div class="multi-shadow">
Layered Shadows
</div>

</main>

</body>
</html>

Decoration

.shadow{
display: inline;
padding: 10px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 24px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 1);
}

.text-shadow {
text-shadow: 2px 2px 2px gray;
}

.gradient {
padding: 10px;
/* text-align: center; */
color: white;
width: 300px;
height: 50px;
background-image: linear-gradient(to bottom, blue, yellow);
}

.title-background {
background-image: url("https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png");
background-size: 150px;
width: 300px;
height: 300px;
border: 2px solid;
color: pink;
}

.transparent {
/* border: 2px solid red; */
font-size: 16px;
width: 300px;
padding: 10px;
background-color: blue;
color: white;
opacity: 50%;
}

.multi-shadow {
/* border: 2px solid red; */
padding: 10px;
width: 100px;
height: 50px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
}

// ANIMATION

media query

keyframe

positioning

grid

flex

Comments

Post a Comment

Popular posts from this blog

Git Basics

git is a version control system. It is a software developed by the same guy who created Linux operating system. His name is Linus Torvalds. Now the question is what is version control system. A system that controls the versions of our code. Let's take a scenario. We are two guys creating an application. Both of us are working in backend. There is a new feature to be developed by both of us. I have done a part of work then you can use my part and integrate with yours. And if you have developed something, I can use it. But let's say there is a problem in my code. We can get back to a position where we can have a fresh code from that point. we can have two types of repository: local repository remote repository The remote repository is an optional repository. It is used to keep the work safe. Additionally, it is used as a reference by our peer developers. They can use the remote repository to make a copy of it for them selves. They can push the changes from there local to remote r...
Read more

Linux Basics

  Useful ls commands ls -l -> lists all the details regarding files in the current directory ls -a -> show hidden files as well. A file starting with . is considered hidden in linux. ls -r -> reversing the order ls -h -> size in human readable format ls -t -> sort by time ls -S -> sort by size ls -X -> sort by extension  ls -R -> recursively show content of subdirectory  ls -1 -> listing file with one option. One per line.  ls | cowsay -> list in funny way ls —color=never (double dash) to remove the colouring Remember, every expert was once a beginner. With patience and practice, you'll soon be navigating the Linux file system like a pro! pwd command: It has two addition options pwd -L : logical means as per current structure pwd -P: physical which means as per the actual structure User: User creation: sudo useradd <user-name> sudo useradd sitendra Details about a user cat /etc/passwd sudo grep -w '<username>' /etc/passwd uns...
Read more

Internet basics

Let us say we have two people in a room, they have to talk to each other. You can simply talk them.  Now if you have more than 2 people, you need to refer to their names for clarity.  If you have to talk to a friend but he lives in a different house than yours, now you need to a proper address to reach to him.  But what if there lives multiple people, you will just share the message to a gatekeeper. The gatekeeper will forward the message to the right house. If the house is not under his radar, the gatekeeper will request the next gatekeeper until it finds the right house.  Similarly, if you want a data within your house, you can ask directly. But if you want to get the data outside your house, you need to ask a gate keeper to get the data for you. This gate keeper is called a router. The router does not have the data itself but a server has. Once the server is identified, the server sends the data to the router and the router takes this data and send to the previous...
Read more