In this post we will be covering the basic concepts in CSS3 along with some hands on examples. The topics that we will cover in this post are:

  • Structure of a CSS Style
  • Types of Stylesheets
  • Selector
    • Tag
    • Class
    • Id
  • Pseudo-Class

Structure of a CSS Style

Cascading Style Sheets are the way we usually style the elements on our web pages and CSS helps us define this style at one place which can be reused at multiple places later on.

When we write a CSS style it looks something like below. We have the name of the CSS class (or selector) followed by the opening and closing parenthesis. Inside these parentheses we define the property name and the value of those properties which are separated by colon (:). Each property value pair is separated by a semi colon (;). Sometime the vales can be placed inside quotes (“” or ‘’) depending on the value that we are adding.

CSS Structure

CSS Structure

 

Types of Stylesheets

External Stylesheet

External stylesheets are the ones which are used mostly as they allow us to make design changes to an entire site by simply changing one file.

  • External Stylesheet allows us to have better separation of concerns between the HTML and the style that we are writing. The HTML should be completely independent of the style that will be applied to it.
  • They are faster as they are cached and easily available for use.
  • We can include external stylesheet into a HTML page by simply adding it as a link. We need to specify the rel as stylesheet along with the type and path of the stylesheet.

Internal Stylesheet

Internal stylesheet reference styles within the page itself. Internal stylesheets are mainly use during development or prototyping because they are faster while development as they do not need to come from the cache every time we reload the application. These stylesheet should only be used at the time of development or prototyping and there is a good chance that these stylesheet will become obsolete in a few years.

To create an internal stylesheet we add the styled within the head tags of the webpage

Section

Section is used to specify a particular area on the screen.

Aside

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

Footer

This is used for adding the footer to the website or the webpage.

Selectors

Tag

Tag selectors are page wide selectors like p (paragraph). This selector is the most wide as they have multiple elements with that tag.

Class

The Class attribute tells the browser that an HTML tag belongs to a certain group. We can have many selector with the same class and this allows us apply one style to multiple selectors across the web page or website. Class selectors allow us to select every element on the page with that specific class. The Class selector is a little less wide than the Tag selector but still there can be multiple elements that can be present with the same class selector. When declare class selector in the style then we specify dot (.) to indicate that this is a class selector. But when we use it just specify the class name.

Id

The Id attribute should only be used in one tag on your HTML page, so that whatever is in that one tag look different. The motive of using an Id attribute is to uniquely identify a selector so whenever we are using an Id it should be unique. The Id selector is even more specific than the class selector as Id assigned to an element on the page should be unique for that page. When we specify the Id in the style we use the hash (#) symbol to indicate that this is an Id. Two major uses of Id because of its uniqueness on the page are –

  • Id can be used by JavaScript code to find a specific element.
  • Id can be used for linking to a specific part if the page.

In the code below we see all the things that we have talked about till now.

 

When run the above webpage we will see something like below. The browser has different font style for the headings. It has a picked up a default font for the text as we did not specify any font family.

Only HTML

Only HTML

Now we will style this page to do that we will create an inline style. To create an inline style we need to add the style tag within the head tag. We will start off with styling the paragraph in our webpage. So let us add a few property and values for the paragraph style.

Let us also specify the style for the h1 and h2. Notice the font size for h2 is smaller that h1

Let us also style the footer as well to show small text. You will see that we have specified the style name as footer p, this means that this style applies to any paragraph which is inside the footer.

Now our webpage looks something like below.

Style By CSS Tag

Style By CSS Tag 

Style by Tag

We have already seen how to specify style by Tag in the previous section where we have specified styles based on tags like p, h1, h2, footer, etc.

You could see that we have specified the styles based on the element tags. So we have specified the style for all the paragraphs using p, for all heading1 using h1 and for all heading2 using h2. All of these styles apply to all the elements on the page with no exception. However if we notice the style that we have specified by footer p means that this style will apply only to the paragraph present inside the footer. This type of style specification opens up a lot of capabilities of defining styles for different elements inside different tags.

Style by Class

In the code that we have written before we saw that the h1 that we were using had a class named article-title.

Style By CSS Class

Style By CSS Class

We will define a style specific to this class. To that we need to go to the style section in the head tag and specify .article-title as the style name and then add a background color property to the style.

Now if go back and refresh the page we will see that the h1 text has a background now. The same will happen for any element that is using the same class.

Now let us add the same class that we have added to h1 to h2 as well.

We will see that h2 will also get the same background. This will verify the principle that one class can be used at multiple places.

Style By CSS Class

Style By CSS Class

Now let us add style for the article metadata as well. The class that we are using for that is meta-article.

So we will go back to the styles section and add a new style named .meta-article and assign the font-style for that class to be oblique.

And then the text for this div with meta-article class will become oblique.

Style By CSS Class

Style By CSS Class

Now say I want my name to not to be oblique but in normal font style so I will add a new style for the meta-author class and set the font-style to be normal.

And then we will see the author name in normal font style.

Style by Id

To specify a style by Id we need to prefix a # before the Id while specifying the style. In this case will use the Id of the article section named as first-article and specify a background color.

This will make the background of the whole article as light gray.

Style By CSS Id

Style By CSS Id

Pseudo-class

These work just like the normal classes to find the elements. These pseudo-classes work on the relative basis. So in a class we can access the first child, last child, nth child, first child of a type, nth child of a type, etc. Below is the list of pseudo classes available in CSS3.

:focus

The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).

