The Open / Closed principle states

“Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification” – Wikipedia

Open to extension means that we should be able to add new behavior or features to a class and Closed for modification means that while making these changes we should not need to modify the binaries.

If we want to add new behavior that we should not need to change the existing classes or functions. We should just be able to add new classes and functions to achieve this. A simple example is that we do not need to rewire the motherboard to plug in a USB.

OpenClosePluginUSB

Now you might be thinking how can we achieve extension without making any modifications to a binary?

The answer lies in abstraction.  Once we start relying on abstractions then we many ways to apply the open close principle. In .NET we can achieve this abstraction through Interfaces and Abstract classes.

When we want to add new behavior, then we need to write new functions and new classes and this helps a single class in focus on one thing and we end up with small, easier to maintain classes. Also when we write new classes then none of the existing code is dependent on this new code and hence unlikely to introduce bug.

We can add seams to the applications which allows us to create the demarcation between different layers.

 

Approaches for achieving Open/Closed principle

Parameters

We could pass some information as parameters which could help us avoid the modifications. For example we create a simple program to clean up temporary files on my computer at 9AM. Now I share this code on my blog and people start using it but soon people start asking for a simple modification of allowing the users to decide the time for the cleanup to run. Now if I would have allowed this time to be a user inputted parameter then my class and function would have not needed any modifications.

Inheritance

Inheritance is another way to achieve the open close behavior. In heritance we allow the child classes to change and extend the behavior without making any changes to the parent classes.

Composition

To achieve Composition we could use the Strategy pattern. The strategy pattern allows us to follow the plugin model where the class doing the work gets injected into the class that needs that behavior. In this case we have a level of abstraction between the calling code and called code. In this type of approach the Implementation class used Inheritance since that will inherit from the base for some implementation and the client class follows composition since it exposes itself for other classes to pass into itself.

Example

Let us take the example of a class that calculates the area of a rectangle

public class AreaCalculator
{
    public double Area(Rectangle[] shapes)
    {
        return shapes.Sum(shape => shape.Width*shape.Height);
    }
}

 

To get the area of a rectangle we will pass the object of the Rectangle class and get the area back.

public class Rectangle
{
    public double Width { get; set; }
    public double Height { get; set; }
}

Now we would like to extend the AreaCalculator to calculate the area of a circle as well.

public class Circle
{
    public double Radius { get; set; }
}

So we will change the AreaCalculator to something like below. So depending on the shape we can calculate the area of the shape.

public class AreaCalculator
{
    public double Area(object[] shapes)
    {
        double area = 0;
        foreach (var shape in shapes)
        {
            if (shape is Rectangle)
            {
                var rectangle = (Rectangle)shape;
                area += rectangle.Width * rectangle.Height;
            }
            else if (shape is Circle)
            {
                var circle = (Circle)shape;
                area += circle.Radius * circle.Radius * Math.PI;
            }
        }
    return area;
    }
}

However if tomorrow we want to extend the AreaCalculator class to include another shape then we will have to modify the class again.

 

Now let us try to implement the AreaCalculator class following the Open / Closed principle. Let’s start by creating an abstraction for shape. We will create a class named shape that exposes a method Area.

public abstract class Shape
{
    public abstract double Area();
}

Now whenever we want to create a Shape we will inherit from this abstract class. Let us now create Rectangle and Circle classes inheriting from Shape. We will provide individual implementation of Area and also add the properties as applicable for each shape.

public class Rectangle : Shape
{
    public double Width { get; set; }
    public double Height { get; set; }
    public override double Area()
    {
        return Width * Height;
    }
}

public class Circle : Shape
{
    public double Radius { get; set; }
    public override double Area()
    {
        return Radius * Radius * Math.PI;
    }
}

Since each shape has its own implementation of Area so our AreaCalculator becomes much simpler and robust.

public class AreaCalculator
{
    public double Area(Shape[] shapes)
    {
        return shapes.Sum(shape => shape.Area());
    }
}

 

And since the new classes bring in their own implementations we do not need to modify the existing functionality because of the new behaviors that we add.

 

