Online Web Coach

Friday, 5 June 2015

How To CSS Style

How To CSS Style Write or Insert ?

Three Ways to Insert CSS in your HTML file
There are three ways of inserting a style sheet:

1. "External" style sheet
2. "Internal" style sheet
3. "Inline" style

External CSS:
With an external style sheet(file), you can change the look of an entire website by changing just one file!

<head>
<link rel="stylesheet" type="text/css" href="style-sheet.css">
</head>

Internal CSS:
An internal style sheet it may be used if one single page has a unique style or different from other pages.

<head>
<style>
body {
background-color: green;
}

h1 {
color: red;
margin-left: auto;
}
</style>
</head>

Inline CSS:
An inline style it may be used to apply a unique style for a single element in HTML.

<h3 style="color:red; margin-left:40px;">This is a third heading.</h3>

CSS Selectors Style

CSS selectors allow you to select manipulate HTML elements (that you define).

Selectors are used to "find" or select HTML elements that based on their id (#id_name), class (.class_name), type(element_type), attribute, and more other.

Element Selector
It's based on the element name.

You can select all paragraph <p> elements on a page like this: (all <p> elements will be center aligned, with a blue text color and font size 14 pixel)

p {
text-align: center;
color: blue;
font-size:14px;
}

ID Selector
id selector uses to the whole block attribute of an HTML element to select a specific element.

To select an element with a specific id, write a hash(#) character (#id_name).

The style rule below will be applied to the HTML element with id="paragraph":

#paragraph {
text-align: center;
color: blue;
font-size:14px;
}

Class Selector
Class selector uses to the whole block attribute of an HTML element to select a specific element.

To select elements with a specific class, write a period(.) character(.class_name), followed by the name of the class:

The style rule below will be applied to the HTML element with class="paragraph":

.paragraph {
text-align: center;
color: blue;
font-size:14px;
}

Group selectors
you can group the selectors, to minimize the code.

To group selectors, each selector separate with a comma(,).

h1, h2, h3 {
text-align: center;
color: blue;
}

CSS Syntax Style

Two type of CSS Syntax:

1. Selector
2. Declaration
1. Property
2. Value

Selector:
Selector is HTML element that's you want to style.

Declaration:
Declaration block of contains({}) one or more declarations separated by semicolons(;). Declaration start with second bracket '{' and end of second bracket '}'.

Property & Value:
Each declaration includes a property name and a value, property and value separated by a colon(:).

CSS Style Introduction

What is CSS?

CSS mean "Cascading Style Sheets"

CSS defines how to be displayed are HTML elements in the pages External Style Sheets are stored in CSS files

"Before you know and should have a basic understanding of the HTML"

If you want to learn this subject first, find the tutorial on here "HTML".

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a document.

HTML was intended to define the content of a document, like:

<h1>This is a first heading</h1>

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

CSS Saves a Lot of Work!

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

With an external style sheet file, you can change the look of an entire Web site by changing just one file in you website!

Thursday, 3 July 2014

HTML Division !!

The Division is define <div> tag, the <div> tag defines a division or a section in an HTML document file.
The Division is the child of Body:
(
<body>
<div>
<p>This is my first HTML paragraph.</p>
</div>
</body>)
The Division tag has a start or opening tag <div> and an end or closing tag </div>. Div tag is very import for your web desingning or development.
This is support all HTML version, and support all Browser.

Example:
<p>This is some HTML text.</p>

<div style="color:#0000FF">
<h3>This is a heading in a HTML div element</h3>
<p>This is some text in a HTML div element.</p>
</div>

<p>This is some HTML text.</p>

Output:
This is some HTML text.

This is a heading in a HTML div element

This is some text in a HTML div element.

This is some HTML text.

HTML Body Tag !!

The <body> tag defines the document's body. The body tag child of html tag.
The Body tag has a start or opening tag <body> and an end or closing tag </body>.
This is support all HTML version, and support all Browser.

Example:
<body>
<p>This is my first HTML paragraph.</p>
</body>

HTML html Tag !!

HTML means Hyper Text Markup Language or
H = Hyper, T = Text, M = Markup, L = Language.
The <html> tag tells the browser that this is an HTML document.
The <html> tag represents the root of an HTML document.
The HTML tag has a start or opening tag <html> and an end or closing tag </html>.
This is support all HTML version, and support all Browser.

Example:
<html>
<body>
<p>This is my first HTML paragraph.</p>
</body>
</html>

HTML Horizontal Rule (hr) !!

The Horizontal Rule is define <hr> tag, hr separate you line content with border.
The <hr> tag is an empty tag which means that it has no end or closing tag, this is the single tag.
This is support all HTML version, and support all Browser.

Example:
<p>Online <hr>Webcoach</p>

Output:
Online

Webcoach

HTML Line Break !!

The Line Break is define <br> tag, br separate your line content with margin.
The <br> tag is an empty tag which means that it has no end or closing tag, this is the single tag.
This is support all HTML version, and support all Browser.

Example:
<p>Online <br>Webcoach</p>

Output:
Online
Webcoach