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="http://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.

 

Hey guys,

As you would all know that the building blocks of an application are controls but you need to know the layouts as well to know where and how you can place these controls? So we are going to talk about the layout panels in WPF, what are the common layout properties that are offered by WPF and we would also have a look on how to create a navigation application in WPF.

Before we go into what layout panels do WPF has to offer we need to have a look how the layout processing happens in WPF. Now it is obvious that WPF will redo the layout when the applications starts or when something changes on the layout. The layout occurs in two phases: measure and arrange.

In the measure phase WPF walks through the each element in the tree and finds out as how large each element would like to be by calling the method Measure() on each element and it also tries to provide the information as to how much space is likely to available. There are two types of layouts that gets formed: Constrained (when WPF is able to make a good guess of the space that might be available) and unconstrained (When WPF does not have a fair idea of the layout space available). Now elements are not supposed to ask about the space during the measure phase so they just return the preferred size. Also in the unconstrained phase where the size passed is infinity the elements are supposed to return the exact size they require. This sometimes also known as Size To Content.

In the arrange phase WPF calls the arrange method on each element as it now know how much space each element requires. WPF tries to accommodate each elements requirement and if the space provided is less than the controls asked then the controls will be scaled accordingly. But if the element is asking for impossible space then the elements will be cropped.

Declarative Layout

WPF wants us to specify what our requirements are and then in the background WPF does all the work to arrange the resources for it. The best part of it is that it is declarative and can be defined entirely in xaml which can be of course customized as well.

WPF layouts also have the special facilities like automatic resizing according to the space available for the layouts. It also supports dynamic changes that are made to the WPF applications like adaptations to data changes at runtime or locale changes at runtime.

Some of the common layout properties provided by all the layout controls in WPF as Margin, Padding, Horizontal Alignment, Vertical Alignment, Min/Max Width, Min/Max Height, Width, Height. These provide the consistency in the layouts in WPF.

Margin

The margin property helps us determine how much place is there around the space around the edges. Means if you do not want the control to take lesser space then it has been allocated to it so that it does just stick its border along with other controls you could use the margin.

We could specify the Margin as a single value and control will have uniform outer space around it. The unit for the margin is device independent pixels.

Margin in WPF

Margin in WPF

This means that the unit is 1/96th of an inch. So if the margin is specified as 96 pixels then the control will have a space of 1inch around it in theory but in actual this would happen if windows know the resolution of its output device, which is not the case in most cases as most of the windows pc end up in default configuration. If windows does not know the resolution then it will guesses it 96 for 1 inch across. But if windows is using large font sizes then the windows will guess that 120 pixels for 1 inch of the space. So now the WPF unit will be a little larger than the normal pixel. So this is confusing.

We could also specify the Left and Top margin or you could specify the left, top, right and bottom margin specifically.

 

Margin in WPF

Margin in WPF

Padding

The Padding property is similar to margin. As margin specifies the pace outside the control padding specifies the space between the border and content of the control. Padding is not available for all elements as it makes sense for controls that have content. Just like margin padding can be specified as a single number, left and top or explicitly for each left, top, right and bottom.

Alignment

Alignment comes into the picture when the space available for the control is more than required. We can specify the Vertical Alignment or Horizontal Alignment.

 

The default value of Vertical and Horizontal alignment is stretch. So if we specify the horizontal and vertical alignments other than stretch then the control would size to its content depending on the alignments specified.

Content Alignment

Horizontal and Vertical alignments specify how the controls uses the space provided by its container but Horizontal Content Alignment and Vertical Content Alignment determines how the content would align within the control.  Horizontal Content Alignment and Vertical Content Alignment have the same values as Horizontal Alignment and Vertical Alignment and behave quite similarly. The only difference is that it aligns the content instead of the control.

Explicit Height and Width

