Thursday, August 27, 2015

Read and Parse JSON String using ParseJSON Method with jQuery

Read and Parse JSON String using ParseJSON Method with jQuery
Introduction:
This article explains how to read and Parse JSON string in jQuery using ParseJSON method in JavaScript, asp.net and get string value from JSON string in jQuery.

To implement this functionality we need to write the code like as shown below

HTML Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Read and Parse Data using ParseJSON method</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function() {
var name = '';
var jsonstr = '[{"UserName":"Ashwani","UserID":"1"},{"UserName":"VepshTech","UserID":"2"}]';
var obj = $.parseJSON(jsonstr);
$.each(obj, function() {
name += this['UserName'] + "<br/>";
});
$('#divjson').html(name); ;
})
</script>
</head>
<body>
<div id="divjson">
</div>
</body>
</html>

In above code we used parseJSON method to read formatted JSON string

Output:

Read and Parse JSON String using ParseJSON Method with jQuery


Convert JSON String to JSON Object with JavaScript

Introduction:
This article explains
This article explains how to convert JSON string to JSON object in JavaScript. To convert JSON string to JSON object in JavaScript we need to write the code as shown below.




Code-

 var str = '[{"title":"Chennai","lat":12.897400},
{"title":"Hyderabad","lat":17.266700},{"title":"Bangalore","lat":12.897400}]';
var obj=JSON.parse(str);

By using above code we can convert JSON string to JSON object in JavaScript

jQuery Convert JSON Data to HTML Table using jQuery Row Append Properties

Introduction:
This article explains how to convert JSON data to html table using jQuery or convert JSON data into html table using jQuery or jQuery convert JSON data into html table or jQuery create html table using JSON data.

To convert JSON data to html table using jQuery we need to write the code like as shown below


HTML Code-

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>convert json data to html table using jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(function () {
var myList = [{ "Name": "Ashwani", "Education": "B.Tech", "Location": "Lucknow" },
{ "Name": "Vin", "Education": "BMSC", "Location": "Guntur" },
{ "Name": "Ash", "Education": "Msc", "Location": "Nagpur" },
{ "Name": "Tom", "Education": "MBBS", "Location": "Nagpur" },
{ "Name": "Jack", "Education": "B.Tech", "Location": "Kakinada" },
{ "Name": "Mack", "Education": "MD", "Location": "Vizag" },
{ "Name": "Anu", "Education": "B.Tech", "Location": "Delhi" }]
Bindhtmltable(myList);
})
function Bindhtmltable(list) {
var cols = addheadercols(list);
for (var i = 0; i < list.length; i++) {
var row = $('<tr/>');
for (var colIndex = 0; colIndex < cols.length; colIndex++) {
var cellValue = list[i][cols[colIndex]];
if (cellValue == null) { cellValue = ""; }
row.append($('<td/>').html(cellValue));
}
$("#htmltable").append(row);
}
}

function addheadercols(list) {
var colset = [];
var headerTr = $('<tr/>');
for (var i = 0; i < list.length; i++) {
var rows = list[i];
for (var key in rows) {
if ($.inArray(key, colset) == -1) {
colset.push(key);
headerTr.append($('<th/>').html(key));
}
}
}
$("#htmltable").append(headerTr);
return colset;
}
</script>
</head>
<body>
<form id="form1" >
<div>
<table id="htmltable" border="1" cellpadding="5" style="border-collapse: collapse;">
</table>
</div>
</form>
</body>
</html>

Output-
Check below table it’s build by using above JSON data

Filter JSON Object to Show / Hide / Update Elements based on Conditions in Angularjs

Introduction:
This article explains how to use AngularJS to filter JSON object to show or hide or update elements with example or AngularJS filter json object in controller with example. By using filter option in ng-repeat we can enable/disable or show/hide required elements from JSON object.

To show or hide values based on JSON object in AngularJS we need to write the code like as shown below

 $scope.checkvalues = function (user) {
return user.id != "5";
}

If you want to check it in complete example you need to write the code like as shown below

