Friday 5 June 2015

Inline CSS Style


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

An inline CSS style loses many of the advantages of a CSS style sheet. Use this method sparingly!

To use inline CSS styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property.

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

Internal CSS Style


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

Internal CSS styles are defined within the <style> element it's start with <style> tag and end of with </style>, inside the head section of an HTML page:

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

h1 {
    color: red;
    margin: auto;

</style>
</head>

External CSS Style Sheet


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

Each HTM page must be include a reference to the external CSS style sheet file inside the <link> element. The <link> element goes inside the <head> section:

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

you can write external style sheet in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css(style-sheet.css) extension. An example of a style sheet file called "style-sheet.css", is shown below:

body {
    background-color: green;
}

h1 {
    color: red;
    margin: auto;
}

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 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!