CSS Basics Part 1: Work with Selectors

Many of my readers asked me to write a series on CSS learning. So here is my attempt to help them. In this series I will focus on basics of CSS and how one can start learning CSS.

In this post we will learn,

  • Adding Style to document
  • CSS Selectors
  • CSS Compound Selectors
  • CSS Style Priority : Selector Specifity

Adding Style to document

You can add styles in three different ways,

image

Inline as attribute of element style can be added as below. Here we are adding colour to h1 element.

clip_image002

Problem with above approach is

  • Maintenance of style would be complex when size of document will grow.
  • You cannot reuse style

Second approach to include style is to put them as part of head section of document. You can create style in head section of HTML document as below,


<head>
 <title>Demo App</title>
 <style>
 h1
 {
 color:red;
 }
 </style>
</head>

Problem with above approach is

  • Maintenance would be complex as size of document will grow.
  • You cannot reuse style across various HTML files

Third and best approach to add styles in HTML document is using external CSS files. In this approach you put styles in a separate file with extension CSS. You add reference of external CSS file as below

image

In above approach you can reuse styles across various HTML files or documents.

CSS Selectors

You can select elements from HTML document to apply CSS on that in three ways.

image

Element Selector

If you want to apply same style to all appearance of a particular element on document then you apply style using Element Selector. In Element Selector you choose an element with its tag name and apply style on that. For example we want to apply colour red to all h1 elements appear on document.


h1
{
 color : red;
}

As you see above we are selecting element directly with the tag name. Above CSS will make colour of all h1 as red.

Class Selector

You can select an element on name of class associated with it and apply style on that. You select element on basis of class using dot (.) Usually you use class selector when you want to apply a particular style to different set of elements. For example you want to apply color blue style to various elements on document. In that case you will give a class name to all elements and then select them on basis of that class name. To understand it better let us consider below document


<h1 id="titlemessage">Education is must</h1>
 <p class="bluetext">Education in its general sense is a form of learning in
 which the knowledge, skills, and habits of a group of
 people are transferred from one generation to the next
 through teaching, training, or research. Education frequently
 takes place under the guidance of others, but may also be autodidactic
 </p>
 <h3 class="bluetext">Pledge to teach</h3>

As you notice that we have given same class name bluetext to p and h3 element on HTML document. Next in CSS we will select these element using dot (.)


.bluetext
{
 color:blue;
}

Above using class selector we selected class bluetext and applied style in that. So all elements with class name set as bluetext would have blue color.

Bottom line is you select an element on its class using dot (.) in CSS.

Id Selector

You can select an element on its id and apply style on that. You select element on basis of its id using hash(#) on CSS. So let us consider again above HTML we used in class selector. H1 element has id. If you want to apply color red using id you can do that as follows


#titlemessage
{
 color : gray
}

Compound Selector

You can select an element from document using more than one selector approach. Let us consider scenario that “You need apply a particular style to all h1 with id set as temp”. In this case you will use first element selector to select all h1 then id selector to filter particular h1. This approach of selecting element is known as Compound Selector.


h1#titlemessage
{
 color : red
}

Above compound selector will apply color red style to h1 element with id titlemessage on the document.

CSS Style Priority

Let us say you have applied CSS on a particular element at all three levels like

  • Inline in element
  • In head section of document
  • In external CSS file

Then which CSS will get applied to element. In above said scenario style applied at inline on element will get applied.

image

So always style applied as inline has highest priority. However there is way you can override this. By marking a style as important


#titlemessage
{
 color : red !important
}

 

As you see above we have marked color style as important so it will take highest priority while applying styles on elements.

Position based Priority

Now there could be one more scenario that you have style set more than once on the same document. In that scenario position based priority come to action.


#titlemessage
{
 color : red
}

#titlemessage
{
 color : blue
}

In above scenario style color blue will be applied because style which is defined as last in document has more priority.

Now come to the end of first post of CSS basic series. I hope you find this post useful to get started with CSS. Thanks for reading.

Understanding click binding in Knockout.js

Click Binding adds click event to element on View. You can do click binding with any function in ViewModel or you can bind to any normal function.

clip_image001

Let us try to understand it with a very simple ViewModel. We have a ViewModel as below

 var viewModel =
 {
 display: function ()
 {
 console.log("display");
 }
 }

As you see there is one function as property of ViewModel and that can be click bind on view as below,


<button data-bind="click:display" >display</button>

Let us consider one more example and in this we will update value of other observable on click of element on View. We have ViewModel as below,


var viewModel =
 {
 count : ko.observable(0) ,
 display: function ()
 {
 this.count( this.count() + 1);
 }
 }

On View we are doing click binding and text binding as below


<button data-bind="click:display" >display</button> <br/>
 Number of clicks <span data-bind="text:count" ></span>

Sometime you may have to pass current item in click binding. Assume a requirement that you have done foreach binding on element with observable array. Now on click of a particular item, you need to pass that item in ViewModel function to work with that. That can be solved as below. As you see in below ViewModel,

  • There is an observable array. This will be bind to ul or tr element on View
  • There is a function. It takes input which will be used to delete item from observable array.

function viewModel()
 {
 var self = this ;
 self.subject= ko.observableArray(["Phy", "Che", "Bio"]),
 self.removeSubject= function (item)
 {

 self.subject.remove(item);
 }
 }


ko.applyBindings(new viewModel());

On the View we need to do click binding and pass current item to function on which click binding is getting performed.


<ul data-bind="foreach: subject">
 <li>
 <span data-bind="text: $data"></span>
 <button data-bind="click: $parent.removeSubject">Remove</button>
 </li>
</ul>


If you notice we are passing current item using current binding context. So to pass current we are using parent.

In some scenario you will have to pass event object. Event object can be passed as given below,


function viewModel()
 {
 var self = this ;
 self.subject= ko.observableArray(["Phy", "Che", "Bio"]),
 self.removeSubject= function (data,event)
 {
 if (event.shiftKey) {
 self.subject.remove(data);
 }
 }
 }


On View binding can be done as below


<ul data-bind="foreach: subject">
 <li>
 <span data-bind="text: $data"></span>
 <button data-bind="click: $parent.removeSubject($data,event)">Remove</button>
 </li>
</ul>

&nbsp;

Now an item would be deleted on pressing shift key . Understanding of click binding is very useful to create apps using KO. I hope you find this post useful. Thanks for reading.