HTML Code-

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>angularjs filter json object to show/hide or update elements</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js">
</script>
<script type="text/javascript">
var app = angular.module('sampleapp', [])
app.controller('samplecontrol', function ($scope) {
$scope.sample = [{
id: '1',
name: 'Vepsh Tecck'
}, {
id: '2',
name: 'India'
}, {
id: '3',
name: 'UK'
}, {
id: '4',
name: 'USA'
}, {
id: '5',
name: 'China'
}, {
id: '6',
name: 'Rusia'
}];

$scope.checkvalues = function (user) {
return user.id != "5";
}
});
</script>
</head>
<body data-ng-app="sampleapp" data-ng-controller="samplecontrol">
<form id="form1">
<div ng-repeat="user in sample | filter:checkvalues">
{{user.name}} <br/>
</div>
</form>
</body>
</html>

Output-

If you check below output it will display all values except id = 5

How to change maxJsonLength property in web.config

How to change maxJsonLength property in web.config
Introduction:
This article explains how to solve the problem of “Error during serialization or deserialization using the JSON JavaScriptSerializer. The length of the string exceeds the value set on the maxJsonLength property.” in asp.net using c#.

Generally this problem occur whenever our json result set length exceeds default json MaxJsonLength property value. By default MaxJsonLength property will allow 102400 (100k) in case our string exceeding this length we will get JavaScriptSerializer error.

To solve this problem we need to set MaxJsonLength property value in web.config file like as shown below

<configuration>
<system.web.extensions>
<scripting>
<webServices>
<jsonSerialization maxJsonLength="3000000"/>
</webServices>
</scripting>
</system.web.extensions>
</configuration>

Once we add above code snippet in web.config file automatically our problem will get solve.

Wednesday, August 26, 2015

CSS Font Properties with HTML

Font Size
In CSS, Font size is given using property "Font-size". We can give value of Font-size using 4 different units.
  • Pixels (px)
  • Em(em)
  • Points (pt)
  • percentage (%)
Others units are pc (picas), cm (centimetres), mm (millimetres) and in (inches).
For a p tag,
16px= 1em=100%=12pt

HTML Code-

<p style="font-size:16px"> Font size 16px </p>

<p style="font-size:1em"> Font size 1em </p>

<p style="font-size:12pt"> Font size 12pt </p>

<p style="font-size:100%"> Font size 100% </p>

Output-
Font size 16px
Font size 1em
Font size 12pt
Font size 100%

Font Weight
In CSS, Font weight is used to create a text Bold. Various value of font-weight are
  • Bold
  • Bolder
  • Normal
  • Value between 100-900
Basiclly we use only Bold and Normal as other browsers does'nt make any difference between and understand bold and normal.

HTML Code-

<p style="font-weight:bold"> Font weight bold </p>

<p style="font-weight:bolder"> Font weight bolder  </p>

<p style="font-weight:normal"> Font weight normal </p>

<p style="font-weight:100"> Font weight 100 </p>

<p style="font-weight:500"> Font weight 500 </p>

<p style="font-weight:900"> Font weight 900 </p>

Output-
Font weight bold
Font weight bolder
Font weight normal
Font weight 100
Font weight 500
Font weight 900

Font Style
In CSS, Font style is used to create a text italic. Various value of font-style are
  • Italic
  • Normal
HTML Code-

<p style="font-style:normal"> Font style normal </p>

<p style="font-style:italic"> Font style italic </p>

Output-
Font style normal
Font style italic

Font Family
In CSS, Font family specify the font we are using. It can be
  • Arial
  • helvetica
  • Times new roman
  • Georgia
  • Serif
We can also write two different font together. This tell the browser that if one font is unavailable, use another one.

HTML Code-

<p style="font-family:arial"> Font family Arial  </p>

<p style="font-family:helvetica"> Font family Helvetica  </p>

<p style="font-family:"times new roman""> Font family Roman </p>

<p style="font-family:georgia"> Font family Georgia </p>

<p style="font-family:arial, helvetica "> Font family Arial and helvetica </p>

Output-
Font family Arial
Font family Helvetica
Font family Roman
Font family Georgia
Font family Arial and helvetica

