What is CSS and how does it work?
CSS –
CSS refers to style sheets (Cascading Style Sheets -Cascading Style Sheets) It is used to structure and improve the appearance of HTML web documents such as defining headings and paragraphs and allowing embedding of various images, videos and other media on the website.
How and in which design the HTML codes will be published in the web browser can be expressed through CSS. CSS (CSS) codes are published with HTML codes. CSS codes can be kept in separate files and those codes are linked to HTML pages. The biggest advantage of CSS Page Codes is that you don’t have to write a code repeatedly.
Check the link below for more information-
Required software to type HTML and CSS codes –
All the software required to type HTML and CSS Codes are as follows:
Notepad or Notepad ++ more advanced editor like Adobe Dreamweaver, html kit. Now I will suggest you to use Notepad++ it is very easy. Then save the created css file style.css in this extension. Then after writing the codes run or open in any internet browser – Mozilla Firefox, Google Chrome, Internet Explore etc.
Required software-
- UltraEdit.
- NoteTab.
- Notepad++
- Sublime Text.
- TextPad.
- Komodo IDE.
- Visual Studio Code.
- Dreamweaver
Basic structure format of css file:
The basic structure of the CSS file can be divided into two parts – one is selector and the other is declaration as shown in the figure below.
Css properties and value
Let me explain it better – selector is an HTML element like <p>……..</p> or <h2>……..</h2> etc declaration is again two clauses. There is eg Declaration={Property:Value} Here there can be one declaration (Declaration). Making it a little easier – <html tag> { Property:Value ;}
How to use CSS:
There are three methods of using style sheets in HTML documents such as- 1. Internal CSS, 2. External CSS, 3. Inline CSS. An HTML page can be styled by adding css (css) code inside the head (head) tag with the style tag (style tag) – this is Internal CSS eg.
Another is that the CSS codes are created in a separate file and linked inside the (head) tag with a link (Link) tag – this is External CSS. And each element of HTML can be individually styled, called Inline CSS.
- Internal CSS
- External CSS
- Inline CSS
Here are three examples of how to use CSS –
Internal CSS- (head):
<!DOCTYPE html>
<html>
<head>
<style> h1 {font-size:20px; color:blue;} </style>
</head>
<body>
<h1> This is Test Page </h1>
</body>
</html>
External CSS-
An important point here is to create a separate CSS file, and save it as style.css (Extension) to show this style inside that separate file.
Example format – .h1{font-size:20px; color:blue;}
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” type= “text/css” href=”style.css”/>
</head>
<body>
<h1> This is Test Page </h1>
<body>
</html>
Then save HTML files or codes in a folder with index.html extension and CSS files or codes with style.css extension. Then check open in browser.
Inline CSS –
Specifying styles individually for each HTML element:
<!DOCTYPE html >
<html>
<head>
<link rel=”stylesheet” type= “text/css” href=”style.css”/>
</head>
<body>
<h1 style=”font-size:20px; color:blue;”> This is Test Page </h1>
</body>
</html>
Note: External CSS is most useful here, because this page has to be done separately. All CSS code resides inside this CSS page. Controlling from here is very easy. And the advantage of inline pages is that External and Internal CSS can be overridden. I would suggest you to use External CSS.
More info HTML click link below –
HTML Markup Language:
HTML stands for Hyper Text Markup Language It is basically the Markup Language with which we can create the markup of a web site Markup means creating the basic structure of a web site – like when we build a house but first a structure or foundation stone is laid – Take for example-
HTML Structre
After laying the foundation stone of the building or house, I have to make the walls of the building, give the roof, paint and decorate the interior of the house with various other decorations.
CSS Structure
Now see first when creating a website such a markup or structure should be created. You will create the structure of the website by typing HTML Code – HTML is basically some code and the structure of the website is created through various tag attributes –
for example
<!DOCTYPE html>
<html>
<head> <title> This is test Page </title> </head>
<body>
<h1> Here you have to type more different types of code </h1>
</body>
</html>
Check the link below for online income –
Then after creating the structure of the website, you will design the website as you want, using different types of text, color text, bold and big and small, etc., and different types of content, such as video, image, audio, etc., using CSS code in different ways. to be designed and decorated with If you look at the image below, you will understand the point – Below is some CSS code like-
<p style=”color:red; font-size:20px” > This is test Page </p>
This is what is meant in the above image that – I will place the structure or foundation by typing HTML Code, then I will decorate or design the structure or foundation with CSS code.
Note: Today’s class is up to now, then in CSS Class Part-2 I will discuss the various properties of CSS, I hope everyone will watch the class carefully.
Related Topic –
Earn Money online on Binance …………
Earn Money online on Fiverr …………
