Codeingers

CSS Introduction & Syntax - For Beginners

2020-08-06T13:57:00.001+05:30

CSS Introduction

What is CSS?

CSS stands for Cascading Style Sheets
CSS describes how an HTML elements are to be displayed on a screen or in other media
CSS saves a lot of work. It can control many layout of the multiple web pages all at once.
External style sheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for web pages, including the design, layout and variations in display for different devices and screen sizes such as Computer , Tablet , Phone and many more.

CSS Example

body {
background-color: lightblue;

}

h1 {
  color: red;
  text-align: center;
}

p {
font-family: arial;
  font-size: 20px;

font-width: 20px;
}

CSS Solved a Big Problem

HTML was never intended to contain the tag for formatting a web page.

HTML was created to described the content of a web pages, like:

<h1>This is my first heading.</h1>

<p>This is my first paragraph.</p>

When tags like <a>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for the web developers. Development of larger websites, where fonts and fonts size and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS which stands for Cascading Style Sheets

CSS remove the style formatting from the HTML page.

CSS Saves a Lot of Work!

The style definitions are normally saved in external style.css files.

With an external style sheet file, you can change the look of an entire of your website or your project by changing just one file!

CSS Syntax

A CSS rule-set consists of the selector and a declaration block.

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by the semicolons.

Each declaration includes a CSS property such as font-size , font-color and many more name and a value, separated by a colon.

Multiple CSS declaration are separated with a semicolons, and declaration blocks are surrounded by curly bracket.

Example

p {
color: blue;
text-align: center;
}

Example Explained

p is a selector in CSS (it points to the HTML element you want to style <p>).
color is a property, and red is the property value.
text-align is the property and center is the property value.

2020-08-06T10:24:00.003+05:30

SITEMAP //////////////////////////////////////////////////////////////////////////////////////////////

Pages

2020-08-06T09:49:00.000+05:30

ABOUT US //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

Hello Friends! Welcome To My Codeingers Blog,

This is one of the best Blogs for free Tips and Tricks tutorials about Web Development How we make a website and what are main language for bulid a website such as HTML , CSS , JAVASCRIPT , PYTHON & much more. Which can be very very helpful for your daily life. Share My Blogs, Like My Blogs, Comment On My Blogs, S-U-B-S-C-R-I-B-E this channel and stay tuned in this blog for further updates.

नमस्कार दोस्तों! मेरे कोडिंग ब्लॉग में आपका स्वागत है,

यह वेब विकास के बारे में मुफ्त टिप्स और ट्रिक्स ट्यूटोरियल के लिए सबसे अच्छे ब्लॉगों में से एक है कि कैसे हम एक वेबसाइट बनाते हैं और एक वेबसाइट जैसे कि HTML, CSS, JAVASCRIPT, PYTHON और भी बहुत कुछ के लिए मुख्य भाषा क्या हैं। जो आपके दैनिक जीवन के लिए बहुत मददगार हो सकता है। शेयर माय ब्लॉग्स, लाइक माय ब्लॉग्स, कमेंट ऑन माई ब्लॉग्स, एस-यू-बी-एस-सी-आर-आई-बी-ई इस चैनल और आगे के अपडेट के लिए इस ब्लॉग में बने रहें।

HTML Attributes

2020-08-05T10:51:00.000+05:30

HTML Attributes

HTML attributes provide additional information about HTML elements.

HTML Attributes

All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs like: name="value"

The href Attribute

The <a>(Anchor Tag) tag defines a hyperlink. The href attribute specifies the url of the page and the link goes to:

Example

<a href="https://codeingers.blogspot.com">Visit Codeingers</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies the path to the image to be displayed:

Example

The width and height Attributes

The <img> tag should also contain the width and height attributes, which specifies the width and height of the image (in pixels):

Example

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the image for some reason cannot be displayed. This can be due to slow connection, or an error in the src attribute, or if the user uses a screen reader.

Example

See what happen if we try to display an image this show does not exist:

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size,font width and many more.

Example

<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare the language of the Web page. This is meant to assist the search engines and browsers.

The following example specifies English as the language:

Example

<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Chapter Summary

All HTML elements can have attributes
The href attribute of <a> specifies the url of the page the link goes to
The src attribute of <img> specifies the path of the image to be displayed
The width and height attributes of <img> provide size information for images
The alt attribute of <img> provides an alternate text for an image
The style attribute is used to add styles to an element, such as color, font, size, font width and many more
The lang attribute of the <html> tag declares the language of the Web page
The title attribute defines some extra information about an element

HTML Basic for Absolute Beginners

2020-07-30T13:31:00.000+05:30

HTML Basic for Absolute Beginners