Find the complete source code for this post at googledrive or skydrive.

Any questions comments and feedback are most welcome.

 

 

 

Hey guys,

In this series i will talk about the SOLID Design Principles. We will discuss one principle in each post.

In this post we will talk about the S which is Single Responsibility Principle (SRP).

 

Single Responsibility Principle (SRP)

 

There should never be more than one reason to change a class. Robert C. Martin

We can think of responsibility of a class as a reason for change in the context of SRP and we want a class to have only one of that. This will be really important when we have an issue because we will know exactly we need to look.

solid.srp

Say we have a modem class in our application and it does 4 operations

 

Without SRP

Without SRP

interface IModem
{
    bool Dial(string phoneNumber);
    bool Hangup();
    bool SendMsg(char msg);
    char RecieveMsg();
}

 

It will make a lot of sense to divide these operations into 2 interfaces that the Modem class implements. We have divided responsibility so that each class has single reason to be modified.

 

With SRP

With SRP

This does not mean that we should start creating different classes for each of the feature or method that we are implementing. There can be different levels of segregation that we can have depending on our application.

For example – In a huge application we might want to create a math class for doing all the math related operations but in a small application we might have different classes for simple operations (add, sub, mul, div) and different class for trigonometric operations (sin, tan, cos)

Cohesion – It is a measure of how much responsibility, data and methods of a class / module are related. It can be thought of as the clarity with which the role of a class is defined within the system. We should always aim for high cohesion.

We can identify cohesion by comparing the class name and the responsibility of the class. If the class is doing something other than what its name specifies than we do not have the desired level of cohesion.

Put your code where everyone would expect to find it.

Coupling – It is the degree to which the different modules or classes are interdependent or relies on each other. We should always aim for low coupling.

The more responsibility a class has more is the likelihood of changes in the class, more the changes more is the likelihood of errors because the responsibilities within a class tend to couple with each tightly.

Interface Segregation Principle (ISP) helps us achieve the Single Responsibility Principle (SRP).

 

Any questions, comments or feedback is welcome.

 

In this post we will have a look at layout and navigation options available in CSS3.

Layout

There are majorly two approaches for designing the layout of the page: fixed layout and fluid layout.

Fixed Layout – This type of layout is easier to implement as in this layout the size of the content does not changes with the size of the browser. So no matter what our page occupies the same size at any point of time irrespective of the resolution or size of the browser.

Fluid Layout – This type of layout requires more work as whenever the size of the browser changes then our page has to respond to changes by adjusting the page layout and size.

How to design the layout of our page

  • Identify your content
  • Add the content to the web page
  • Arrange the content inside the boxes
  • Use float to make the user interface fluid

Currently our page looks like the image shown above. Let us redesign our page into column based layout and to that we will move the About CSS3 section to a column in the right.

* One important thing to remember is that if want some content in a column then it should be defined before the main content.

So let us take the aside which has About CSS3 content and move it above the article itself. The next step is to assign a class .sidePanel to the aside.

<aside>

Now we add another section just below the previous one.

<section id="header-section">

<h1>Advanced concepts in CSS</h1>

<div>

<span>Posted on 25th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn advanced concepts in CSS3 so that we can take it up a notch.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Advanced.jpg" /></p>

<p>Since you have a good foundation of CSS3, now we will go ahead and look at the advanced concepts of CSS3. We will also get our hands dirty with some practical examples.

</p>

</section>

Currently our page looks something like below.

 

Layout

Layout

Now let us create a new class .sidePanel that we assigned to our aside.

.sidePanel

{

float: right;

width: 150px;

margin-top: 50px;

margin-right: 10px;

}

 

However our page still does not look like we would want it to. We have the main content and side panel running into each other and the main content getting distorted because of the side panel.

 

Layout

Layout

To work around with issue we will do 2 things:

  • We will add a class .mainPanel which will have the right margin greater than the width of the right panel.
.mainPanel

{

margin-right: 175px;

}

 

  • Reduce the height and width of the image so the that it fits nicely.
.image

{

width: 80%;

height: 80%;

}

 