HTML & CSS Color Code

CSS HTML Color
In CSS, font color is given by using css "color" Property.
The value of color is written in these three forms.
  • Color Name
  • Hexadecimal Color code
  • RGB Colors
Color Name
CSS include total 16,777,216 ( 1 Crore 67 Lakhs ) colours. However 17 colors are known by their by name. These colors are
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Transparent is also a valid value. 

HTML Code-

<p style="color:red"> Color Red </p>
<p style="color:blue"> Color Blue </p>
<p style="color:green"> Color Green </p>
<p style="color:yellow"> Color Yellow </p> 

Output-
Color Red
Color Blue
Color Green
Color Yellow

Hexadecimal Color Code
We can also write color's value using HEXADECIMAL COLOR CODES.
Hexadecimal is basicly a 16 base number system where we use 16 different value and combine them to write a color.
In Hexadecimal color coding, our use: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
Minimun value is 0, and maximum is f.
Way to write a color in Hexadecimal Color Code: #------;
There are total six digits. First two represent red, next two represents green and last two blue.
Black #000000;
White #ffffff;
Red #ff0000;
Green #00ff00;
Blue #0000ff;
Rest all color are mixture of above values;

HTML Code-

<p style="color:#ff0000"> Color Red </p>
<p style="color:#0000ff"> Color Blue </p>
<p style="color:#00ff00"> Color Green </p>
<p style="color:#000000"> Color Black </p>

Output-
Color Red
Color Blue
Color Green
Color Black

RGB Color Code
We can also write a color value using RGB( Red, Green, Blue) color value.
In RGB, we write a color using its value which lies in-between 0 and 255.
0 is minimum value and 255 is maximum.

HTML Code-

<p style="color:rgb(255,0,0)"> Color Red </p>
<p style="color:rgb(0,255,0)"> Color Green </p>
<p style="color:rgb(0,0,255)"> Color Blue </p>

Output-
Color Red
Color Green
Color Blue

Types of Selectors in CSS

Types of Selectors in CSS
There are Five major selectors in CSS
  • Tag Selector
  • Id Selector
  • Class Selector
  • Grouping
  • Nesting
Tag Selectors in CSS

HTML Code-

<html> 
<head> 
<title>Title of Webpage</title> 
<style> h3{ color:red} p{ color:blue; text-align:center} </style> 
</head> 
<body> 
<h3>This heading will be red.</h3> 
<p>This text will be blue and center align.</p> 
</body> </html>

ID Selectors in CSS