In this chapter we will show some basic HTML examples for absolute beginners.

Don't worry if we use tags you have not learned about yet .We are here for your

help.

Lets get started!!!

HTML Documents

All HTML documents must start with a doctype also known as document

declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with a </html>.

The visible part of the HTML document is between the <body> and </body>.

HTML Headings

HTML headings are defined with the <h1>, and so on <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example

<This is First heading <
<This is Second heading <
<This is Third heading <

HTML Paragraphs

HTML paragraphs are defined with the <p> tag.

Example

<This is a paragraph.<
<This is another paragraph.<

<This is an another paragraph.<

HTML Links

HTML links are defined with the <a> tag: Here <a> tag is known as Anchor Tag

Example

< href="https://codeingers.blogspot.com/">This is a link<

The link's destination is specified in the href attribute.

Attributes are used to provide the additional information about HTML elements.

You will learn more about attributes in the later chapter.

If you are here new than first the blog and UpToDate

HTML Images

HTML images are defined with the <img> tag.

The source file (src), width,alternative text (alt), and height are provided as

attributes.

Example

How to View HTML Source?

Have you ever seen a Web page and wondered "Hey! How did they do that?"

How a web page work and "How did they make it?"

View HTML Source Code:

If you want to see your Favourite site HTML Source Code

Follow the steps given below

Step 1- Open your Favourite "Browser" my recommendation to "Google

Chrome"

Step 2- Right click on the website or web page

Step 3- You will see a "Inspect Element" option in it click on that

Step 4- you will see both the HTML and the CSS. You can also edit the HTML or

CSS on-the-fly in the Elements or Styles panel that opens.

''If you are new than Enter your Email and Subscribe the Blog " We will discuss

more about the HTML , CSS , JAVA , and PYTHON

HTML Editors

2020-07-29T13:52:00.007+05:30

HTML Editors

A simple text editor is all you need to learn HTML.

Learn HTML Using Visual Studio Code

Web pages can be created and modified by using professional HTML editors.

However, for learning HTML we recommend a Visual Studio Code.

Visual Studio Code features a lightning fast source code editor, perfect for day-to-day use.

With support for hundreds of languages. It has different of Extenstions that may help you

in make your website easily or lightly.

How to Download and Install Visual Studio Code:

Follow the Steps given below

Step 1- Firstly Download Visual Studio Code from here the link given below

Step 2- Second Click on install button and accept the agreement and click on next.

Step 3- Click on “create a desktop icon” so that it can be accessed from desktop and click on Next.

Step 4 - After that, click on the install button.Than your VS Code were installing in your Computer

Step 5- Finally, after installation completes, click on the finish button, and the visual studio code will get open.

HTML Page Structure

2020-07-29T12:06:00.001+05:30

HTML Page Structure

Introduction to HTML and What is an HTML Element ?..

2020-07-27T18:54:00.001+05:30

What is HTML?

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML consists of a series of elements
HTML elements tell the browser how to display the content
HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

A Simple HTML Document

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Introduction</title>
</head>
<body>
<h1>Hello world</h1>
<p>My first paragraph.</p>
</body>
</html>

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:

<tagname>Content goes here...</tagname>

The HTML element is everything from the start tag to the end tag:

<h1>My First heading</h1>

<p>My first paragraph.</p>

Start tag	Element content	End tag
<h1>	My First Heading	</h1>
<p>	My first paragraph.	</p>
<br>	none	none

Codeingers

CSS Introduction & Syntax - For Beginners

CSS Introduction

What is CSS?

Why Use CSS?

CSS Example

CSS Solved a Big Problem

CSS Saves a Lot of Work!

CSS Syntax

CSS Syntax

Example

Example Explained

SITEMAP //////////////////////////////////////////////////////////////////////////////////////////////

Pages

Introduction to HTML and What is an HTML Element ?..

HTML Page Structure

HTML Editors

HTML Basic for Absolute Beginners

HTML Attributes

ABOUT US

Contact us

ABOUT US //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

HTML Attributes

HTML Attributes

HTML Attributes

Example

The src Attribute

Example

The width and height Attributes

Example

The alt Attribute

Example

The style Attribute

Example

The lang Attribute

Example

Chapter Summary

HTML Basic for Absolute Beginners

HTML Documents

HTML Headings

HTML Paragraphs

Example

HTML Links

Example

HTML Images

Example

How to View HTML Source?

View HTML Source Code:

HTML Editors

HTML Editors

Learn HTML Using Visual Studio Code

How to Download and Install Visual Studio Code:

HTML Page Structure

HTML Page Structure

Introduction to HTML and What is an HTML Element ?..

What is HTML?

A Simple HTML Document

What is an HTML Element?