Most of the times the constrained or the unconstrained size provided to the element do not match your requirements so you could specify the explicit height and width for the control. If you do not want to specify the fixed width and height of then you specify the range by specifying the MinWidth and MinHeight and MaxWidth and MaxHeight.

Grid

WPF provides multiple styles of placing the controls by proving the multiple layout panels. The most flexible of these layouts is the grid. It derives from the panels and provides a row and column layout for placing the controls. For a constrained layouts we could provide the row and column to have autosize or for an unconstrained layout we can specify the specific row or column size values or have a proportional values.

Grid in WPF

Grid in WPF

You could see multiple things in the image above. The use of attached forperties in Button.

The Rows and columns are specified and the rows and columns are sized equally as we not specified any specific size which could be done by specifying the values.

We could also specify the specific height or width of a button and the grid row or columns will be resized accordingly if the space is available for the grid to incorporate the individual requirements for the controls.

 

Grid in WPF

Grid in WPF

We could also set the margin properties and see the effect of these properties within the grid.

 

Grid in WPF

Grid in WPF

You could see the star (*) values used for the height which is relative sizing use. We can have multiple elements in a grid and also elements can span multiple rows or columns. Grid is the default layout element when you create a new vs project.

GridSplitter

You can add a grid splitter to a cell and set the direction and it will resize the columns and rows when dragged.

DockPanel, StackPanel and WrapPanel

WPF also provides DockPanel, WrapPAnel and StcakPanel as a simpler layout panels to work with. There property values are shown in the image below:

 

A StackPanel provides horizontal or vertical stacking of elements whereas a dockpanel provides the alignment as Top, Bottom, Left, Fill and Right and a WrapPanel provides the stacking of elements from left to right and then to new line when the line space is finished.

Canvas

Canvas is the simplest panels. It just places the elements where to tell it to i.e. absolute positioning and will cause the elements to Size to Content. The positions are specified using the Canvas attached properties Top and Right. It can be used at places where you have something like drawing a which you do not want to resize.

ScrollViewer

Another layout control is ScrollViewer. It is not a Panel. It is a Content Control which allows putting control that won’t fit the screen. The Scroll Viewer performs an unconstraint layout and tells the control that it has as much space as it asked for. But this not the actual space, it is the virtual space and the scroll viewer performs the clip and translate transform to show the view of the content. The child does not need to know that it is being scrolled. It is sometimes useful use the scrolls. If you do not want to load the full virtual space initially as it might not be as Performatic. So if you want the control to participate in the scrolling process then if the child element inside the ScrollViewer implements IScrollInfo then the scrollviewer will stop pretending that virtual space is unlimited and will give the control to element for controlling the scrolling.

ViewBox

Like scrollviewer viewbox provides solution fit in content inside a constrained space. But unlike scrollviewer ViewBox scales the content to fit the ViewBox. ViewBox does this for any kind of content like vector graphics, bitmaps or WPF controls.

As you could see in the image below, the Canvas has fixed Width and Height. The reason is that the ViewBox needs to know whats the size of the content so that it can scale and resize it accordingly.

 

ViewBox in WPF

ViewBox in WPF

This works till do not set a stretch property on the ViewBox as it will start adding other behaviors in the ViewBox.

Windows

Window is the main compoanent of any WPF application. It is a Content Control. You can multiple styles in the Window like chrome, borderless or transparent.

There is also the Popup class that is used in Menus, DropDowns and ComboBox. It is also a content Control and can be put custom use.

The third type of Window is Navigation Window and it is slightly different form other windows. The model is quite similar to a web browser i.e. it can be used for navigation from one Page to another as it is built using the Page Class. It has back and forward buttons for navigation. If the Navigation application does not have a Window then the WPF will create the host window and host the page there and provide the navigation controls.

Windows in WPF

Windows in WPF

A frame in WPF is a control that will host the pages and provide the nested navigation area.

The code for this post can be downloaded here
Any questions, feedback and comments are most welcome.