So finally the code for our webpage looks something like below

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

text-align: center;

padding: 5px

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

footer p

{

font-size: x-small;

color: #000000

}

.article-title

{

background-color: #c4c4c4;

}

.meta-article

{

font-style: oblique;

}

.meta-author

{

font-style: normal;

}

#first-article

{

background-color: #e8dede

}

ul :nth-child(odd) {background-color: #c4c4c4}

ul :nth-child(even) {background-color:#e8dede}

.webPage {

font-size: 16px;

background-color: #000000;

width: 800px;

margin-top: 25px;

margin-left: auto;

margin-right: auto;

border:  5px solid black;

border-radius: 25px;

background-color: green;

box-shadow: 0 0 15px 5px lightGray

}

.sidePanel

{

float: right;

width: 150px;

margin-top: 50px;

margin-right: 10px;

}

.mainPanel

{

margin-right: 175px;

}

.image

{

width: 80%;

height: 80%;

margin: 5px;

float: right;

}

</style>

</head>

<body>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Somethime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

<li>Selectors</li>

<li>Inheritance</li>

</ul>

</section>

</aside>

<div>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.</p>

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" />

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<section id="header-section">

<h1>Advanced concepts in CSS</h1>

<div>

<span>Posted on 25th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn advanced concepts in CSS3 so that we can take it up a notch.</p>

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Advanced.jpg" />

<p>Since you have a good foundation of CSS3, now we will go ahead and look at the adavnced concepts of CSS3

We will also get our hands dirty with some practical examples.</p>

</section>

</article>

</div>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>

And the page looks like

Layout

Layout

Navigation

In a website navigation is generally done by the use of links and these links do nothing but take to a different webpages.

To create a navigation bar we will start off with an ul with the list of links that we want to use in the navigation bar. So let us create a list of links just above the main div.

<ul>

<li><a href="https://www.abhishekshukla.com">Home</a></li>

<li><a href="https://www.abhishekshukla.com/category/css">CSS</a></li>

<li><a href="https://www.abhishekshukla.com/category/html/html5">HTML5</a></li>

<li><a href="https://www.abhishekshukla.com/category/javascript">JavaScript</a></li>

</ul>

 

We have added 4 links and these will appear at the top of the page. So this how our page looks now. We see the background styled because of the ul styles that we have specified before.

Navigation

Navigation

Now we will remove the bullet style form the li. We will add a new style for ul.mainMenu and reset the list style to none and will make the bullets disappear.

ul.mainMenu

{

list-style-type: none;

}

Let us remove the padding and margins as well.

ul.mainMenu

{

position:relative;

list-style-type: none;

padding-left: 0px;

margin-left: 0;

border-bottom: 1px solid #000000;

text-align: center;

}

 

And now the looks much better

Navigation

Navigation

Now let us take the block level ul tag and make it into an inline tag so that there no new line between each entry. So now all the links will appear in one line.

.mainMenu li

{

background: green;

display: inline;

}
Navigation

Navigation

 

We can now style each li to look like buttons so let’s go ahead and style the li with color, border, etc.

.mainMenu a
{
background-color: #1197c9;

color: #393636;

display: inline-block;

border: 1px solid #000000;

border-bottom: none;

padding: 5px 20px 5px 20px;

text-decoration: none;

}

 

And now this is how our page looks like

 

 

Navigation

Navigation

 

The code for this post can be found here or @ mirror

Any questions, comments or feedback is most welcome.

 

 

 

In this post we will talk about

  • Fonts
  • Web Fonts
  • Text Transformations

Fonts

We can use any fonts which are available on the users system. We also specify a font family and in that case the user’s browser will use any font available from that font family. The three most popularly used fonts are:

 

Serif Fonts

These fonts are generally used in articles or paragraphs as these provide easier reading. Some of the Serif fonts are

  • Baskerville
  • Georgia
  • MS Serif
  • New York
  • Palatino Linotype
  • Times
  • Times New Roman

If we want to default to any available font from this family available on the user system then we can use serif.

Sans-Serif Fonts

These fonts are generally used for headlines as they stand out. Some of the Sans-Serif fonts are

  • Arial
  • Arial Black
  • Century Gothic
  • Geneva
  • Helvetica
  • Impact
  • Lucida Grande
  • Palatino Linotype
  • Tahoma
  • Trebuchet MS
  • Verdana

If we want to default to any available font from this family available on the user system then we can use sans-serif.

Monospace Fonts

These fonts are good for writing code. Some of the Monospaced fonts are

  • Andale Mono
  • Cooperplate
  • Courier
  • Courier New
  • Lucida Console
  • Monaco

If we want to default to any available font from this family available on the user system then we can use monospace.

So with this all this new knowledge on fonts let us go ahead and change the fonts in our html.

p

{

color:  #24981f;

font-family: Georgia 'Times New Roman' serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: Impact Tahoma 'Century Gothic' sans-serif;

font-size: larger;

}

h2

{

color: #1197c9;

font-family: Impact Tahoma 'Century Gothic' sans-serif;

font-size: large;

}

And our page with new fonts looks something like below

Fonts

Fonts

Web Fonts

The fonts mentioned above need to be present on the user’s system, so that the web page could use it but in the case of Web Fonts we can specify to download these fonts on the user’s machine. But sometimes this might not be the right choice as this might lead to ownership issues because of the font’s ownership. The best solution around that is to use a Font Server and better yet use Google font server. To get the specific font all we need to do is get the link of a particular font from the Google font server and include it in the web page so that it is downloaded as and when it is needed.

Let’s try to use Web Fonts and for that we need to go to http://www.google.com/fonts. On the left hand panel we can see various options to filter and customize our fonts.

 

Google Web Fonts

Google Web Fonts

We also have multiple option to select the text we want to analyze, the size we want to analyze and the various way we can sort it. We can also see it in poster, paragraph, sentence or word.

 

Google Web Fonts

Google Web Fonts

To use a particular type of font we need to add it to the collection and click on Use at the bottom right corner of the page.

 

Google Web Fonts

Google Web Fonts

Once we do that we see all the instructions as to how we can use that font in our web page. And before we use it we can include or exclude the stuff we want and also see the load time of that font in the web page.

 

Google Web Fonts

Google Web Fonts

We will go ahead and use this font in our webpage for paragraph and headings.

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

It works really well even after the fact this font is not present on my system.

 

Web Fonts

Web Fonts

Font Size

Just selecting the font family is enough, for our webpage to look really amazing we also need set the font size appropriately as well. We can specify the font size in

  • em – It is a scalable unit. 1em = current font size. So if the current font size is 16 px then 1em = 16px and 2em = 32px.
  • percentage – It is similar to em but the current font size is 100%. So if the current font size is 16px then 100% = 16px and 200% = 32px.
  • px – These are the fixed sized unit where 1px = one on screen.
  • keywords (small, medium, large, etc) – These are also fixed sized units. One point = 1/72 of an inch.

Font Color

We can also set the font color in our styles. The various ways to set font color are

  • rgb – We need to pass the red, green and blue hexadecimal values of the color
  • rgba – This is similar to rgb with an additional attribute of a which repsents the opacity. The value of a ranges between 0(Transparent) and 1(Opaque).

Font Style

We could also use Font style. The various font styles that we can set in our font are

  • italic – This will italicize the content.
  • bold – This will make the content bold.

Also if font style is already set before in the hierarchy then we can reset it to normal which will remove any font style that is already present.

Other Text Decorations

We can use to change the text to

  • text-transform: lowercase
  • text-transform: uppercase
  • text-transform: capitalize
  • font-variance: small caps
  • text-decoration: overline

Below is the usage of all of these

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

<style>

h1

{

text-transform: capitalize;

}

h2

{

text-transform: uppercase;

}

h3

{

font-variant: small-caps;

}

h4

{

text-decoration: overline;

}

p

{

text-transform: lowercase;

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<h2>Learn everything about CSS</h2>

<h3>Learn everything about CSS</h3>

<h4>Learn everything about CSS</h4>

<p>

LEARN EVERYTHING ABOUT CSS

</p>

</section>

</article>

</body>

</html>
Text Decorations

Text Decorations

Kerning

The “font-kerning” property controls metric kerning, kerning that utilizes adjustment data contained in the font.

    • letter-spacing: 1px;
    • word-spacing: 2px;

 

Leading

The CSS line-height property is similar to leading in desktop publishing – it determines the “line height”. This results in lines of text appearing closer together or further apart.

    • line-height: 1.5

 

    • line-height: 150%

 

li { letter-spacing: -1px; word-spacing: 5px; line-height: 150%; }

 

Text Decorations

Text Decorations

Box Model

In CSS3 we can consider our page to consist a set of boxes. Every element that we have could be considered as an individual box. So an image will be a box so will be a paragraph or any other element on our page.

Border

It is the line around each of these boxes. It can be set for all four sides of the element or individual side.

  • border
  • border-top
  • border-right
  • border-bottom
  • border-left

Margin

All these boxes are separated by space which is known as margin. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom margins.

Padding

It is the space between the border and the content of the boxes. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom paddings.

Block level and Inline Tags

The various block level tags are:

  • p
  • div

The various inline tags are as below. These tags cannot have top and bottom margin.

  • strong
  • em
  • image

By default we have a square box for the elements however we can create a rounded corner box for the elements using the following style

.box-rounded-corner

{

border-radius: 25px;

background-color: green;

}

 

And

<ul>

<li>learn everything about css</li>

<li>learn everything about css</li>

<li>learn everything about css</li>

<li>learn everything about css</li>

</ul>

 

 

Round Corners

Round Corners

Let us apply few of the these changes on our initial page

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>

<style>

p

{

color:  #24981f;

font-family: 'Noto Serif', serif;

font-size: medium;

}

h1

{

color: #0f769d;

font-family: 'Noto Serif', serif;

font-size: larger;

text-align: center;

padding: 5px

}

h2

{

color: #1197c9;

font-family: 'Noto Serif', serif;

font-size: large;

}

footer p

{

font-size: x-small;

}

.article-title

{

background-color: #c4c4c4;

}

.meta-article

{

font-style: oblique;

}

.meta-author

{

font-style: normal;

}

#first-article

{

background-color: #e8dede

}

ul :nth-child(odd) {background-color: #c4c4c4}

ul :nth-child(even) {background-color:#e8dede}

.webPage {

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin-top: 25px;

margin-left: auto;

margin-right: auto;

border:  5px solid black;

border-radius: 25px;

background-color: green;

box-shadow: 0 0 15px 5px lightGray

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Somethime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

</ul>

</section>

</aside>

</article>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>
Border Margin Padding

Border Margin Padding

The code for this post can be found here or @ mirror

Any questions. comments or feedback are most welcome.

In this post we will talk about

  • HTML elements hierarchy
  • Specificity

 

HTML Hierarchy Tree

The elements which are present higher in this hierarchy tree are known as ancestors and the elements which are below these ancestors are known as the descendants of these ancestors. The descendants inherit the style form their ancestors or parents. Inheritance is really useful as we do not need to duplicate styles for descendants because they pick up all the style from their parents. So in the image below if there is a style applied to the div they will be implicitly inherited by their descendants which are h1, h2, ul, a and their descendants em and li.

HTML Family Tree

HTML Family Tree

However there are a few properties that are not inherited. These properties are

  • Placement tags
  • Margins
  • Borders
  • Background Colors

Which makes sense because generally we do not want inherit these properties to the child element anyways. Also the styles that are more specific override the less specific or inherited style. So in the case of above hierarchy tree if we have a specific style for li then it will override the style provided by div or ul. So let us see this Inheritance in action. There are some styles properties that we want to apply to all the elements in our web page so the best way to do that will be adding that style at the body level. If you recall from the previous post that we have 3 types of selects which we can use to specify styles (tag, class and Id). The tag selector is specific to a tag and the Id selector is supposed to be unique on a page so our best option to define this style is as a class. So let us a style for our web page. The way we define style by class is prefixing (.) before the class name. As you can see below we have created a style for the page where we have defined the style name as .webPage where (.) represents that the style is for a class.

.webPage {

font-family: Calibri, Cooper, Verdana, sans-serif;

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin: 5 auto;

}

We have specified multiple fonts followed by a complete font family. It is useful because if the browser does not Calibiri font available, it will use Cooper and if does not have Cooper it will use Verdana and if it does not have Verdana then the browser will use any sans-serif font. Then we have also specified the default font-size of the text on the page along with font color, background color, width and margin of the body. Now let us refer this style in the html page.

<body>

The complete code of the webpage is below.

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title>Learn CSS3</title>

<style>

.webPage {

font-family: Calibri, Cooper, Verdana, sans-serif;

font-size: 16px;

color: #117c13;

background-color: #000000;

width: 800px;

margin: 5 auto;

}

</style>

</head>

<body>

<article id="first-article">

<section id="header-section">

<h1>Learn everything about CSS</h1>

<div>

<span>Posted on 12th Sep 2013</span>

<span>by</span>

<span>Abhishek Shukla</span>

</div>

</section>

<section>

<p>&nbsp;</p>

<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.

<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>

<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.

In this course we will have a look at the various basics of CSS3.

We will also get our hands dirty with some practical examples.</p>

</section>

<aside>

<section>

<h2>About CSS3</h2>

</section>

<section>

This section is generally used for the side panels. Sometime it is also used to give additional information.

<ul>Here is a list of few useful concepts in CSS

<li>Selectors</li>

<li>Inheritance</li>

<li>Specificity</li>

<li>Border</li>

<li>Margin</li>

<li>Padding</li>

<li>Positioning</li>

</ul>

</section>

</aside>

</article>

<footer>

<p>Copyright 2013 Abhishek Shukla</p>

</footer>

</body>

</html>

When we see this page in the browser it looks something like below.

Style Body

Style Body

While in browser if want to see a style then we need to press F12 and click on the lens icon at the bottom of the page and then select the element which we want to inspect.

Find Element Style

Find Element Style

 

Find Element Style

Find Element Style

Once we make this selection in the same Elements Window we see the styles that are applied to the selected element.

Find Element Style

Find Element Style

We can also look at the styles of the element by simply right clicking the element and selecting Inspect element.

Find Element Style

Find Element Style

Specificity

Specificity is the methods by which a browser chooses which property estimations are the most important to a component and becomes connected. Specificity is just dependent upon the matching administers which are made out of selectors of distinctive sorts. This means that at any point of time the style that will be applied to an element will be the most specific style. We can determine which of the style is most specific by counting the number of ID selectors, class selectors, attribute selectors, pseud-class selectors, type elements and pseudo-elements. So let us say Number of Id selectors (Tag Selector) = x Number of class, attribute and pseud-class selectors (Class Selector) = y Number of type and pseudo-elements (Id Selector) = z Then xyz is our specificity of our style or (x*100 + y*10 + z) Below are a few instances showing us how we can find specificity of a style.

li                                                              x=0 y=0 z=1 => specificity = 1

ul li                                                         x=0 y=0 z=2 => specificity = 2

ul ol+li                                                   x=0 y=0 z=3 => specificity = 3

ul + *[ rel="nofollow"]                   x=0 y=1 z=1 => specificity = 11

ul ol .footer                                        x=0 y=1 z=2 => specificity = 12

.footer .webpage                            x=0 y=2 z=0 => specificity = 20

# first-article # header-section   x=2 y=0 z=0 => specificity = 200

# first-article li .footer                    x=1 y=1 z=1 => specificity = 111

So this is the exact reason lot of CSS designers prefer not to use Id but use classes instead. Ids change the specificity a lot on their own and might have some unintended behaviors at times. We generally don’t need to calculate the specificity as we can inspect the element to see how the styles are working on it. As we can see in the image below the font-size specified in .webPage is overwritten in p.

Find Element Style

Find Element Style

The code for this post can be found @ here or @ mirror