ID Selector is used to call an HTML Element with id Attribute.
Id is always unique on a web page. We can not gives same ID to two different HTML Elements.
Id is basically an Attribute used in Opening or Start Tag. Inside double Quotation, the value of ID is given.
Id is always started with HASH ( #), than id value.

HTML Code-

<html> 
<head> 
<title>Title of Webpage</title> 
<style> 
#head1{ color:green} #para{ color:red; background:yellow} 
</style> 
</head> 
<body> 
<h3 id="head1">This heading will be green.</h3> 
<p id="para>This text will be red and background yellow.</p> 
</body> </html>

Class Selectors in CSS

Class Selector is used to call an HTML Element with class Attribute.
Class represesnt a group. We can gives same Class to two or more different HTML Elements.
Class is basically an Attribute used in Opening or Start Tag. Inside double Quotation, the value of Class is given.
Class is always started with DOT ( .), than class value.

HTML Code-

<html> 
<head> 
<title>Title of Webpage</title> 
<style> 
.head{ color:red} .para{ color:white; background:blue} 
</style> 
</head> 
<body> 
<h5 class="head">This heading will be red.</h5> 
<h3 class="head">This heading will be red too.</h3> 
<p class="para">This text will be white and background blue.</p> 
</body> 
</html>

Grouping in CSS

Grouping is used to call a group of HTML Element.
Unlike Class selector, we dont need to write class attribute with particular value.
We can group multiple tags, IDs and Classes. We use COMMA (,) to separate Selectors in grouping.

HTML Code-

<html> 
<head> 
<title>Title of Webpage</title> 
<style> 
h5,h3,p{ color:red; text-align:center; } 
</style> 
</head> 
<body> 
<h5>This heading will be red.</h5> 
<h3>This heading will be red too.</h3> 
<p class="para">This para will be red too.</p>
</body> 
</html>

Nesting in CSS

Nesting is used to call a particular child of parent Element.
If we are calling a P tag, all Para Tags will be selected..
We can Nest a particular tag of parent using nesting.
We use single space bar to relate child of particular tag

HTML Code-

<html> 
<head> 
<title>Title of Webpage</title> 
<style> 
p{ color:red} .header p{ color:white; background:gray} /*This is Nesting */ 
</style> 
</head> 
<body> 
<div class="header"> 
<p>This para is inside div.
</p> </div> 
<p>This para is outside div.</p> 
</body> 
</html>

Tuesday, August 25, 2015

IEnumerable with C#

Introduction:
IEnumerable. A List, array, and query can be looped over. This makes sense. All these constructs implement methods from IEnumerable.

This article explains about the IEnumerable interface. We will discuss how IEnumerable interface facilitate the use of foreach statement to iterate through a set of data. We will then look how to implement our own collections that implement IEnumerable interface. The use of yield keyword and Enumerating generic collections will also be discussed in this article.

An interface, IEnumerable specifies that the underlying type implements GetEnumerator. It enables foreach. On IEnumerable things, extensions from System.Linq are often applied.

An IEnumerable generic interface is returned from query expressions. A query expression that selects ints will be of type IEnumerable<int>.

Foreach: On an IEnumerable variable, we can also use the foreach-loop. This loop iterates with simple syntax.
We can apply many transformations to an IEnumerable instance, including the ToList and ToArray conversions.

Example:-

using System;
using System.Collections.Generic;
using System.Linq;

class Program
{
    static void Main()
    {
 IEnumerable<int> result = from value in Enumerable.Range(0, 2)
      select value;

 // Loop.
 foreach (int value in result)
 {
     Console.WriteLine(value);
 }

 // We can use extension methods on IEnumerable<int>
 double average = result.Average();

 // Extension methods can convert IEnumerable<int>
 List<int> list = result.ToList();
 int[] array = result.ToArray();
    }
}

Output:
0
1

Bind dropdownlist in asp.net using jquery with JSON

Introduction:
This article explains how to bind dropdownlist using JQuery ajax or JSON in asp.net. To implement this concept first design table in database and give name as Country as shown below.
Bind dropdownlist in asp.net using jquery with JSON
After completion table design enter some of Country details in database to work for our sample and write the following code in your aspx page

HTML Code-

 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Bind Dropdownlist with JQuery in asp.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/
jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/BindDatatoDropdown",
data: "{}",
dataType: "json",
success: function(data) {
$.each(data.d, function(key, value) {
$("#ddlCountry").append($("<option></option>").val(value.CountryId).html(value.CountryName));
});
},
error: function(result) {
alert("Error");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlCountry" runat="server" />
</div>
</form>
</body>
</html>

C# Code-

protected void Page_Load(object sender, EventArgs e)
{

}
[WebMethod]
public static CountryDetails[] BindDatatoDropdown()
{
DataTable dt = new DataTable();
List<CountryDetails> details = new List<CountryDetails>();

using (SqlConnection con = new SqlConnection("Data Source=Vepsh;Initial Catalog=SampleDB;
Integrated Security=true"))
{
using (SqlCommand cmd = new SqlCommand("SELECT CountryID,CountryName FROM Country", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dtrow in dt.Rows)
{
CountryDetails country = new CountryDetails();
country.CountryId = Convert.ToInt32(dtrow["CountryId"].ToString());
country.CountryName = dtrow["CountryName"].ToString();
details.Add(country);
}
}
}
return details.ToArray();
}
public class CountryDetails
{
public int CountryId { get; set; }
public string CountryName { get; set; }
}


Top Useful CSS Tricks and Code

Top Useful CSS Tricks and Code
Introduction:
This article explains collection of such CSS codes, that can give you features like turn an element sticky, give you dashed line underlining capabilities, flow the text of your page in a special shape, or achieve parallax effect. Some of them are widely supported while others are on their way for full support by all browsers.






1. Numbering headings and subheadings
Say you got a set of headings and subheadings in your document and you are numbering them manually or via a script. Instead, you can use CSS counters to do this.  And since it is from a CSS2 spec, you can bet that it is supported by all browsers, except perhaps IE 6.

HTML Code-

<div id="page">
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
  <h2>Subheading Title</h2>
  <h1>Heading Title</h1>
</div>

CSS Code-

#page {
  counter-reset: heading;
}

h1:before {
  content: counter(heading)") ";
  counter-increment: heading;
}

h1 {
  counter-reset: subheading;
}

h2:before {
  content: counter(heading)"." counter(subheading)") ";
  counter-increment: subheading;
}
body{
  font-family: courier new;
}

2. Spice Up Plain Underlines
Sometimes we want to underline with a nice dotted or dashed line instead of a solid one. Since there is no option for that, we settle for border-bottom. But border-bottom is not a good solution if the text you are underlining wraps.

CSS3 specified not one but three new properties for text decoration text-decoration-color, text-decoration-line, and text-decoration-style which can be shorthanded into the good old text-decoration.

You can use those to style underline, overline, even make text blink, and more. As of April 2015 only Firefox supports this property, but you can enable "experimental web platform features" to use it on Chrome.

HTML Code-

<a href="#">sample link</a>
<span class="sample">sample text</span>
<br/><br/>
<span class="through">to be cut text</span>
<span class="wavy">wavy line</span>

CSS Code-

a {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: orange;
}

.sample {
  text-decoration: underline overline dotted green;
}

.through {
  text-decoration: line-through;
  color: red;
}

3. Quoting A Quote
First of all, there is no need to bother with typing the correct curly quotes for short quotations because there is HTML for that: the <q> tag that indicates inline quotations.

The <q> tag also takes care of quoting the inner quotes with single quotes. So, where is the "there is ‘CSS’ for that" moment in this?

Lets say you don’t want the default double quotes or you have more than one level of nested quotes, you can define your quote preferences for the quote element with CSS by using the CSS2 quotes property.

HTML Code-

<p>
  <q>By your <q>powers</q> combined <q>I am <q>Captain Planet</q></q>
  </q>
</p>

CSS Code-

 p {
   quotes: "「 " " 」" '“' '”' "‘" "’"
 }

body{
  font-family: courier new;
  font-weight: bold;
  font-size: 30px;
  text-align: center;
}

4. Managing Unruly Tables
You may have come across a big table with varying content size per cell which refuses to remain within a width you have specified, no matter what you try. Tame that table with the table-layout property.

To be specific, the fix is in the table-layout: fixed; value. When you assign a fixed layout for the table, the table and the cell width are determined by the width of the table or of the first row of cells (which can be defined by the user) and not by the content. This is supported by all browsers.

HTML Code-

<table>
  <tr>
    <td>Lorem ipsum dolor sit amet, has ea timeam eligendi, in congue 
   oportere ocurreret duo. No fierent urbanitas vituperatoribus usu, 
   accusamus maiestatis te mea.Eam at delenit adipiscing, viris contentiones ex his.
    Alii eros ludus no nec. Ius cu fabellasdeseruisse interpretaris, tation 
     democritum has ea.</td>
    <td>elius verear vix</td>
    <td>Brute molestiae ea cum. Placerat intellegebat cum in, no tamquam 
   accusam mea, melius verear vix at. No elaboraret eloquentiam concludaturque vix.
    Accusamus theophrastus usu eu. An ius viris senserit.</td>
  </tr>
</table>

CSS Code-

table {
  width: 400px;
  table-layout: fixed;
  border-collapse: collapse;
  margin: auto;
}
td{
  border: 1px solid black;
}
body{
  font-family: courier new;
}

5. Make It Sticky
Sticky elements are elements on a page that will not be scrolled out of view. In other words it sticks to a visible area (viewport or scrolling box). You can create this with CSS using position: sticky;.

They act like relatively postioned elements before any scrolling and later like fixed elements once a scrolling threshold is reached. For now, only Firefox supports it.

HTML Code-

<div id="extra"></div>
<br />
<div id="wrapper">
  <div id="sticky">
    sticky
  </div>
</div>

CSS Code-

#sticky {
  position: sticky;
  background: yellow;
  width: 100px;
  height: 100px;
  border: 1px solid red;  
  top: 70px;
  left: 10px;
}

#wrapper {
  border: 1px solid blue;
  width: 75%;
  margin: auto;
  height: 400px;
  background: url("your image URL");
}

#extra{
  background: green;
  width: 75%;
  margin: auto;
  height: 100px;
}

