Happy Holidays

I hope everyone has an excellent holiday season and a Happy New Year!
-M

Xperia Play Price Drop

The Sony Xperia Play has received a very surprising price drop, Down to 170 Euros on pay as you go. The question is, is it worth the money now? I want to hear from you guys, would you buy this device at it's new price point?

Update 15 Cyanogen mod Vodafone 845 Gingerbread

Update 15 for CyanogenMod for the Vodafone 845 is now out! This adds updated CyanogenMod Sources.


Get CM7.1.0 with Kernel 2.6.32-9-perf here:
http://www.mediafire.com/?5jcm843ew6v5smc


Check out the official project page here:
http://forum.xda-developers.com/showthread.php?t=1096075

Happy Halloween!

Happy Halloween everyone! I hope you all have a good night!

iPhone 4S

Source: BBC

Apple has unveiled the latest iteration in its iPhone range, but there was no sign of the widely rumoured iPhone 5.

The iPhone 4S, as the model will be known, boasts an improved camera and significantly extended battery life.

It will run the latest iOS5 operating system, which is set for release on 12 October.

The event was the first major announcement for new boss Tim Cook who took over from Steve Jobs in August.

The iPhone 4S, which will go on sale on 14 October, will be available in 16GB, 32GB and 64GB models - in both black and white.

It has the same look and feel as the existing iPhone 4 which was launched 15 months ago.

However, Apple said that updates to iOS meant the phone would boast some "200 new features".

Shares in Apple fell by almost 5% within minutes of the eagerly anticipated launch, with analysts saying that investors and Apple fans had expected the latest version to be a more radical improvement over its predecessor.

However, the company's shares later regained most of their losses to close down just 0.6%, albeit underperforming the NASDAQ index as a whole.

Voice control

Among the additions is an "intelligent assistant" that allows users to ask questions aloud and receive detailed answers back.

Siri, which began life as a third-party app, was purchased by Apple in 2010 but has yet to appear within its software.

Luke Peters, editor of gadget magazine T3, said that the software announcements would do just enough to keep Apple fans interested in the face of strong challenges from rival smartphone manufacturers.

"Some people were looking for a brand new phone and they haven't got that today, so some will be disappointed," he told BBC News.

"But with the update to iOS5 and Siri that could be enough to sway people to make the investment."

Disappointment

Other industry watchers were less charitable about the iPhone refresh, and the non-appearance of the iPhone 5.

Gareth Beavis, phones editor at TechRadar said that the new hardware would leave many people underwhelmed.

"It was quite disappointing. I think there is going to be a lot of anger from users expecting something big bold and quite exciting after a long time of waiting from the iPhone 4.

"People will buy this in their droves, but Apple has missed a trick by just releasing the exact same phone again with marginally upgraded specs."

Details of the new phone were unveiled by Apple's Philip Schiller

For Apple's new chief executive, the event was as much about making a statement about his leadership as it was new products.

Tim Cook had previously acted as interim boss, looking after the company while Steve Jobs was on sick leave.

Unlike his charismatic predecessor, Mr Cook left the biggest announcement of Tuesday's event to a colleague - marketing boss Phil Schiller.

"Maybe he wants to bring other people to the forefront by letting others speak on his behalf," said Gregory Roekens, chief technology officer at marketing firm Wunderman.

"But in terms of style, it was underwhelming. People were expecting iPhone 5, but instead it's almost fixing the weaknesses the previous phones had.

"It will be interesting to see how people react to that."

Installing CyanogenMod 7.1 Android 2.3.5 Gingerbread on a Vodafone 845 (Huawei U8120)

The Vodafone 845 is one of the best budget Android phones on the market that is below 100 Euros. 
The only downside to the phone is it comes with Android 2.1 Eclair; today I will be showing you how to install a fully working version of Android 2.3.5 Gingerbread onto your phone. This ROM comes with ADWLauncher, Overclocking built in up to 748MHz, and more.


I am not responsible for any damage to your phone


We begin by making a NAND backup of your phone in recovery mode, to do this power on your phone while holding Accept call and Volume Up. Once you have completed this restart your phone. Open up the app market and install "ROM Manager". Flash the phone with ClockworkMod Recovery 3.0.05 for Huawei Ascend in ROM Manager. Download CM7.1.0 with Kernel 2.6.32-9-perf here, Copy it to your microSD. Restart your phone into Recovery mode again by powering it on while holding Accept Call and Volume Up. Wipe your phone with Recovery mode and install the .zip file from SDCard. 


To get SD Mount to work format your SDCard in Recovery for Ascend.

To get Google Apps download the version for CyanogenMod 7 here. Rename the .zip to update.zip and install it as an update from SDCard in Recovery. 


Working:

RIL

Audio

Bluetooth

Wi-Fi

Wi-Fi Hotspot

Key lights

Sensors

D-pad

OC Kernel (122-748MHZ)

SDCard mount via notification bar (only read file)

Fixed GPS

Fixed AGPS

Fixed layout in usb mass storage screen & dialer

Fixed Framework

YouTube fixed

Better screen adjustment

Camera Fixed

Video recording Fixed

Calibration support

Bugs/Not working/TODO:

Missing FM

There is some lag after some apps are closed

Fix broken clock layout

Headset mic problems (maybe fixed)

SD card mount not working. use Qtadb

Steve Jobs Dead at 56

From Reuters, (( Steve Jobs, who transformed the worlds of personal computing, music and mobile phones, died on Wednesday at the age of 56 after a years-long battle with pancreatic cancer. ))

This comes at a total shock to me.  While I knew he was sick, before retiring, but I didn’t think it was that bad. 

While I am not an Apple guy, I have to give Jobs credit for retaking his company and completely reinventing it.  Jobs had the iMac and the Power Mac look completely different from the PC market and design, thus giving the Apple brand a different vibe and customer base.  Out of that brand, another group of products were born via the iPod, iPhone, and iPad. 

Jobs also bought Pixar from George Lucas.  From there, he helped turned the company from a FX branch to a movie studio that still makes millions today and has reshaped Disney.  Jobs’ influence has changed the creative way Disney runs its company. 

Anyway, Steve Jobs will be missed. 

Razer Blade Specs

Here are the technical specifications for Razer’s new gaming laptop called, Blade. Razer claims it to run next-gen games like a breeze and is the ultimate weapon for gamers who love portability.

Technical Specifications

Processor:

• Intel Core i7-2640M processor.
• Dual core – 64Bit.
• CPU: 2.8Ghz / 3.5 GHz (Base/Turbo).

Chipset

• Intel Mobile Express Series 6 PCH “Cougar Point” chipset.

Memory

• 8GB of 1333 MHz DDR3 memory.

Display

• 17.3″ (Diagonal).
• 16:9 ratio.
• 1920 x 1080 LED back-lit.

Graphics & Video

• Integrated graphics for mobile mode.
• Next generation Nvidia discrete GPU (GT 555M) with 2GB dedicated GDDR5 and Optimus Technology.
• Built-in HD webcam.

Storage

• 320GB 5200RPM SATA.

Connections & Expansions

• HDMI connector.
• 1x USB 3.0
• 2x USB 2.0 (always on power).
• 3.5mm audio microphone/headphone combo jack.
• Gigabit Ethernet port.

Battery

• Integrated 60Wh battery.

Communications

• Wi-Fi wireless networking 802.11 b/g/n compatible.
• Bluetooth 3.0

Size & Weight

• Width: 16.81 inches (42.7 cm).
• Depth: 10.90 inches (27.7 cm).
• Height: 0.88 inches (2.24 cm).
• Weight: 6.9 pounds (3.16 kg).

Short break

I'm going to be taking a short break from blogging.

Catch you guys later.

Advanced CSS3 Tutorial 12: User Interface

In CSS3, some of the new user interface features are resizing elements, box sizing, and outlining.
The resize property is supported in Firefox 4+, Chrome, and Safari.
The box-sizing is supported in Internet Explorer, Chrome, and Opera. Firefox requires the prefix -moz-. Safari requires the prefix -webkit-.
The outline property is supported in all major browsers, except Internet Explorer.

In CSS3, the resize property specifies whether or not an element should be resizable by the user.

div
{
resize:both;
overflow:auto;
}

Box Sizing
The box-sizing property allows you to define certain elements to fit an area in a certain way:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Outline Offset
The outline-offset property offsets an outline, and draws it beyond the border edge.
Outlines differ from borders in two ways:
Outlines do not take up space
Outlines may be non-rectangular

div
{
border:2px solid black;
outline:2px solid red;
outline-offset:15px;
}

Advanced CSS3 Tutorial 11: Transitions

With CSS3, we can add an effect when changing from one style to another, without using Flash animations or JavaScripts.
This is also using Pseudo Classes.
Here is an example of what we'll be doing today: http://dark-knight.net/example2.html

This isn't supported by Internet Explorer.

p {
   color:#000;
   -webkit-transition:color 1s ease-in;
   -moz-transition:color 1s ease-in;
   -o-transition:color 1s ease-in;
   transition:color 1s ease-in;
}
p:hover{color:#f00;}

"transition:color 1s ease-in" It transitions the color slowly, and takes 1 second.

"p:hover{color:#f00;}" is a Pseudo Class that tells the browser when <p> is hovered over to change the color.

Advanced CSS3 Tutorial 10: 3D Transforms

CSS3 allows you to format your elements using 3D transforms.
At the time of writing this is only supported by Chrome and Safari which use the prefix '-webkit-'.

The rotateX() Method
With the rotateX() method, the element rotates around its X-axis at a given degree.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

The rotateY() Method
With the rotateY() method, the element rotates around its Y-axis at a given degree.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}

Advanced CSS3 Tutorial 9: 2D Transforms

A transform is an effect that lets an element change shape, size and position.
You can transform your elements using 2D or 3D transformation.

Support

Internet Explorer 9 requires the prefix -ms-.
Firefox requires the prefix -moz-.
Chrome and Safari requires the prefix -webkit-.
Opera requires the prefix -o-.

2D Transforms

The translate() Method
With the translate() method, the element moves from its current position, depending on the parameters given for the left (X-axis) and the top (Y-axis) position:

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}

The value translate(50px,100px) moves the element 50 pixels from the left, and 100 pixels from the top.

The rotate() Method

With the rotate() method, the element rotates clockwise at a given degree. Negative values are allowed and rotates the element counter-clockwise.

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */
}

The value rotate(30deg) rotates the element clockwise 30 degrees.

The scale() Method

With the scale() method, the element increases or decreases the size, depending on the parameters given for the width (X-axis) and the height (Y-axis):

div
{
transform: scale(2,4);
-ms-transform: scale(2,4); /* IE 9 */
-webkit-transform: scale(2,4); /* Safari and Chrome */
-o-transform: scale(2,4); /* Opera */
-moz-transform: scale(2,4); /* Firefox */
}

The value scale(2,4) transforms the width to be twice its original size, and the height 4 times its original size.

The skew() Method

With the skew() method, the element turns in a given angle, depending on the parameters given for the horizontal (X-axis) and the vertical (Y-axis) lines:

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}

The matrix() Method
The matrix() method combines all of the 2D transform methods into one.
The matrix method take six parameters, containing mathematic functions, which allows you to: rotate, scale, move (translate), and skew elements.

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */
}

Advanced CSS3 Tutorial 8: Text Effects

Today I'll show you have to add text shadow and word wrap.

text-shadow

In CSS3, the text-shadow property applies shadow to text.
You specify the horizontal shadow, the vertical shadow, the blur distance, and the color of the shadow:

h1
{
text-shadow: 5px 5px 5px #FF0000;
}

Note: This is not supported in Internet Explorer yet.

word-wrap

If a word is too long to fit within an area, it expands outside.
n CSS3, the word-wrap property allows you to force the text to wrap - even if it means splitting it in the middle of a word.

p {word-wrap:break-word;}

Advanced CSS3 Tutorial 7: Image Sprites

An image sprite is a collection of images put into a single image file.
A web page with loits of images can take very long to load and generates multiple server requests.

Here's an example of a Image Sprite picture:
http://www.w3schools.com/css/img_navsprites.gif

With CSS we specify it to show just the part we need:

img.home
{
width:46px;
height:44px;
background:url(img_navsprites.gif) 0 0;
}

Advanced CSS3 Tutorial 6: Image Opacity/Transparency

Example 1 - Transparent Image

First we shall create a transparent image with CSS.

You would use the following source code:

<img src="klematis.jpg" width="150" height="113" alt="klematis" style="opacity:0.4;filter:alpha(opacity=40)" />

Firefox uses the property opacity:x for transparency, while IE uses filter:alpha(opacity=x).
Tip: The CSS3 syntax for transparency is opacity:x.
In Firefox (opacity:x) x can be a value from 0.0 - 1.0. A lower value makes the element more transparent.
In IE (filter:alpha(opacity=x)) x can be a value from 0 - 100. A lower value makes the element more transparent.

Example 2 - Image Transparency - Mouseover Effect

The code looks like this:
<img src="klematis.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

<img src="klematis2.jpg" style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We see that the first line of the source code is similar to the source code in Example 1. In addition, we have added an onmouseover attribute and an onmouseout attribute. The onmouseover attribute defines what will happen when the mouse pointer moves over the image. In this case we want the image to NOT be transparent when we move the mouse pointer over it.
The syntax for this in Firefox is: this.style.opacity=1 and the syntax in IE is: this.filters.alpha.opacity=100.
When the mouse pointer moves away from the image, we want the image to be transparent again. This is done in the onmouseout attribute.

Example 3 - Text in Transparent Box

The source code for this looks like this:

<html>
<head>
<style type="text/css">
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  /* for IE */
  filter:alpha(opacity=60);
  /* CSS3 standard */
  opacity:0.6;
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

First, we create a div element (class="background") with a fixed height and width, a background image, and a border. Then we create a smaller div (class="transbox") inside the first div element. The "transbox" div have a fixed width, a background color, and a border - and it is transparent. Inside the transparent div, we add some text inside a p element.

CSS3 and HTML5 Example 2: Image Gallery

The following image gallery is created with CSS, Create two documents, a HTML document and a CSS one. You will also need 4 images for the this Gallery.

In the CSS document put the following:

div.img
  {
  margin:2px;
  border:1px solid #0000ff;
  height:auto;
  width:auto;
  float:left;
  text-align:center;
  }
div.img img
  {
  display:inline;
  margin:3px;
  border:1px solid #ffffff;
  }
div.img a:hover img
  {
  border:1px solid #0000ff;
  }
div.desc
  {
  text-align:center;
  font-weight:normal;
  width:120px;
  margin:2px;
  }

  In the HTML document put this:

 <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="img">
  <a target="_blank" href="klematis_big.htm">
  <img src="klematis_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis2_big.htm">
  <img src="klematis2_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis3_big.htm">
  <img src="klematis3_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>
<div class="img">
  <a target="_blank" href="klematis4_big.htm">
  <img src="klematis4_small.jpg" alt="Klematis" width="110" height="90" />
  </a>
  <div class="desc">Add a description of the image here</div>
</div>

</body>
</html>

CSS3 and HTML5 Example 1: Navigation Bar

Having good and easy to navigation is important for any site.

With CSS you can transform boring HTML menus into good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.
In this example we build the navigation bar from a standard HTML list.
A navigation bar is basicly a list of link, using <ul> and <li> elements makes perfect sense:

<ul>
<li><a href="default.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a hreft="about.html">About</a></li>
</ul>

Now let's remove the bullets and the margins and padding from the list:

ul
{
list-style-type:none;
margin:0;
padding:0;
}

The code in the example is the standard code used in both vertical and horizontal navigation bars.

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the <a> elements, in addition to the code above:

a
{
display:block;
width:60px;
}

Horizontal Navigation Bar

There are two ways to create a horizontal navigation bar. Using inline or floating list items.

Both methods work fine, but if you want the links to be the same size, use the floating method.

Inline List Items

One way to build a horziontal navigation bar is to specify the <li> elements as inline, in addition to the "standard" code above:

li
{
display:inline;
}

Floating List Items

In the example above the links have different widths.

For all the links to have equal width, float the <li> elements and specify a width for the <a> elements:

li
{
float:left;
}

a
{
display:block;
width:60px;
}

Advanced CSS3 Tutorial 5: Pseudo Classes

CSS pseudo-classes are used to add special effects to some selectors.

Syntax

The syntax of pseudo-classes:

selector:pseudo-class {property:value;}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property:value;}

Anchor Pseudo-classes

Links can be displayed in different ways in CSS supporting browsers

a:link {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;}
a:active {color:#0000FF;}

Note: These must be in the above order. Pseudo-class names are not case-sensitive.

Advanced CSS3 Tutorial 4: Align

In CSS, several porperties are used to align elements horizontally.

Center Aligning Using the margin Property

Block elements can be aligned by setting both the left and right margins to "auto".
(margin:auto does not work in Internet Explorer 8 unless !doctype is declared.)

Setting the left and right margins to auto specifies that they should split the available margin equally, The result is a centered element:

.center
{
margin-left:auto;
margin-right:auto;
width 70%;
background-color:#353535;
}

Note: Aligning has no effect if the width is 100%; In IE5 there's a margin handling bug for block elements.

Left and Right Aligning Using the position Property

One method of Aligning elements is to use absolute positioning:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#353535;
}

Absolute positioned elements are removed from the normal flow, and can overlap elements.

Crossbrowser Compatibility Issues

When aligning elements like this, it's a good idea to predefine margin and padding for the <body> element. This is to avoid visual differences in different browsers.

There is a problem with IE8 and earlier when using the position property. If a container element (in our case <div class="container">) has a specified width, and the !DOCTYPE declaration is missing, IE8 and earlier versions will add a 17px margin on the right side. This seems to be space reserved for a scrollbar. Always set the !DOCTYPE declaration when using the position property:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Left and Right Aligning Using the float Property

Another method of aligning elements is to use the float property:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Advanced CSS Tutorial 3: Float

With float an element can be pushed to the left or right allowing other elements to wrap around it.
Float is most commonly used for images but is useful for other things too.

How Elements Float
Elements may only be floated horizontally, not vertically.
A floated element will move as far on its horizontal axis as it can. This means all the way to the left or right of its containing element.
The elements after the floating element will flow around it; elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:
img
{
float:right;
}

Floating Images Next to Each Other
If you place several floating elements after each other, they will float next to each other if there is room.
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}

Turning off Float - Clear
Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
.text_line
{
clear:both;
}

Advanced CSS3 Tutorial 2: Positioning

The CSS positioning properties allow you to position an element. It also allows you to place an element behind another, and specify what should happen when an element's conetent is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are 4 different positioning methods.

Static Positioning
HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning
And element with a fixed position is positioned relative to the browser window, it will not move even if the window is scrolled.
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
Note: IE7 and IE8 support the fixed value only if a !DOCTYPE is specified.
Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning
A relative positioned element is positioned relative to its normal position.
h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of relatively positioned elements can be moved and overlap other elements, but the reserved space for the element is still preserved in the normal flow.
h2.pos_top
{
position:relative;
top:-50px;
}
Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning
An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:h2
{
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
An element with greater stack order is always in front of an element with a lower stack order.
Note: If two positioned elements overlap, without a z-index specified, the element positioned last in the HTML code will be shown on top.

Advanced CSS3 1: Grouping Selectors

In CSS you can group selectors together to save time and become more efficient.
For example, before you would have to type out all this:
h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

But when you group selectors it becomes this:
h1,h2,p
{
color:green;
}
As you can see this is far more efficent and easier to read.

It is also possible to apply a style for a selector within a selector.
In the following example, One style is specified for all p elements, a second style is specified for all elements with class="marked", and a third is specified for p elements with class="marked":
p
{
color:blue;
text-align:center;
}
.marked
{
background-color:red;
}
.marked p
{
color:white;
}

CSS3 Tutorial 8: Styling Lists

In HTML there are 2 kinds of lists, Unordered lists and ordered lists; these can be styled with CSS.
There are multiple list item markers to choose from, the most common are circle and square.
You can also use custom images as list markers, I'll show you that later in this tutorial.

Defining List Item Markers

You use list-style-type to define the type of list item marker:
ul.a {list-style-type: square;}
ul.b {list-style-type: circle;}

ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

These are some examples of values for ordered and unordered lists.

Using an Image as the List Item Marker

To use an image as the List Item Marker use list-style-image:
ul
{
list-style-image: url('image.here');
}

Unfortenuatly this does not show equally in all browsers, In IE and Opera it is displayed a little higher than in Firefox, Chrome and Safari.

This is a Crossbrowser solution:
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
li
{
background-image: url('image.here');
background-repeat: no-repeat;
background-position: 0px 5px;
padding-left: 14px;
}

CSS3 Tutorial 7: Styling Links

Styling links in CSS3 is just as simple as Text. You can style the link, the link after it's visited, the link when it's hovered over and the link when it is clicked. Links can be styled with any CSS property. Here's some examples of Link Styling:

a:link {color:#ff0000;}
a:visited {color:#00ff00;}
a:hover {color:#ff00ff;}
a:active {color:#0000ff;}

When setting the style for the different link states they must be in the above order to work properly.

Text decoration for links is the same as text as well, Here's an example:

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Background color for links is the same as anything else in CSS too:

a:link {background-color:#b2ff99;}
a:visited {background-color:#ffff85;}
a:hover {background-color:#ff704d;}
a:active {background-color:#ff704d;}

CSS3 Tutorial 6: Using Custom Fonts

In CSS3 you can specify the use of custom fonts. It doesn't matter if the person viewing the page doesn't have the font installed, You simply host the font online and use @font-face in your CSS to link to it! The code that you use is this:

@font-face {
font-family: [Custom font name];
src: url('[url to font]');
}

You can't use any fonts though, you have to use a special font format, You can generate them at http://cufon.shoqolate.com/generate/. To implement the new font you would use font-family like this:

h1 {
font-family: [CustomFontName], Arial;
}

Arial is there in case someone is using an outdated browser that doesn't support @font-face such as Internet Explorer. .otf format fonts are the most widely supported; It is supported by all browsers except Internet Explorer and Safari on the iPhone, You can use @font-face multiple times in your CSS document so you should also include .eot and .svg versions of the same font in your CSS so it is compatible with all browsers.

CSS3 Tutorial 5: Text styles

With CSS you can also define what color your text will be and its alignment. You can decorate it, so that it is all upper-case or lower-case etc.and you can indent it.

Text Color
In CSS you can use a Hex value, an RGB value or a color name to define the color. To define the color you specify the HTML element you're going to be using and then the color like so:

body {color:blue;}
h1 {color:#FF3030;}h2 {color:rgb(46, 139, 87);}

Text Alignment
The text-align property sets the horizontal alignment of text, The options available are center, left, right or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). Here's an example of some of the available options:

h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}

Text Decoration
The property text-decoration is used to set or remove decorations from text; Its most common use is to remove underlines from links, To do this you would use this code:

a {text-decoration:none;}

You can also decorate text with it:

h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}

It's not recommended to underline text that isn't a link because this can be confusing. 




Text Transformation
This property is used to specify upper and lower case letters in text. It can be used to turn all the text to upper or lower case letters or to just capitalize the first letters of each word. To do this you would use text-transform. Here's an example:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}

Text Indention
This is used to specify the indention of the first line of text. You simply put:

p {text-indent:50px;}

You can change the indent to whatever you want.

CSS3 Tutorial 4: Adding a Background

In HTML5 you use CSS to set a background color or image because the tag for this in HTML is no longer supported.

Background Color
To set a background color you simply use the property background-color in the element body like so:

body {
background-color:#000000;
}

It's good form to use Hex color codes to define the color, #000000 would make the background color Black, a list of the most commonly used colors can be found here. A demo of this example can be found here.

Background Image
There are multiple ways to set a Background Image to be repeated; It can be repeated Horizontally, Vertically, In a Set position, Or no repeat at all.

This is the basic code to include a Background image.

body{
background-image:url('img.jpg');
}

For this image to be repeated Horizontally you would add "background-repeat:repeat-x;", It would look like this:

body{
background-img:url('img.jpg');
background-repeat:repeat-x;
}

For no repeat at all the code would be "background-repeat:no-repeat;" and would look like this:

body{
background-img:url('img.jpg');
background-repeat:no-repeat;
}

To make it so it doesn't repeat at all and is fixed in one place you would add "background-position:[position];" to the above code, Here's and example with the image being displayed in the right top.
body{
background-img:url('img.jpg');
background-repeat:no-repeat;
background-position:right top;
}

CSS3 Tutorial 3: Adding style sheets to your HTML document

There are 2 ways of adding Stylesheets to your document, Internal stylesheets and External stylesheets.
The easiest and most efficient way is using external style sheets, which is making your HTML document look at a separate CSS file and using that, With Internal Stylesheets the document reads a stylesheet which is contained in the same document; External stylesheets must end in .css.

Using an external stylesheet
In your <head> section of your document simply put

<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 

You can name your stylesheet whatever you like, the stylesheet document must end in .css

Using internal stylesheets
In your <head> section put

<style type="text/css">
[your css here]
</style>

CSS3 Tutorial 2: id and class Selectors

Along with setting styles for HTML elements, you can also specify your own selectors called id and class.

id
The id selector is used to specify a style for a unique element, the id selector is defined with a #.

#paragraph
{
text-align:left;
color:yellow;
}

You can't start an id name with a number, it won't work in Firefox.

class
The class selector is used to specify the style for a group of elements. The class selector is commonly used on multiple elements, This lets you set a style for many HTML elements with the same class. The class selector is defined with a '.'
In this example, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}

As with id, don't start a class with a number, this is only supported in Internet Explorer.

CSS3 Tutorial 1: Intro to CSS3

CSS stands for Cascading Style Sheets, it was invented to solve one problem, How to display HTML elements. HTML was never intended to contain tags for formatting a document,  It was intended for basic tags like <h> and <p>, When color attributes were added to HTML 3.2 it caused a nightmare for web developers, Each page had to be edited individually every time you wanted to change the color or font, and thus CSS was born.
The way CSS saves work is the ability to use external style sheets, in laymen's terms: having your CSS document separate from you HTML document.

CSS documents are normally saved in external .css files, editing this file allows you to change all your pages at once.

CSS Syntax
A CSS rule has 2 main parts, the selector and the declaration, Here's an example:

h1 {
       color:red;
       font-size:14px;
     }

 The selector is usually the HTML element you want to style. Each declaration consists of a property and a value, The property is the style attribute you want to change and each property has a value.

To add comments to CSS code you use "/*" to open the comment and "*/" to close it.

HTML5 Example 1: Your very first website

Today you're going to put together everything you've learned so far. You can find the source code for this here. Be sure to edit this however you like, Check out a live example here. My next tutorial will be an introduction to CSS3!

HTML5 Tutorial 9: Small and h

<small>
The Small tag is very useful for small print or copyright or trademark declarations in footers. It looks like this:

This text is small

The tag is used like this:

<small>This text is small</small> 

<h>
The h tag is useful for making text larger and for headers. It's used by putting <h and then a number after it.
Here's an example:

<h1>This is h1</h1>
<h2>This is h2</h2>
<h3>This is h3</h3>
<h4>This is h4</h4>
<h5>This is h5</h5>
<h6>This is h6</h6> 

This is what it looks like:

This is h1

This is h2

This is h3

This is h4

This is h5

This is h6

HTML5 Tutorial 8: Adding Audio to your page

Another great feature included in HTML5 is the ability to directly include audio without having to use an external service, javascript or Flash. Until now there has never been a standard audio player for browsers. If you wanted to place audio on your site you either had to use one of the available players such as Windows Media Player or Quicktime player. With HTML5 audio there is just simple code to use to place audio anywhere on the page without have to have a separate audio player or 3rd party service hosting your audio.

This is how the code for Audio looks:

<audio src="http://www.archive.org/download/NyanCatlongVer/NyanCatLong6Hours.ogg" controls preload="auto" autobuffer></audio>

There are several attributes you can use along with your tag to customize your player. The attributes include autoplay, control customization, looping and pre-loading. Which means you can start your video when someone opens your page, customize what controls they see on the audio player and even loop the video so it plays continuously over and over.

So with the implementation of this tag it is going to become much easier for the average webmaster to add audio to their websites and blogs. The HTML5 video tag is also new and is similar in that it provides and across the board video player for putting videos on your site.

Right now HTML5 tags especially the audio and video tags are very experimental. Browser support while getting better is still in its infancy stages which means that as cool as these tags are implementing them into your designs now is going to leave a huge part of the PC internet users unable to see the content on your site.

One also has to wonder what the effects of HTML5 audio and video tags on web hosting. Until now most web hosts could depend on the fact that if a blog or small website wanted to use video or audio it was likely they would host it elsewhere.

With the ease of using these tags I have a feeling once they become more of a standard and are more widely used web hosts are going to see far more people hosting big audio and video files on their servers. Which could mean a rise in web hosting costs depending on how much extra storage space and bandwidth is being used.

HTML5 is coming there is no way around it but it is going to take some time before you can safely use it in your websites. Tags like the HTML5 audio tag are going to make certain elements of design so much easier, so until then we will just wait.