:active

The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. For mouse event this active behavior represents the time between mouse buttons down and then up. This is generally used

:hover

The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules.

:link

The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or

:visited

In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending of the expected effect.

:visited

The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover —

:active

Below is the use of all these 4 pseudo classes. We have specified these classes inside a (anchor tag)

Pseudo Class

Pseudo Class

:checked

The :checked CSS pseudo-class selector works for any radio (input type=”radio”), checkbox (input type=”checkbox”) or option (option in a select) component that is checked or toggled to an on state. The client can transform this state by clicking on the component, or selecting an alternate worth, in which case the :checked pseudo-class no more applies to this component.

In the code below as soon as the checkbox or the radio button is checked the checkbox and radio button part disappears.

:default

The :default CSS pseudo-class represents any user interface element that is the default among a group of similar elements.

:disabled

The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can’t be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.

:empty

The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.

:enabled

The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can’t be activated or accept focus.

:first-child

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

:first-of-type

The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.

:last-child

The :last-child CSS pseudo-class represents any element that is the last child element of its parent.

:last-of-type

The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.

:nth-child()

The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.

:nth-last-child()

The :nth-last-child CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

:nth-last-of-type()

The :nth-last-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.

:nth-of-type()

The :nth-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you’re selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.

: only-child

The : only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.

: only-of-type

The : only-of-type CSS pseudo-class represents any element that has no siblings of the given type.

Pseudo Class

Pseudo Class

:lang()

The :lang CSS pseudo-class matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.

element:lang(language-code) { style properties }

:not()

The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.

:not(selector) { style properties }

:root

The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the <html> element and is identical to the selector html, except that its specifity is higher.

:target

The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.

 

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

Any questions, comments or feedback are most welcome.

 

Styles

Styles give our applications and elements consistent look and feel. In this section we will see how style hooks up to the resource system and property system in WPF. We will also see how to specify triggers in styles and how to specify default and custom styles.

A style is a named group of settings that will define the elements will appear. As you can see in the image below the basic structure of style contains a list of setter elements which specify a target property and a value. A style provides a way to set properties of a type of element and in WPF these properties are Dependency properties.

 

WPF Styles

WPF Styles

Applying Style

All the elements in WPF have style property. Generally we use a resource reference in the elements style property however we can also set it inline. The main motive behind defining a style is that the same style will apply to multiple elements and will give consistent look and feel to the application. We can define style at the

  • Element scope
  • Window Scope
  • Application scope

We provide the x:key attribute to the style so that the elements can refer that resource.

 

WPF Applying Styles

WPF Applying Styles

We can also define the style as shown below by specifying the TargetType of the style and this style will automatically apply to all the elements that are of that type unless specified otherwise.

 

