what is CSS and how it works?

Hello, welcome to p Web Academy. Today we move to another front end web development programing language called CSS. CSS and HTML both work on hand on hand. You want to understand this first you want to know what is CSS and how it works? And you have to know about HTML. If you don’t know about HTML, you can go back and check our articles what is HTML and how it works? And how to create an HTML page with notepad? You must read this to for basic knowledge. Other wise you Can’t get under stand The CSS.

Before we move to the main topic, if you want to know about me you can check.

what is CSS and how it works?

now we learn the first part of our article what is CSS ?

  • CSS stands for cascading style sheets
  • CSS and HTML work for hand on hand.
  • If a housing structure is HTML, then house color, styling, and the interior is CSS.
  • CSS play the significant role on how HTML appearance.
  • HTML  describes A Web page structure. Ex- heading, para.
  • CSS describes the Web page appearance. Ex- heading color, para text size.
  • For a web page creation with colors and styles W3C(World Wide Web Consortium) created CSS.

Now we learn the second part of our article how CSS works?

  • CSS code nested in Curly braces. ex-{CSS CODE}
  • curly braces fill with property and value. ex-{property(color) value(blue)}
  • property end with column, value end with semi column. ex-{color: blue;}
  • above mentioned total process called as CSS Declaration.
  • An HTML tag called as CSS Selector always in front of outside the CSS declaration. ex-h1 {color: blue;}
  • single space is mandatory between CSS selector and CSS Declaration. ex-Selector {property: value;}
  • how all the HTML tags and Elements nested in Html elements same as all types of selectors, and declarations nested in Style Element.
  • Style Element has an opening and closing tags. ex- <style>TOTAL CSS</style>
  • All CSS documents must save with .css(dot css) extension.

Where we put the CSS code in HTML Document and how it works with HTML?

  • CSS code working in three different styles
  1. In line style. It is run in between any HTML opening tag.
  2. Internal style sheet. It is run in between head tag.
  3. External Style sheet. It is separate from HTML document. But only the URL link back to Head part of HTML.

We check the Theory until now. Let’s We go to practical test.

  • write an HTML document with boilerplate code.
  • save it with .html(dot html) extension.

now we check step by step how inline style work .

just a sample

  1. first of all your html document looks like below

<!DOCTYPE html>

<html>

<head>

<title> put here your name or some words</title>

</head>

<body>

the key point is to write some words here. otherwise, your webpage not showing in the browser.

</body>

</html>

the magic begins now. watch and practice carefully.

  • we all know the above showing html document is a raw document or boiler plate code.
  • when ever you open it, it’s showing “the key point is to write some words here. otherwise, your webpage not showing in the browser” in the body.
  • “put here your name or some words” showing the top of the browser’s tab.
  • Now do a simple thing. Add style tag inside of opening body tag.
  • See example below given by bold letters

<!DOCTYPE html>

<html>

<head>

<title> put here your name or some words</title>

</head>

<body style=”background-color: green”> the inline style. CSS code nested in HTML opening tag

the key point is to write some words here. Otherwise, your webpage not showing in the browser.

</body>

</html>

Now save the file and open in your browser. What do you find?  Browser back ground color in green! Just now we give color styling to an HTML document with CSS Inline style.

We learn more about styling methods and how those works in up coming posts.  Let me know after reading what is CSS and how it works?  How many do the magic with below comments?

I hope this article gives an Idea of what is CSS and how it works? If you have any doubts on the process, you can contact me, without any hesitation. You can comment for small doubts below this article. You think this post useful for your near ones. Let’s share this on your favorite social platform. For more good posts like this in future, you can subscribe through email, are click and follow me hitting one of my social links.

Read this post in Telugu. You want to know about me go to about page. Thank you for visiting my website.

Summary
what is CSS and how it works
Article Name
what is CSS and how it works
Description
What is CSS and how it works? If a housing structure is HTML, then house color, styling, and the interior is CSS. CSS and HTML work for hand on hand.Know mo
Author
Publisher Name
apwebacademy.com
Publisher Logo
Spread the love

Ajay Kumar

hello, Ap Wed Academy is a passion of an entrepreneur. a mind of web scientist I am doing a professional job in a well-named company. I don’t have any degrees, I am not an English expert. but, a lot of interest and Enthusiasm about learning web concepts. that’s why you’re read my profile here. my goal is help people who want to learn web concepts.you can follow me by click one of my social links.

Leave a Reply

%d bloggers like this: