Showing posts with label element. Show all posts
Showing posts with label element. Show all posts

CSS Syntax

CSS Syntax

A CSS rule-set consists of a 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 semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a red text color:Example:

<!DOCTYPE html>
<html>
<head>
<style>
p {
    color: red;
    text-align: center;

</style>
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>


CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.
You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element should be unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>


The class Selector

The class selector selects elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the name of the class.
In the example below, all HTML elements with class="center" will be red and center-aligned: Example:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    text-align: center;
    color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

Styling HTML with CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
  • Inline - by using the style attribute in HTML elements
  • Internal - by using a <style> element in the <head> section
  • External - by using an external CSS file
The most common way to add CSS, is to keep the styles in separate CSS files. However, here we will use inline and internal styling, because this is easier to demonstrate, and easier for you to try it yourself.

  • Inline CSS

An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue.Example:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">This is a Blue Heading</h1>

</body>
</html>

  • Internal CSS

An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

  • External CSS

An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site, by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Formatting Elements

Formatting Elements

Formatting elements were designed to display special types of text:
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text
These are simple uses in HTML.

HTML TAGS:

For learning HTML following heading very important because these are basic information of HTML. Therefore read carefully and understand every part of this chapter.......

HTML TAGS:


    Tags contain elements which provide instructions for how information will be processed or displayed. There are both starter tags <TAG> and end tags </TAGS>

Element:

    A basic unit of an HTML document. The name of the element is given in the name of the tag, and specifies the meaning associated with a block of text. Some elements are empty since they don't effect a block of text. Elements that have contents are also called containers, i.e., they contain attributes.
    • Example: the <HR> tag contains the Horizontal Ruler element. It is an empty element in that it has no attribute.

    Attribute:

      Defines a special property of an HTML element.
      • Example: <IMG SRC="image.gif"> means that the element IMG has an attribute SRC, which specifies the name of the image file, which is assigned the value "image.gif".

      Delimiters: <, >, /

        Delimiters surround the tag and inform the parser that it should read the enclosed information as an HTML element.

      HTML Structure

      HTML is a structured hierarchical language that requires you to follow its rules if you wish your documents to appear correctly. For example, certain elements and tags are required to fit within other elements and tags and will not work unless they are properly placed.




      HTML(Hyper Text Markup Language)

      HTML(Hyper Text Markup Language)

      Hyper Text Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS), and JavaScript, it forms a triad of cornerstone technologies for the World Wide Web. Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
      HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. Tags such as <img /> and <input /> introduce content into the page directly. Others such as <p>...</p> surround and provide information about document text and may include other tags as sub-elements. Browsers do not display the HTML tags, but use them to interpret the content of the page.
      HTML can embed programs written in a scripting language such as JavaScript which affect the behavior and content of web pages. Inclusion of CSS defines the look and layout of content. The World Wide Web Consortium (W3C), maintainer of both the HTML and the CSS standards, has encouraged the use of CSS over explicit presentation  HTML since 1997
      Some tags of HTML.
      • <H1> For Heading </H1>
      • <A> For LINK </A>
      • <IMG> IMAGES
      • <P> PARAGRAPH </P>
      • <INPUT> TEXT BOX
      • <BR> LINE BREAK </BR>

      introduction of computer

      A video introduction of computer                                         very useful information in this video.                      ...