body {
  height: 1000px;
}

6. Get Your Text In Shape
Do you want the text on your page to nicely curve over some image you displayed beside it? You can try CSS Shapes. To implement CSS shapes, we can make use of three properties shape-outside, shape-margin and shape-image-threshold. As of April, 2015 CSS Shapes is supported by webkit browsers.

HTML Code-


<div>
<img id="" src="http://1.bp.blogspot.com/-O03MStX2JJo/VZzfpnoqFMI/AAAAAAAAAis/
aC4SLZu74zY/s1600/11694915_1426459737682156_4238755009304555395_n1.png" alt="Rabbit"/>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum. 

</p>
</div>

CSS Code-

img {
  width: 300px;
  height: 300px;
  float: left;
  shape-outside: circle(50%);
}

7. Mandatory Fields
If you got a form there is a high chance that some fields in it are required while others aren’t. You will need to let the users know which is which. The CSS for this is :required :optional pseudo classes. All modern browsers support them.

HTML Code-

<form>
  <label for="name">Name:&nbsp;&nbsp;&nbsp;&nbsp;</label>
  <input required id="name" type="text" />
  <br />
  <br />
  <label for="surname">Surname:</label>
  <input id="surname" type="text" />
</form>

CSS Code-

 :required {
   border: 1px solid pink;
 }
 
 :optional {
   border: 1px solid skyblue;
 }

8. Picky With Colors
If you don’t like a certain color, like blue, we can color the selected area with some other color and the ::selection pseudo element is the CSS for that. This is supported by all modern browsers.

HTML Code-

<p>Lorem ipsum dolor sit amet, has ea timeam eligendi, in congue oportere 
ocurreret duo. No fierent urbanitas vituperatoribus usu, accusamus maiestatis
 te mea. Eam at delenit adipiscing, viris contentiones ex his. Alii eros ludus
 no nec. Ius cu fabellas deseruisse interpretaris, tation democritum has ea. 
  Brute molestiae ea cum. Placerat intellegebat cum in, no tamquam accusam mea, 
melius verear vix at. No elaboraret eloquentiam concludaturque vix. Accusamus 
theophrastus usu eu. An ius viris senserit.     Brute molestiae ea cum. Placerat
 intellegebat cum in, no tamquam accusam mea, melius verear vix at. No elaboraret
 eloquentiam concludaturque vix. Accusamus theophrastus usu eu. An ius viris senserit.
</p>

CSS  Code-

p::selection {
  background: red;
  color: yellow;
}

p::-moz-selection {
  background: orange;
  color: yellow;
}

9. Did I Check It?
In a situation where a checkbox has been checked, it would be nice to have another indication apart form the tiny checkmark inside the default checkbox to denote that the item has been checked.

There is CSS for that which exploits the bond between the immediate siblings, two elements side by side. CSS has adjacent sibling selector denoted by the plus + sign,and we can use it to to target the label beside the checkbox. But what about targetting the checked checkbox first? There is the :checked pseudo class for that.

HTML Code-

<input id="mycheck" type="checkbox" />
<label for="mycheck">Check box label here</label>
<br />
<input id="mycheck" type="checkbox" checked/>
<label for="mycheck">Check box label here</label>
<br />
<input id="mycheck" type="checkbox" />
<label for="mycheck">Check box label here</label>

CSS Code-

input:checked + label{
  background: yellow;  
}

