Well, hello, world. This is your mate team themidom. In this blog, you are going to know about CSS/CSS3. But before reading this blog, you must have little knowledge of HTML, you can get it from anywhere or you can just go to themidom.in and in the search bar, search for HTML and you will get a nice and organized basic tutorial. (for some reason we aren't able to give a link if you want just comment below.)
Now probably you have understood the difference between CSS and CSS3.
Before getting to know about CSS syntax, let's know the basics and history of CSS. And there is a little surprise for you below. So, just stick with the blog.
CSS/CSS3 Basics
CSS stands for Cascading Style Sheet, It is used for styling web pages over the internet. It allows you to create great-looking web pages. It also describes how HTML elements are to be displayed on the screen. CSS was developed in W3C (World Wide Web Consortium) by HÃ¥kon Wiem Lie in the year 1994. Now it is maintained by a team in W3C. CSS can accommodate background colors and images, line spacing, layout design, font style, display variation for different devices and screen sizes, and effects. To change the looks of a web page, web designers/web developers have to make changes in the single CSS file, and all the pages within the website will change their form according to the intended CSS file.
Let's talk about its versions.
CSS level1 or CSS1 came out of W3C as a recommendation in the year 1996. This version describes the CSS language as well as a simple visual formatting model for all HTML tags, though CSS was capable of styling some tags, still not enough for some modern browsers. So, after 2 years, CSS level2 or CSS2 became a W3C recommendation. This version added support for media-specific style sheets, for example, printers, downloadable fonts, tables, etc. Nowadays, CSS3 is used everywhere.
Difference between the first version of CSS and the latest version of CSS i.e CSS3
| CSS v/s CSS3 | |
|---|---|
| W3C developed the first version of CSS in the year 1996 | CSS3 is the latest version and released in the year 2005 |
| CSS uses the old-style format, like the old standard color format | CSS3 provides a different gradient color and schemes like RGBA, HSLA, HSL, and other color gradients |
| It doesn't support media queries | It supports media queries for responsive design |
| Modern browsers do not support CSS old versions | Nearly every browser supports CSS3 |
| There is no feature of layer design, text-shadow in CSS | CSS3 have all the features like text-shadow and provide 3D effects |
| CSS does not have the concept of modules | CSS3 incorporates a new feature where it can group CSS codes into convenient modules. Modules ensure that all styles for a specific component will reside in one place. |
| With the release of CSS, the CSS makes sure that all browsers should use the same fonts | But in CSS3, instead of using web-safe labeled fonts, designers can implement more unique fonts with HTML |
| CSS is slow | CSS3 is faster than CSS |
Now probably you have understood the difference between CSS and CSS3.
So, now let's know about types of CSS:
There are 3 types of CSS:
1) Inline CSS
2) Embedded or internal CSS
3) External CSS
So, Let's understand the types.
First, Inline CSS - It contains the CSS property in the body section attached with the element or tag is known as inline CSS. This kind of style has the highest priority, other kinds of CSS cannot override its property, So, it is recommended that use this type of CSS only in necessity. This kind of style is specified within an HTML tag using the style attribute, you can understand clearly, just see the below example.
<!DOCTYPE html>
<html>
<head>
<title>Example of Inline CSS</title>
</head>
<body>
<p style = "color:#22252e; font-size:30px;
font-style:italic; text-align:center;">
Themidom.in
</p>
</body>
</html>
Secondly, Internal or Embedded CSS - This can be used when a single HTML document must be styled uniquely. This kind of is written within the HTML document's head section and inside of the opening and closing style tag. These have the second-most priority. External CSS can't override it. The limitation of this kind of CSS is that you cannot reuse it on another HTML document. So, just see the below example you can understand clearly.
just save this script as index2.html and run the script in your browser and see the result. <!DOCTYPE html>
<html>
<head>
<title>Example Internal CSS</title>
<style>
.main {
text-align:center;
}
.container {
color:#22252e;
font-size:40px;
font-weight:bold;
}
.internal{
font-style:internal;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="container">Themidom.in</div>
<div class ="internal">
Just run this document and see the result.
</div>
</div>
</body>
</html>
Third and last, External CSS - External CSS contains a separate CSS file that contains only style property with the help of tag attributes (class, id, etc.). In this type, the CSS file is saved with the .css extension, later it is linked in the HTML document with link tag like "<link rel='stylesheet' href='style.css'/>". The disadvantage is that it has the least priority. It can't override the internal and inline CSS. But it is most useful for reusing the same file with many HTML documents. You can understand clearly from the example below.
First, create an HTML file, by the name of index.html and then create another file, by the name of style.css in the same folder. and copy the following code and see the result.
Here's the code for index.html
<!DOCTYPE html>
<html>
<head>
<title>Example of External CSS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class = "main">
<div class ="container">Themidom.in</div>
<div id ="external">
Example of external CSS
</div>
</div>
</body>
</html>
body {
background-color: black;
}
.main {
text-align:center;
}
.container{
color:#22252e;
font-size:50px;
font-weight:bold;
}
#external{
font-style:bold;
font-size:20px;
}
Rules relating CSS
A CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts -
Selector - A selector is an HTML tag at which a style will be applied. It could be any tag or class, or id, or universal (*) or child.
Property - A property is a type of attribute of an HTML tag. This could be color, border, background-color, etc.
Value - Values are assigned to properties. For example color: blue;
(Note: id is denoted by # and class is denoted by .)
So, the rule of CSS goes like that.
Select the selectors point to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons(;).
Each declaration includes a CSS property and value, separated by a colon (:) and declaration blocks are surrounded by curly braces {}. You can understand from the following rough diagram.
Well, now let's understand some most used CSS properties, to style documents.
1) color: helps to change the color of text inside of selector point
2) background-color: helps to change the background-color of text inside of selector point
3) padding - Helps to create spacing, around the selectors' point.
4) margin: Helps to give margin around the selectors' point.
5) font-family: Defines the font family inside of the selector's point.
6) position: Helpful for defining the position of any elements, can be absolute or relative.
7) width: Helpful for defining the width of the element
8) height: Helpful for defining the height of the element
9) display: Helpful for defining the display behaviors of the selector point in an HTML document.
10) cursor: helpful for changing the cursor shape of a mouse cursor.
12) font-size: Defines the size of the text inside of the selector's point in an HTML document.
13) line-height: Used to specify the height of the line.
14) letter-spacing: helps to increase or decrease the space between the words in a text.
15) opacity: It is used to specify the visibility of an element in an HTML document. It is from 0 to 1. 0 means no visibility, 1 means full visibility.
So, guys I just mention only a few of the most used properties, if you need more just comment below.
Ok, guys, it's time for a surprise. Now, we are going to build a responsive website using HTML and CSS only.
For this follow my instruction, we are going to use simple HTML elements, and we are going to use internal or embedded CSS,
Before that just go to "https://fonts.google.com/icons" or simply go to your web browser and search for the google material icon. And click the first link and you will be on the google fonts icon page and search for menu click the first icon and change color to white, and download it as png, you will get a ZIP file then extract it open 2x folder and change outline_menu_white_24dp name to the "menu". And do the same with other "Close", download it and rename it into the close.
After that create a folder named website and here copy and paste the "menu" and "close" image. And inside of website folder create an HTML file named index.html and save it and open it with your text editor and after that copy the below code and paste it. So, here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Website design</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
section{
position: absolute;
right: 0;
width: 100%;
min-height: 100vh;
padding: 100px;
display: flex;
justify-content: flex-start;
align-items: center;
background: #111;
transition: 0.5s;
}
header{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 40px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}
header .logo{
color: #fff;
text-transform: uppercase;
cursor: pointer;
}
.toggle{
position: relative;
width: 60px;
height: 60px;
background: url('menu.png');
background-repeat: no-repeat;
background-size: 30px;
background-position: center;
cursor: pointer;
}
section img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to left, #00f, #f00);
mix-blend-mode: overlay;
}
.text{
position: relative;
z-index: 10;
}
.text h2{
font-size: 6em;
font-weight: 800;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text h3{
font-size: 4em;
font-weight: 700;
color: #fff;
line-height: 1em;
text-transform: uppercase;
}
.text p{
position: relative;
font-size: 1.1em;
margin: 20px 0;
font-weight: 400;
max-width: 700px;
color: #fff;
}
.text a{
display: inline-block;
font-size: 1.1em;
background: #fff;
padding: 10px 30px;
text-transform: uppercase;
text-decoration: none;
font-weight: 500;
margin-top: 10px;
color: #111;
letter-spacing: 2px;
}
.menu{
position: fixed;
top: 0;
right: 0;
width: 300px;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #fff;
}
.menu ul{
position: relative;
}
.menu ul li{
position: relative;
list-style: none;
text-align: center;
}
.menu ul li a{
text-decoration: none;
font-size: 24px;
color: #111;
}
.toggle.active{
background: url('close.png');
background-repeat: no-repeat;
background-size: 25px;
background-position: center;
cursor: pointer;
}
.banner.active{
right: 300px;
}
@media (max-width: 991px){
section, section header{
padding: 40px;
}
.text h2{
font-size: 3em;
}
.text h3{
font-size: 2em;
}
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="https://themidom.in" onclick="toggleMenu()">Home</a></li>
<li><a href="https://themidom.in" onclick="toggleMenu()">About</a></li>
<li><a href="https://themidom.in" onclick="toggleMenu()">Training</a></li>
<li><a href="https://themidom.in" onclick="toggleMenu()">Teams</a></li>
<li><a href="https://themidom.in" onclick="toggleMenu()">Contact</a></li>
</ul>
</div>
<section class="banner">
<header>
<h2 class="logo">Logo</h2>
<div class="toggle" onclick="toggleMenu()"></div>
</header>
<div class="overlay"></div>
<div class="text">
<h2>Be Stronger</h2>
<h3>Never Give Up</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Temporibus exercitationem alias porro excepturi quae corporis
sit, labore nobis? Repellat minima, impedit reiciendis reprehenderit
beatae magni asperiores quod ducimus consectetur qui.</p>
<a href="https://themidom.in">Join Us</a>
</div>
</section>
<script type="text/javascript">
function toggleMenu(){
var menuToggle = document.querySelector('.toggle');
var banner = document.querySelector('.banner');
menuToggle.classList.toggle('active');
banner.classList.toggle('active');
}
</script>
</body>
</html>
If you got any error then feel free to comment below and we will show you a way.
Look like it's time to take a leave from you mate. Thanks for reading the post. See ya in the next post.
--Team themidom😇😇😇