WPF Applying Styles

WPF Applying Styles

We can use this property of the styles to skin our applications by the use of resource dictionaries. We can put the styles defining target types in both the resource dictionaries and switch between then to change the theme of the application.

Extending Styles

In WPF we can define new styles that are using other styles as the starting point. This can be done by using the BasedOn property of a style. We can change or add the needed properties. You should remember that we cannot apply multiple custom styles to an element so this BasedOn property helps us.

 

WPF Extending Styles

WPF Extending Styles

Styles vs. Local Properties

When we set a property using a style it works the same way as setting the property any other way.

But there is something that only style can do and not properties. In a style we can add properties that do not match the target type as shown below. In this case the WPF elements will apply the property that makes sense and will ignore the rest of the properties.

 

WPF Styles vs. Local Properties

WPF Styles vs. Local Properties

 

Triggers

The styles support same range of triggers as control templates. However the targets of the trigger in style are the target elements whereas in the ControlTemplate the targets are the named elements.

 

WPF Triggers

WPF Triggers

Animation Property Trigger

As we have seen in the graphics section that the only trigger we set on an element is the Event trigger. We cannot set a Property trigger on an element directly so we can use style for this. That style can be inline or resource style.

 

Animation Property Trigger

Animation Property Trigger

Animation Event Triggers

As we can see in the image below we can also put event triggers in the style.

 

Animation Event Triggers

Animation Event Triggers

Items Container Style

When we are working with ItemsControls like the ListBox or a TreeView we generally define the DataTemplates for the ListBoxItem or a TreeViewItem to make use of DataBinding. When are not proving these specified conatiners to the items then WPF is doing that for us. This means WPF wraps the contents of DataTemplate in a ListBoxItem for a ListBox and in a TreeViewItem for a TreeView. Now, if we apply properties to these will not work well while working with Data Binding. So what we need to do is define the style of type ItemContainerStyle.

 

Items Container Style

Items Container Style

 

Items Container Style

Items Container Style

Styles, Templates and Controls

Styles enable controls to be visible by default. As we have seen in the previous sections that the controls depend on templates for their appearance. Also the controls get their templates form the themes\generic.xaml or theme specific resource dictionary. These default styles set much more than a template. We should hard code as less as possible about a control in the template. The default styles sets properties like default background, font, etc. As you can see in the image below we have applied a local style to a button but we have just set the font size where does the button get the other properties form?

 

WPF Styles, Templates and Controls

WPF Styles, Templates and Controls

So what’s happening is that the local style for the button is setting the font size for the button and default style sets all the other properties for this button. So both the styles are merged and used in the button.

Any questions comments or feedback is most welcome.

The Code for this post can be found here.

 

Control Customization

The whole idea behind WPF architecture was that the presentation layer is completely separate from the functionality. This means a button may look like an image or a circle but still have all the functionality of a button.