10. Like A Storybook
Then, wouldn’t it be nice if the first "O" in the "Once upon a time" looks pretty? We can make it look pretty, after all there is CSS for that. Here is where ::first-letter pseudo element comes to the rescue. It targets the first letter of the first line of the targeted element.

HTML Code-

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>


<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>


<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>

CSS Code-

p{
  font-family: "bookman old style"
}
p:first-child::first-letter{
  font-family: "papyrus";
  font-size: 25px;
  font-weight: bold;
}

11. Would You Like To Know More?
An element may have class X or data Y or some other value to an attribute. If we ever need to display such an attribute value of an element near it, we can use the content:attr(X). It retrieves the value of attribute X of the element, then we can show it beside the element.

HTML Code-

<fieldset>
  <legend>Select a fruit</legend>
  <input type="radio" name="animal" value="Mango" />
  <br />
  <input type="radio" name="animal" value="Apple" />
  <br />
  <input type="radio" name="animal" value="Grapes" />
  <br />
</fieldset>

CSS Code-

input::after {
  content: "\00a0\00a0" attr(value);
}
body,input{
  font-family: courier new;
  font-weight: bold;
  font-size: 16pt;
}

12. A Little Bit More To The Left
Centering elements for CSS beginners is quite a feat. Different elements require different set of CSS properties to center them. We will look into one example out of many that is available in the world wide web, so that you can remember again that there is CSS to center things.

HTML Code-

<div id="wrapper"> 
<div id="center"></div>
</div>

CSS Code-

#wrapper {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid black;
  height: 150px;
  width: 600px;
}

#center {
  margin: auto;
  background: red;
  height: 20px;
  width: 20px;
}

13. Disclose File Format Of Links
Ever seen a small image near a link indicating what that link is? A PDF? or a DOC? Yes, there is CSS to achieve that. The content:url() is what we will use to display the image behind the links.

HTML Code-

<a href="test.pdf">ebook to download</a>

CSS Code-

[href$=".pdf"]::after{
content: " " url("https://cdn3.iconfinder.com/data/icons/document-icons-2/30/647716-pdf-24.png");
}

body{
  font-size: 24pt;
}

14. Trigger Parallax Effect
The parallax effect is an effect used to describe the seemingly slow movement of background relative to the foreground. This effect is popular in websites which implement parallax scrolling. There are different ways to implement it, the example below works in Firefox with background-attachment: fixed;.

HTML Code-

<div id="section">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into 
electronic typesetting, remaining essentially unchanged. It was popularised in 
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
  </p>
</div>

CSS Code-

p {
  width: 100%;
  margin: auto;
  font-size: 50px;
  transform: scale(.5);
  font-family: courier new;
  font-weght: bold;
}

div {
  background-image: url("http://www.hdwallpapers.net/images/
  triangular-grads-wallpaper-for-1600x1200-72-701.jpg");
  background-attachment: fixed;
  transform: scale(1.25);  
}

body {
  height: 100%;
  overflow: scroll;
}

15. The Power Of CSS Animations
Probably not a huge "there is CSS for that" moment, because you all are most probably aware of CSS animations by now. But a little reminder is of no harm. There are many uses for CSS animations but here is one for a simple coloring exercise.

HTML Code-

<div>
</div>

CSS Code-

@keyframes blink {
  0% {
    background: violet;
  }
  14.3% {
    background: indigo;
  }
  28.6% {
    background: blue;
  }
  42.9% {
    background: green;
  }
  57.2% {
    background: yellow;
  }
  71.5% {
    background: orange;
  }
  85.8% {
    background: red;
  }
  100% {
    background: violet;
  }
}

@-webkit-keyframes blink {
  0% {
    background: violet;
  }
  14.3% {
    background: indigo;
  }
  28.6% {
    background: blue;
  }
  42.9% {
    background: green;
  }
  57.2% {
    background: yellow;
  }
  71.5% {
    background: orange;
  }
  85.8% {
    background: red;
  }
  100% {
    background: violet;
  }
}

div {
  height: 300px;
  width: 300px;
  border: 1px solid black;
  animation: blink 20s linear infinite;
  -webkit-animation: blink 20s linear infinite;
}