Custom Controls

  • Create a new project named CustomControls

  • Before we start customizing a control let’s talk about style and template as this will be required for control customization.
    • Styles – A style is a resource that contains a set of property setters. To see how this works lets create a rectangle on to the design surface. Right click on the rectangle and select Edit Style à Create Empty.

  • Give the style a name and select its location and click on okay

 

  1. The left breadcrumb shows the Layout Root. As we are working with a rectangle we see a rectangle here
  2. The next breadcrumb shows us that we are working with Style. This is represented by an icon that looks like a painter’s palette.
  3. The scope that we are working on has changed to RectangleStyle and the name of the style is RectangleStyle1.
  4. We see only one element as of now which is the style.
  5. All asset creation tools have greyed out as when we work in a style we are restricted to the property of that element which is a rectangle in this case.

 

 

  • Now let us set some the properties of the rectangle which we will be able to see in the style later on. The properties that are changed are highlighted as red.

 

  • Now let us switch to the XAML of the style and we could see a set of setters as a part of the style of the rectangle which contains the name of the property of the rectangle and its value. Also it has a target type which would specify as to which Element type to target to. You can also see how the rectangle refers the style.

 

  • Now just click on the Rectangle in the Breadcrum bar to go back to the Root Document.

 

  • When we right click on the rectangle,we would see option to Edit the current style of the rectangle or edit a copy that style or create a completely new style or apply resource which can be any other style already created.

 

  • Now just create a rectangle onto the design surface and you would see that the Fill is not set for the rectangle the way it is when create a rectangle by default the reason is that blend expects you apply a style to this rectangle as the last rectangle you were working with had a style. So just right click the rectangle and go to Apply resource and select RectangleStyle1.

 

 

 

 

  • Now close your document and open it again and create a rectangle and you would see that the rectangle Fill is set by Blend to default White. Even when you apply the style this white Fill is still there, this is because this fill is set on the rectangle level along with the style and hence overrides the style Fill whereas all the other properties are inherited from style.

 

  • Now just click on the property marker next to the Fill property of the rectangle and select reset and you would be able to the Green Fill of the rectangle again.

 

  • Templates– The limitation of styles is that style can set properties on the element you are working with. This means that if you are working with a rectangle you can apply that style only on a rectangle. Whereas the template property is on the control which sets the entire Visual Tree. All of the visual states and entire stuff that makes the control.
    • Let’s create a button on the panel. When I right click it instead of the edit style option I have Edit template option in which I see option of Edit a copy which will create a copy of the existing default template of the Button and give us to edit and a Create Empty will create a new empty template for us to edit.

 

  • Now when click on Edit a Copy you would see a dialog box like below asking to give a name to the style, its asking to create a style and not a template because you can only apply a style to a control and the template is a part of the style. You can also see the option of apply to all. This option will actually create the style with no name nad apply to all the button in its scope.

 

  1. We are working with the template within the style within the button. You can have a look at the xaml and see that the style has a target type set as button and the setter property template has visual states, border, grid, rectangle, etc which the complete visual tree of the button and will decide how the button looks and behaves.
  2. You can see the Button Visual Tree here.

 

  • Now just right and delete all the elements inside the grid so that we can create the visual of our button from scratch. And then press ctrl + 9 to zoom into the grid we are working on.

 

  • Now add an ellipse and set the alignments to stretch and margins to 0

 

  • Now Go to the assets library and add a couple of rigs to the corners of ellipse. Also now add a textblock on the ellipse and rotate it and make the text as button. Now run the application and you would be able to the button.

 

  • Now go over to the states and we would see how the button looks at various states like mouse over and mouse pressed, which is the same as of now as we have not added any effects. Now let’s change what the button does on mouse over and Pressed. Just select MouseOver in the states and change the color of one of the rings and then select Pressed state and change the color of the other ring. Now run the application and see if the effects work at runtime as well.

 

  • Now let’s add some transition speed. Now select Mouse Over and change the textblock foreground to white and ellipse fill to black and also change the Default Transition speed from 0s to 3s and when we run the application we will see that all the animation states  transition very smoothly.

 

  • Now let’s add a new transition. Click on the Arrow+ in mouse over and we could see the transitions we could use. Select the 1st option.

 

 

  • We can also set the transition effects.

 

 

  • Now you can add new button and apply this style we have created.

 

  • Now if you set the background on the button it will not be applied to the button because it is taking its values from the template. Now we need to modify the template

So that the value is picked up from the control. So go ahead and edit the current template and select the ellipse. Now go to the property marker of the fill and select Template Binding à Background

 

  • When we change that the value will be coming from the parent and not the template as we have template binded the control to parent. Now if we go to the Mouse Over transition we will see that background color is not changed. So we need to decide as to do we want to template bind it to parent of Control Template.
  • Let’s Template Bind the Text of the TextBlock to Button Content. So select the TextBlock in the template and goto Common Propertiesà Text and click on the PropertyMarker and select Content as button being the Content Control we need to bind to the Content of the Button. But this work fine only till our content of the button is text.

 

  • So we have any other content then we should use content presenter for it. So add one to the template and align it to center and reset all the margins and rotate it the way you want.

 

 

Any Comments, feedback or suggestions are most welcome.