Advanced CSS – Cheat Sheet – clickety-clack.click

https://learn.shayhowe.com/advanced-html-css/complex-selectors/

Advanced CSS – Part 1 | Advanced CSS – Part 2

https://learn.shayhowe.com/advanced-html-css/

Performance & Organization

https://learn.shayhowe.com/advanced-html-css/performance-organization/

Lesson 1

Performance & Organization

HTML

Minify & Compress Files | Cache Common Files

CSS

Strategy & Structure | Performance Driven Selectors | Reusable Code | Reduce HTTP Requests

Having the ability to write HTML and CSS with a solid understanding is a great expertise to have. As a website’s code base and traffic grows, a new skill set comes into play, one that is extremely important to both development time and user experience. Knowing the fundamentals of website performance and organization can go a long way.

The organization and architecture of a code base can greatly affect not only the speed of development, but also the speed at which pages render. Both of which can be sizeable concerns not only for developers but also users. Taking the time to design the right structure for a code base, and identify how all of the different components will work together, can speed up production and make for a better experience all around.

Additionally, taking a few small steps to improve the performance of a website can pay off in dividends. Website performance greatly resembles the 80/20 rule, where 20% of the optimizations will speed up roughly 80% of the website.

Strategy

The first part to improving a website’s performance and organization revolves around identifying a good strategy and structure for developing the code base. Specifically, building a strong directory architecture, outlining design patterns, and finding ways to reuse common code.

Style Architecture

Exactly how to organize styles boils down to personal preference and what is best for a given website but generally speaking there are best practices to follow. One practice includes separating styles based on intent, which includes creating directories for common base styles, user interface components, and business logic modules.

”’

# Base
  – normalize.css
  – layout.css
  – typography.css

# Components
  – alerts.css
  – buttons.css
  – forms.css
  – list.css
  – nav.css
  – tables.css

# Modules
  – aside.css
  – footer.css
  – header.css

”’

The architecture outlined above includes three directories, all with individual groups of styles. The goal here is to start thinking of websites as systems rather than individual pages, and the code architecture should reflect this mindset. Notice how there aren’t any page specific styles here.

The base directory includes common styles and variables to be used across the entire website, layout and typography styles for example. The components directory includes styles for specific user interface elements which are broken down into different component files such as alerts and buttons. Lastly, the modules directory includes styles for different sections of a page, which are determined by business needs.

The component styles are purely interface driven and have nothing to do with the core business logic of the website. Modules then include styles specific to the business logic. When marking up a module in HTML it is common to use different user interface components within it. For example, the sidebar of a page may have list and button styles that are defined within component styles while other styles needed for the sidebar are inherited from the module style. The separation of style encourages well thought out presets and the ability for styles to be widely shared and reused.

The strategy of organizing styles this way isn’t exactly new, and has been previously mentioned in different CSS methodologies including Object Oriented CSS, OOCSS, and the Scalable and Modular Architecture for CSS, SMACSS. These methodologies have their own opinions on structure, as well as on how to use styles.

Object Oriented CSS

The Object Oriented CSS methodology was pioneered by Nicole Sullivan in her work with writing styles for larger websites. Object Oriented CSS identifies two principles that will help build scalable websites with a strong architecture and a reasonable amount of code. These two principles include:

Separate structure from skin
Separate content from container

Overall separating structure from skin includes abstracting the layout of an element away from the theme of a website. The structure of a module should be transparent, allowing other styles to be inherited and displayed without conflict. Most commonly this requires a solid grid and layout structure, along with well crafted modules.

Separating content from the container involves removing the dependency of a parent element nesting children elements. A heading should look the same regardless of its parent container. To accomplish this, elements need to inherit default styles, then be extended with multiple classes as necessary.

HTML

<div class="alert alert-error">
  <p class="msg">...</p>
</div>

CSS

.alert {...}
.alert-error {...}
.msg {...}

Object Oriented CSS advocates building a component library, staying flexible, and utilizing a grid. These are good ground rules, and they can help you avoid the need to add additional styles every time you add a new page or feature to a website.

Scalable & Modular Architecture for CSS

Along the same line of Object Oriented CSS is the Scalable and Modular Architecture for CSS methodology developed by Jonathan Snook. The Scalable and Modular Architecture for CSS promotes breaking up styles into five core categories, including:

Base
Layout
Module
State
Theme

The base category includes core element styles, covering the general defaults. The layout category then identifies the sizing and grid styles of different elements, determining their layout. Module styles are more specific styles targeting individual parts of the page, such as navigation or feature styles. The state styles are then used to augment or override other styles in the event that a module includes an alternate state, an active tab for example. Lastly, the theme category may be added which could include styles based around the skin, or look and feel, of different modules.

HTML

[code language=”html”]
<div class="alert is-error">
<p>…</p>
</div>

CSS

.alert {...}
.alert.is-error {...}
.alert p {...}
.alert.is-error p {...}

In the example above the alert class falls into the module category while the is-error class falls into the state category. Styles from each of these categories are then inherited as necessary.

Choosing a Methodology

Choosing which methodology to use, if any, is completely up to you and what you feel is best for a given website. Generally speaking, a solid mix of both OOCSS and SMACSS works well, borrowing principles from each methodology as you prefer.

Performance Driven Selectors#performance-driven-selectors

One functionality of CSS often abused without awareness are selectors. Much of the attention within CSS is given to properties and values. So long as these styles are applied to the correct element, everything looks to be fine. This is a very poor assumption. How elements are selected within CSS affects performance, including how fast a page renders as well as how practical and modular the styles are in the overall site architecture.

Keep Selectors Short

There are a handful of benefits to keeping CSS selectors as short as possible. These include minimizing specificity, allowing for better inheritance and portability, and improving efficiency. Long, over qualified selectors reduce performance because they force the browser to render each individual selector type from right to left. They also put a burden on all other selectors to be more specific.

/* Bad */
header nav ul li a {...}

/* Good */
.primary-link {...}

/* Bad */
button strong span {...}
button strong span .callout {...}

/* Good */
button span {...}
button .callout {...}

In the code above, the first selector is extremely specific and could be identified, and rendered, much quicker with the use of a class. Additionally, using a class in this case greatly reduces the need to identify an element’s parent, allowing that elements location to change over time without breaking any styles.

The second example includes selectors shorter than the first example but it can be improved by providing the same level of specificity to each selector. Avoid using overly specific selectors, in return they are less likely to break should the order of elements change. Cutting out some of the individual selector units, and giving all of the selectors the same strength, allows them to better cooperate.

The overall goal with short selectors is to decrease specificity, creating cleaner, more charitable code.

Favor Classes

Classes are great, they render quickly, allow for styles to be reused, and are already commonly used in building a website. When using classes though, there are common practices to observe in order to see that they are leveraged properly.

Since selectors are rendered from right to left it is important to keep an eye on the key selector. The key selector is the selector unit at the end, furthest to the right. The key selector is crucial as it identifies the first element a browser is going to find. Having a poor key selector can send the browser on a wild goose hunt. Don’t be afraid to use a class to be more unique simply for the benefit of performance.

Additionally, do not prefix class selectors with an element. Doing so prohibits those styles from easily being applied to a different element and increases the overall specificity of the selector.

/* Bad */
#container header nav {...}

/* Good */
.primary-nav {...}

/* Bad */
article.feat-post {...}

/* Good */
.feat-post {...}

It is also worth noting, stay away from ID selectors where possible as they are overly specific and do not allow for any repetition. At the end of the day using an ID isn’t a whole lot different than using !important.

Reusable Code

One of the largest performance drawbacks comes with bloated file sizes and unnecessary browser rendering. One quick way to help largely cut down on CSS file sizes is to reuse styles as much as possible. Any repeating styles or interface patterns should be combined, allowing code to be shared. If two modules share a background, rounded corners, and a box shadow there is no reason to explicitly state those same styles twice. Instead they can be combined, within a single class, allowing the styles to be written once and then shared.

Reusing code doesn’t have to come at the cost of semantics either. One technique would be to pair selectors together, separating them with a comma, allowing the same styles to be inherited across two selectors. Another approach, often seen within the OOCSS and SMACSS methodologies previously mentioned, includes binding styles to one class, then using multiple classes on the same element.

/* Bad */
.news {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}
.social {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* Good */
.news,
.social {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

/* Even Better */
.modal {
  background: #eee;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
}

Which approach you take doesn’t make a huge difference, so long as code is being shared and reused, and the overall file size is reduced.

Minify

Simply removing duplicate and unnecessary code is the best way to cut down on file size, however there are additional ways. One way includes minifying and compressing files, such as HTML, CSS, and JavaScript files. Additionally, images may be compressed, removing any unnecessary comments and color profiles.

gzip Compression

One of the more popular types of file compression is called gzip. gzip compression takes common files, including HTML, CSS, JavaScript, and so forth, and identifies similar strings to compress down. The more matching strings identified, the smaller the file can be compressed, thus sending a smaller file from the server to the browser.

Setting up gzip is fairly painless, and the HTML5 Boilerplate team has done a great job of getting this going. To gzip files an .htaccess file needs to be added to the root directory of the web server, labeling the specific files to be gzipped. The dot at the beginning of the file name is correct, as the .htaccess file is a hidden file.

Within the HTML5 Boilerplate Apache Server Configs, they instruct which files gzip compression should be applied to. Keep in mind, the code for this compression should live within a .htaccess file in the root directory of the web server. Additionally, it is worth noting that .htaccess files only work on Apache web servers, which need to have the following modules enabled.

mod_setenvif.c
mod_headers.c
mod_deflate.c
mod_filter.c
mod_expires.c
mod_rewrite.c

Generally speaking this isn’t an issue, and some web servers may even set up compression for you. After all, it is in the web server’s best interest to compress files too.

Measuring Compression

Within the Google Chrome web browser the web inspector gives a plethora of data around performance, particularly within the Network tab. Additionally, there are a few websites that help identify if gzip compression is enabled.

gzip Overview Screenshot — **Fig. 1**

The Network tab identifies each file loaded within the browser and displays the file size and load time. Notice how gzipping has reduced the file sizes by around 60%.

gzip Detail Screenshot — **Fig. 1**

Looking at a file specifically identifies what type of compression encoding the browser supports. In this case gzip, deflate, and sdch are all supported as noted within the request headers.

Looking at the response headers identifies that the file was sent using the gzip compression encoding.

Image Compression

Cutting down the size of a text file helps, but you get even better results by compressing the file size of images. The total file size of all the images across a website can quickly add up, and compressing images will greatly help keep the file size under control.

Many people steer away from compressing images in fear that compression involves reducing the quality of the image itself. For the most part this is incorrect, and images can be compressed in a lossless fashion, allowing unnecessary color profiles and comments to be removed from the image without changing the quality of the image at all.

There are a handful of tools to help compress images, two of the best are ImageOptim for Mac and PNGGauntlet for Windows. Both of these services compress the most commonly used image formats, specifically JPG and PNG files.

Image Compression Demo

Uncompressed, 455kb

Compressed, 401kb

ImageOptim Screenshot — **Fig. 1**

Using ImageOptim the above image was reduced over 14% without any reduction or loss in quality.

It should also be noted, setting an image’s dimensions in HTML by way of the height and width attributes does help render the page quicker, setting aside the appropriate space for the image. Understand, these attributes are to only be used to identify the exact image dimensions and not to shrink an image. Using a larger image, then scaling it down with the height and width attributes is bad practice as it loads more data than necessary.

[code language=”html”]
<img src="ocean.jpg" height="440" width="660" alt="Oceanview">

Reduce HTTP Requests

Next to file size, the number of HTTP requests a website makes is one of the largest performance pitfalls. Each time a request is made to the server the page load time increases. Some request have to finish before others can start, and too many request can bloat the server.

Combine Like Files

One way, and perhaps the easiest way, to reduce the number of HTTP requests is to combine like files. Specifically, combine all of the CSS files into one and all of the JavaScript files into one. Combining these files then compressing them creates one, hopefully small, HTTP request.

[code language=”html”]
<!– Bad –>
<link href="css/reset.css" rel="stylesheet">
<link href="css/base.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">

<!– Good –>
<link href="css/styles.css" rel="stylesheet">

In general, the CSS for a web page should be loaded at the beginning of the document within the head, while the JavaScript for a web page should be loaded at the end, just before the closing body tag. The reason for these unique placements is because CSS can be loaded while the rest of the website is being loaded as well. JavaScript, on the other hand, can only render one file at a time, thus prohibiting anything else from loading. One caveat here is when JavaScript files are asynchronously loaded after the page itself is done rendering. Another caveat is when JavaScript is needed in helping render the page, as such the case with the HTML5 shiv.

Image Sprites

The practice of spriting images within CSS includes using one background image across multiple elements. The goal here is to cut down the number of HTTP requests made by using multiple background images.

To create a sprite take a handful of background images, ones that are commonly used, and arrange them into one single image. Then using CSS add the sprite as a background image to an element, and use the background-position property to display the correct background image.

Think of the background image sliding around behind elements, only to expose the proper background image on a given element. For example, if an element is 16 pixels wide by 16 pixels tall it can only expose a background image of 16 pixels by 16 pixels, with the rest of the background image being hidden.

Fig. 1

Here is a sprite for a text editor menu, outlined with guides for reference of how the images background position will change.

Using the image sprite above, a menu can be created by using the image sprite as a background on the span element. Then, using classes to change the background position of the image sprite, different icons can be shown accordingly.

HTML

[code language=”html”]
<ul>
<li><a href="#"><span class="bold">Bold Text</span></a></li>
<li><a href="#"><span class="italic">Italicize Text</span></a></li>
<li><a href="#"><span class="underline">Underline Text</span></a></li>
<li><a href="#"><span class="size">Size Text</span></a></li>
<li><a href="#"><span class="bullet">Bullet Text</span></a></li>
<li><a href="#"><span class="number">Number Text</span></a></li>
<li><a href="#"><span class="quote">Quote Text</span></a></li>
<li><a href="#"><span class="left">Left Align Text</span></a></li>
<li><a href="#"><span class="center">Center Align Text</span></a></li>
<li><a href="#"><span class="right">Right Align Text</span></a></li>
</ul>

CSS

ul {
  margin: 0;
  padding: 0;
}
li {
  float: left;
  list-style: none;
  margin: 2px;
}
li a {
  background: linear-gradient(#fff, #eee);
  border: 1px solid #ccc;
  border-radius: 3px;
  display: block;
  padding: 3px;
}
li a:hover {
  border-color: #999;
}
li span {
  background: url("sprite.png") 0 0 no-repeat;
  color: transparent;
  display: block;
  font: 0/0 a;
  height: 16px;
  width: 16px;
}
.italic {
  background-position: -16px 0;
}
.underline {
  background-position: -32px 0;
}
.size {
  background-position: -48px 0;
}
.bullet {
  background-position: -64px 0;
}
.number {
  background-position: -80px 0;
}
.quote {
  background-position: -96px 0;
}
.left {
  background-position: -112px 0;
}
.center {
  background-position: -128px 0;
}
.right {
  background-position: -144px 0;
}

Image Sprites Demo

Image Data URI

Additionally, instead of spriting images, the encoded data for an image can be included within HTML and CSS directly by way of the data URI, removing the need for a HTTP request all together. Using the image data URI works great for small images, likely to never change, and where the HTML and CSS can be heavily cached. There are, however, a couple of problems with data URIs. They can be difficult to change and maintain, leading to having to generate another encoding. And, they don’t work in older browsers, specifically Internet Explorer 7 and below.

If using data URIs helps cut down a few HTTP requests, and the HTML or CSS can be heavily cached, the benefits tend to outweigh the risk. A few tools to help generate data URIs include converters and pattern generators. Be careful though, and always double check to see that the actual data URI is less weight than the actual image.

HTML

[code language=”language=”]
<img height="100" width="660" alt="Rigged Pattern" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==">

CSS

[code language=”language=”]
div {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPUlEQVQYV2NkQAO6m73+X/bdxogujiIAU4RNMVwhuiQ6H6wQl3XI4oy4FMHcCJPHcDS6J2A2EqUQpJhohQAyIyYy0nBAGgAAAABJRU5ErkJggg==") repeat;
}

Image Data URI Demo

Cache Common Files

Another way to help cut down HTTP requests, and to serve up pages faster, is to cache common files. When a page loads for the first time specific files may then be cached. Now the browser doesn’t have to request the same files again on repeating visits for quite some time. How long a period of time is up to you, all depending on how long you would like users to hold on to specific file types.

As with gzipping files, setting the expires headers for caching files can be set within the .htaccess file. And again, the HTML5 Boilerplate team is one step ahead of us. In their Apache Server Configs there is a file specifically for setting up expires headers.

Images, videos, web fonts, and common media types are often cached for a month, while CSS and JavaScript files are often cached for a year. Should the CSS, or any other file, change more often than once each year the file name will need to be changed, preferably versioned, in order to be loaded. Alternatively, the expires headers can be changed to a smaller period of time.

[code language=”php”]
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

Changing the "access plus 1 year" value to "access plus 1 week" is better suited for CSS and JavaScript files that are changing weekly but are not version controlled with separate file names. For accepted expires header values reference the mod_expires syntax.

Resources

Best Practices for Speeding Up Your Web Site
via Yahoo! Developer Network
Rules for Faster-Loading Web Sites
via Steve Sounders
CSS Strategy Square-off
via Viget Labs
Writing Efficient CSS Selectors
via Harry Roberts
Minifying and Optimizing Files
via Scott Hanselman
HTML5 Boilerplate
Data URIs
via CSS-Tricks

Lesson 2
Detailed Positioning

Detailed Positioning

https://learn.shayhowe.com/advanced-html-css/detailed-css-positioning/

Lesson 2

Detailed Positioning

In this Lesson
2

CSS

Containing Floats | Position Property |
Z-Index Property

When it comes to building layouts and positioning content on a page there are a handful of different techniques to use. Which technique to use largely depends on the content and the goals of the page, as some techniques may be better than others.

For example, the ability to float elements side by side provides a nice, clean layout that is receptive to the different elements on a page. However, when more strict control is needed, elements may be positioned using other techniques, including relative or absolute positioning.

In this lesson, we’ll start by taking a look at how to contain floats. Following that, we’ll cover more detailed positioning techniques, including how to precisely position elements on both the x and y axis as well as the z axis.

Containing Floats

Floating elements is a natural process when building a website’s layout, and is the instinctive method for positioning elements on a page. Floats allow elements to appear next to, or apart from, one another. They provide the ability to build a natural flow within a layout and allow elements to interact with one another based on their size and the size of their containing parent.

When floated, an element’s position is dependent on the other elements positioned around it. Will that element run into the one next to it? Will it appear on a new line? This all depends on the DOM (Document Object Model) and what surrounds an element.

What is the DOM?

The DOM, or Document Object Model, is an API for HTML and XML documents which provides their structural representation. In our case, we are speaking specifically to HTML documents, thus the DOM represents all of the different elements and their relationship to each other.

The representation can be considered a tree of sorts, with each element having a different relationship with those around it. Elements nested inside others have a parent and child relationship while elements that share the same parent have a sibling relationship.

While floats do provide quite a bit of fire power, they do come with a few of their own problems. The most popular problem involves a parent element that contains numerous floated elements. Content on the page will respect the size and placement of the floated children element, but these floated elements no longer impact the outer edges of the parent container. In this event the parent element loses context of exactly what it contains and collapses, thus giving the parent element a height of 0 and ignoring various other properties. A lot of times this may go unnoticed, specifically when the parent element doesn’t have any styles tied to it and the nested elements look to have aligned correctly.

Should the nested elements not line up correctly, styling errors may appear. Taking a look at the demo below, the .box-set division should have a light gray background, however the background is not seen as all of the elements nested within it are floated. Upon inspecting the .box-set division you will see it has a height of 0.

HTML

[code language=”html”]
<div class="box-set">
<figure class="box">Box 1</figure>
<figure class="box">Box 2</figure>
<figure class="box">Box 3</figure>
</div>

CSS

.box-set {
  background: #eaeaed;
}
.box {
  background: #2db34a;
  float: left;
  margin: 1.858736059%;
  width: 29.615861214%;
}

Containing Floats Demo

One way to force containing these floats would be to place an empty element just before the parent elements closing tag, of which would need to include the style declaration clear: both;. Clearing the floats this way works and is valid in most cases, but it isn’t exactly semantic. Depending on how many different floats need to be cleared on a page the number of empty elements can begin to stack up quickly, while not providing any real contextual value to the page.

Fortunately there are a couple of different techniques we can use to contain these floats, the most popular of which include the overflow technique and the clearfix technique.

The Overflow Technique

One technique for containing floats within a parent element is to use the CSS overflow property. Setting the overflow property value to auto within the parent element will contain the floats, resulting in an actual height for the parent element, thus including a gray background in our example.

For this to work within Internet Explorer 6 a height or width is required on the parent element. Since the height may likely be variable a width of 100% will do the trick. Using overflow: auto; in Internet Explorer on an Apple computer will also add scrollbars to the parent element, in which it is better to use the overflow: hidden; declaration.

.box-set {
  overflow: auto;
}

Overflow Technique Demo

Using the overflow technique does come with a few drawbacks. For example, when adding styles or moving nested elements that span outside of the parent, like when trying to implement box shadows and dropdown menus. In the demonstration below, you can see how the box shadow is being cut off wherever it lies outside the parent element. Additionally, the second box is cropped outside of the parent element.

Different browsers treat the overflow property differently, and thus could also implement scrollbars in different fashions here too. Look at the example below in different browsers, noticing how the columns display differently in each browser.

Overflow Pitfall Demo

The Clearfix Technique

Depending on the context of the floated elements a better technique to contain floats may be the clearfix technique. The clearfix technique is a bit more complex but does have better support as compared to the overflow technique.

The clearfix technique is based off using the :before and :after pseudo-elements on the parent element. Using these pseudo-elements we can create hidden elements above and below the parent containing the floats. The :before pseudo-element is used to prevent the top margin of child elements from collapsing by creating an anonymous table-cell element using the display: table; declaration. This also helps ensure consistency within Internet Explorer 6 and 7. The :after pseudo-element is used to prevent the bottom margin of child elements from collapsing, as well as to clear the nested floats.

Adding the *zoom property to the parent element triggers the hasLayout mechanism specifically within Internet Explorer 6 and 7, which determines how elements should draw and bound their content, as well as how elements should interact with and relate to other elements.

Taking the same example from above you can see how the floats are contained and the elements are able to live outside of the parent element.

.box-set:before,
.box-set:after {
  content: "";
  display: table;
}
.box-set:after {
  clear: both;
}
.box-set {
  *zoom: 1;
}

Clearfix Technique Demo

Effectively Containing Floats

Which techniques to use boils down to the content at hand and your personal preference. Some people prefer to stick strictly with the clearfix technique as it is consistent across the board. Others feel the clearfix technique is a bit too much code in some cases and prefer a mix of techniques based on the content. What you decide to use is up to you, just make sure it is well documented and easily identifiable either way.

One common practice is to assign a class to the parent element which includes the floats needing to be contained. Using the clearfix technique for example, Dan Cederholm helped coin the class name group. The group class name can then be applied to any parent element needing to contain floats.

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  *zoom: 1;
}

Single Pseudo-Elements

It is worth noting only one :before and one :after pseudo-element are allowed per element, for the time being. When trying to use the clearfix technique with other :before and :after pseudo-element content you may not achieve the desired outcome.

In the examples above, the clearfix styles would not live under the box-set class. Instead, the class of group would need to be added to the parent element containing the floats.

Position Property

Occasionally you need more control over the position of an element, more than a float can provide, in which case the position property comes into play. The position property accepts five different values, each of which provide different ways to uniquely position an element.

Position Static

Elements by default have the position value of static, meaning they don’t have, nor will they accept, any specific box offset properties. Furthermore, elements will be positioned as intended, with their default behaviors.

In the demonstration below, all the boxes are stacked one on top of the other as they are block level elements and are not floated in any specific direction.

HTML

[code language=”html”]
<div class="box-set">
<figure class="box box-1">Box 1</figure>
<figure class="box box-2">Box 2</figure>
<figure class="box box-3">Box 3</figure>
<figure class="box box-4">Box 4</figure>
</div>

CSS

.box-set {
  background: #eaeaed;
}
.box {
  background: #2db34a;
  height: 80px;
  width: 80px;
}

Position Static Demo

Position Relative

The relative value for the position property is very similar to that of the static value. The primary difference is that the relative value accepts the box offset properties top, right, bottom, and left. These box offset properties allow the element to be precisely positioned, shifting the element from its default position in any direction.

How Box Offset Properties Work

The box offset properties, top, right, bottom, and left, specify how elements may be positioned, and in which direction. These offset properties only work on elements with a relative, absolute, or fixed positioning value.

For relatively positioned elements, these properties specify how an element should be moved from its default position. For example, using a top value of 20px on a relatively positioned element will push the element 20 pixels down from where it was originally placed. Switching the top value to -20px will instead pull the element 20 pixels up from where it was originally placed.

For elements using absolute or fixed positioning these properties specify the distance between the element and the edges of its parent element. For example, using a top value of 20px on an absolutely positioned element will push the element 20 pixels down from the top of its relatively positioned parent. Switching the top value to -20px will then pull the element 20 pixels up from the top of its relatively positioned parent.

While the relative position does accept box offset properties the element still remains in the normal, or static, flow of the page. In this case other elements will not impede on where the relatively positioned element was originally placed. Additionally, the relatively positioned element may overlap, or underlap, other elements without moving them from their default position.

In the demonstration below you will notice that the elements are still stacked on top of one another, however they are shifted from their default positions according to their individual box offset property values. These values cause the boxes to overlap one another, yet do not push each other in different directions. When an element is positioned relatively the surrounding elements will observe the relatively positioned elements default position.

HTML

CSS

box-set {
  background: #eaeaed;
}
.box {
  background: #2db34a;
  height: 80px;
  position: relative;
  width: 80px;
}
.box-1 {
  top: 20px;
}
.box-2 {
  left: 40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}

Position Relative Demo

In the event that the top and bottom box offset properties are both declared on a relatively positioned element, the top properties will take priority. Additionally, if both the left and right box offset properties are declared on a relatively positioned element, priority is given in the direction in which the language of the page is written. For example, in English pages the left offset property is given priority, and for Arabic pages the right offset property is given priority.

Position Absolute

Absolutely positioned elements accept box offset properties, however they are removed from the normal flow of the document. Upon removing the element from the normal flow, elements are positioned directly in relation to their containing parent whom is relatively or absolutely positioned. Should a relatively or absolutely positioned parent not be present, the absolutely positioned element will be positioned in relation to the body of the page.

Using absolutely positioned elements and specifying both vertical and horizontal offset properties will move the element with those property values in relation to its relatively positioned parent. For example, an element with a top value of 50px and a right value of 100px will position the element 50 pixels down from the top of its relatively positioned parent and 100 pixels in from the right of its relatively positioned parent.

Furthermore, using an absolutely positioned element and not specifying any box offset property will position the element in the top left of its closest relatively positioned parent. Setting one box offset property, such as top, will absolutely position the element vertically but will leave the horizontal positioning to the default value of flush left.

In the demonstration below you can see how each box is absolutely positioned in relation to the parent division, of which is relatively positioned. Each individual box is moved in from a specific side with a positive value, or pulled out from a specific side with a negative value.

HTML

CSS

.box-set {
  background: #eaeaed;
  height: 200px;
  position: relative;
}
.box {
  background: #2db34a;
  height: 80px;
  position: absolute;
  width: 80px;
}
.box-1 {
  top: 6%;
  left: 2%;
}
.box-2 {
  top: 0;
  right: -40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}
.box-4 {
  bottom: 0;
}

Position Absolute Demo

When an element has a fixed height and width and is absolutely positioned, the top property takes priority should both the top and bottom offset properties be declared. As with the relatively positioned elements, should an element with a fixed width have both the left and right box offset properties, priority is given to the direction of which the language of the page is written.

If an element doesn’t have a specific height or width and is absolutely positioned, using a combination of the top and bottom box offset properties displays an element with a height spanning the entire specified size. Same goes for using both the left and right box offset properties, resulting in an element with a full width based on both of the left and right box offset properties. Using all four box offset properties will display an element with a full specified height and width.

Position Fixed

Using the positioning value of fixed works just like that of absolute, however the positioning is relative to the browser viewport, and it does not scroll with the page. That said, elements will always be present no matter where a user stands on a page. The only caveat with fixed positioning is that it doesn’t work with Internet Explorer 6. Should you want to force fixed positioning within Internet Explorer 6 there are suitable hacks.

Using multiple box offset properties with fixed positioning will produce the same behaviors as an absolutely positioned element.

Keeping the same box offset properties from the previous demonstration, watch how the boxes are positioned in relation to the browser’s viewport and not the containing, relatively positioned parent.

HTML

CSS

.box {
  background: #2db34a;
  height: 80px;
  position: fixed;
  width: 80px;
}
.box-1 {
  top: 6%;
  left: 2%;
}
.box-2 {
  top: 0;
  right: -40px;
}
.box-3 {
  bottom: -10px;
  right: 20px;
}
.box-4 {
  bottom: 0;
}

Position Fixed Demo

One of the most common uses of fixed positioning is to build a fixed header, or footer, anchored to one side of a page. As a user scrolls the element stays prevalent, always within the viewport for users to interact with.

The code and demonstration below outline how this may be achieved. Notice how both left and right box offset properties are declared. This allows the footer to span the entire width of the bottom of the page, and it does so without disrupting the box model, allowing margins, borders, and padding to be applied freely.

HTML

[code language=”html”]
<footer>Fixed Footer</footer>

CSS

body {
  background: #eaeaed;
}
footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

Z-Index Property

By nature web pages are often considered to be two dimensional, displaying elements upon a x and y axis. However when you begin to position elements they are occasionally placed on top of one another. To change the order of how these elements are stacked, also known as the z-axis, the z-index property is to be used.

Generally, elements are positioned upon the z-axis as they appear within the DOM. Elements coming at the top of the DOM are positioned behind elements coming after them. Changing this stacking using the z-index property is pretty straight forward. The element with the highest z-index value will appear on the top regardless of its placement in the DOM.

In order to apply the z-index property to an element, you must first apply a position value of relative, absolute, or fixed. The same as if you were to apply any box offset properties.

In the example below, without the z-index property each box will be positioned precisely, starting with box two sitting on top of box one, then box three sitting on top of box two, and so forth. Reordering the stacking with the z-index property now positions box two on top of every other box, followed by box three underneath it, and box four underneath box three.

HTML

CSS


  background: #eaeaed;
  height: 160px;
  position: relative;
}
.box {
  background: #2db34a;
  border: 2px solid #ff7b29;
  position: absolute;
}
.box-1 {
  left: 10px;
  top: 10px;
}
.box-2 {
  bottom: 10px;
  left: 70px;
  z-index: 3;
}
.box-3 {
  left: 130px;
  top: 10px;
  z-index: 2;
}
.box-4 {
  bottom: 10px;
  left: 190px;
  z-index: 1;
}

Z-Index Demo

Resources

All About Floats
via CSS-Tricks
Methods for Containing Floats
via Ed Eliot
A New Micro Clearfix Hack
via Nicolas Gallagher
On Having layout
via satzansatz
CSS Positioning 101
via A List Apart
A Detailed Look at the z-index CSS Property
via Impressive Webs

CSS Selectors

https://techbrij.com/css-selector-adjacent-child-sibling

Understand ‘+’, ‘>’ and ‘~’ symbols in CSS Selector

It explains How to use different signs (+,> and ~) in CSS selector and their differences. Before starting, let us take a sample code to understand the signs.

<div id="container">            
   <p>First</p>
    <div>
        <p>Child Paragraph</p>
    </div>
   <p>Second</p>
   <p>Third</p>      
</div>

Space:

div#container p{
font-weight:bold;
}

It is the descendant selector. It will target all p tags within container div.

> Sign:

It will target elements which are DIRECT children of a particular element.

div#container > p {
  border: 1px solid black;
}

It will target all P element which are direct children of container div, not children of child div.

+ Sign:

It is Adjacent sibling combinator. It combines two sequences of simple selectors having the same parent and the second one must come IMMEDIATELY after the first.

div + p {  
   color: green;  
}

It will only select the first element that is immediately preceded by the former selector. In our example, it will target to Second ONLY because the owner P element comes just after Div tag.

~ Sign:

It is general sibling combinator and similar to Adjacent sibling combinator. the difference is that the second selector does NOT have to immediately follow the first one means It will select all elements that is preceded by the former selector.


div ~ p{
background-color:blue;
}

It will target both second and third.

4. Attribute selectors

The CSS attribute selector lets you select all elements by the name or value of a given attribute. Chris Coyer gives this nice example where this HTML line has a rel attribute with the value of "friend" .

<h2 id="title" class="magic" rel="friend">David Walsh</h2>

Using the CSS attribute selector you can select this line based on that value of the rel attribute. It looks like this:

h2[rel="friend"] {
   color: purple;
}

This is very useful for selecting elements like inputs that can have many different types, so using this selector you can select only “checkbox” elements for example. It looks like this.

input[type="checkbox"] {
      color: purple;
}

Or, you can use it to select all images based on a given source.

a[href="https://blog.bitsrc.io"] {
      color: purple;
}

One last important note is that you can play with the operators of the selector, so that for example ”*=” actually means “select if the following value appears anywhere inside the attribute value of the target element”. Read this A+ post.

5. Descendant selector

The descendant selector is the first of the CSS combination selectors family.

This family lets you mix simple selectors with a specified logic. The descendant selector is how you can apply styles to all elements that are descendants of a specified element.

Selecting all <h2> elements nested inside <div> elements looks like this.

div h2 {
  background-color: purple;
}

And, you can chain them. So to select all <a> elements inside <li> elements inside <ul> elements you can do this:

ul li a {
  background-color: purple;
}

And, you can mix it with .class selectors to select elements with a certain class that are inside other elements. This is really quite limitless.

li .class {
  background-color: purple;
}

6. Child selector (combinator)

The child selector is another member of the combination selectors family. It lets you select and apply styles to all elements that are children of a specified element. A great example for why this is useful would be nested elements.

For example, if you have a <ul> that has some items and inside these items, there are new <ol> of items, you might want to select a certain style just for the higher-hierarchy list items but not for the nested list’s items.

Selecting <h2> elements that are children of <div> elements looks like this.

div > h2 {
  background-color: purple;
}

7. Adjacent and general sibling selectors

These two selectors both let you select and style siblings of elements that have the same parent element. This can be useful for example when trying to control style hierarchies for elements throughout the docuemnt. The general sibling selector is pretty straight forward and it selects all elements that are siblings of a specified element.

div ~ p {
  background-color: purple;
}

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Meaning, all elements that immediately follow the specified element. So, for example, you can select all

elements that are placed immediately after

elements:

div + p {
 background-color: purple;
}

8. Pseudo-classes

Pseudo-classes are basically just a fancy name for defining styles based on the state of specified elements. Yes, just like “hover” or “visited” or any other user-driven condition you know. This selector is therefore very useful to apply styles based on element states. The general syntax looks like this.

selector:pseudo-class {
  property:value;
}

For example, styles can change when a user hovers over an element.

div:hover {
  background-color: blue;
}

Or if a link was already clicked before.

/* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

This pseudo-class will only target a user interface element that has been checked — like a radio button, or checkbox. It’s as simple as that.

input[type=radio]:checked {
  border: 1px solid purple;
}

There are many more useful pseudo-classes like popping a tooltip on hover and more. You can check out an extended list with examples here.

There more advanced pseudo-classes such as Relational pseudo-class selectors and even Text-related pseudo-class selectors. To get from zero to hero I’d recommend this really great all-in-one post by Chris Coyier.

Meet the Pseudo Class Selectors | CSS-TricksPseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of…css-tricks.com

9. Pseudo-elements

A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). Here’s the syntax.

selector::pseudo-element {
  property:value;
}

There are currently seven pseudo-elements in CSS. There are others, but they are still considered experimental technology.

For example ::first-line can be used to style the first line of every <p>.

/* The first line of every <p> element. */
p::first-line {
  color: blue;
  text-transform: uppercase;
}

10. nth-of-type and nth-child

The nth-of-type selector lets you select every element that is a specified nth child of a specified type of it parent.

Sounds complicated? It’s really not. For example, the following CSS will select all <li> elements that are the 7th <li> child of their parent elements.

li:nth-of-type(7) {
  color: purple;
}

The :nth-child(*n*) selector matches all elements that are the nth child, regardless of type, of their parents. So, for example, the following CSS will select all the 2nd child elements of all <ul> elements — no matter what type.

ul:nth-child(2) {
  color: purple;
}

Of course, you can also chain them together like so.

div:nth-of-type(3) p:nth-of-child(2) {
  color: purple;
}/* Note that this might not retuen the same result as:div:nth-of-type(3) p:nth-of-type(2) {
  color: purple;
}/* Because in the first you select the 2nd child of any type in the 3rd div, while in the second you select the 2nd <p> in the 3rd div.

11. The star selector *

So every front-end developer knows this as a quick way to reset all browser default styles. Mostly, people think of it in this context.

* {
  margin: 0;   
  padding: 0;
}

Also see: “Using the CSS Star Selector to Zero Out Margins and Paddings”.

But actually, the * selector matches all elements in the DOM. In fact, you’re already using the star selector without knowing it. When you use other selectors like classor element, they already imply the star selector. So this:

ul {}

The parser really sees this.

* ul {}

And if you want to go all out, you can add that border and outline should also be at zero. It looks like this.

* {
  margin: 0;   
  padding: 0;
  border: 0;
  outline: 0;
}

But be warnedthat there are potential downsides to this technique, mainly around performance issues and missing useful default browser styles.

Complex Selectors

https://learn.shayhowe.com/advanced-html-css/complex-selectors/

Lesson 3

Complex Selectors

Selectors are one of, if not, the most important parts of CSS. They shape the cascade and determine how styles are to be applied to elements on a page.

Up until recently the focus of CSS never really touched on selectors. Occasionally there would be incremental updates within the selectors specification, but never any real ground breaking improvements. Fortunately, more attention has been given to selectors as of late, taking a look at how to select different types of elements and elements in different states of use.

CSS3 brought new selectors, opening a whole new world of opportunities and improvements to existing practices. Here we’ll discuss selectors, old and new, and how to best put them to use.

Common Selectors

Before diving too deep into some of the more complex selectors, and those offered within CSS3, let’s take a quick look at some of the more common selectors seen today. These selectors include the type, class, and ID selectors.

The type selector identifies an element based on its type, specifically how that element is declared within HTML. The class selector identifies an element based on its class attribute value, which may be reused on multiple elements as necessary to help share popular styles. Lastly, the ID selector identifies an element based on its ID attribute value, which is unique and should only be used once per page.

CSS

h2 {...}
.tagline {...}
#intro {...}

HTML

<section id="intro">
  <h2>...</h2>
  <h2 class="tagline">...</h2>
</section>

Common Selectors Overview

Example	Classification	Explanation
`h2`	Type Selector	Selects an element by its type
`.tagline`	Class Selector	Selects an element by the class attribute value, which may be reused multiple times per page
`#intro`	ID Selector	Selects an element by the ID attribute value, which is unique and to only be used once per page

Child Selectors

Child selectors provide a way to select elements that fall within one another, thus making them children of their parent element. These selections can be made two different ways, using either descendant or direct child selectors.

Descendant Selector

The most common child selector is the descendant selector, which matches every element that follows an identified ancestor. The descendant element does not have to come directly after the ancestor element inside the document tree, such as a parent-child relationship, but may fall anywhere within the ancestor element. Descendant selectors are created by spacing apart elements within a selector, creating a new level of hierarchy for each element list.

The article h2 selector is a descendant selector, only selecting h2 elements that fall inside of an article element. Notice, no matter where a h2 element lives, so long as it is within the article element, it will always be selected. Additionally, any h2 element outside of the article element is not selected.

Below, the headings on lines 3 and 5 are selected.

CSS

article h2 {...}

HTML

<h2>...</h2>
<article>
  <h2>This heading will be selected</h2>
  <div>
    <h2>This heading will be selected</h2>
  </div>
</article>

Direct Child Selector

Sometimes descendant selectors go a bit overboard, selecting more than hoped. At times only the direct children of a parent element need to be selected, not every instance of the element nested deeply inside of an ancestor. In this event the direct child selector may be used by placing a greater than sign, >, between the parent element and child element within the selector.

For example, article > p is a direct child selector only identifying p elements that fall directly within an article element. Any p element placed outside of an article element, or nested inside of another element other than the article element, will not be selected.

Below, the paragraph on line 3 is the only direct child of its parent article, thus selected.

CSS

article > p {...}

HTML

<p>...</p>
<article>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
</article>

Child Selectors Overview

Example	Classification	Explanation
`article h2`	Descendant Selector	Selects an element that resides anywhere within an identified ancestor element
`article > p`	Direct Child Selector	Selects an element that resides immediately inside an identified parent element

Sibling Selectors

Knowing how to select children of an element is largely beneficial, and quite commonly seen. However sibling elements, those elements that share a common parent, may also need to be selected. These sibling selections can be made by way of the general sibling and adjacent sibling selectors.

General Sibling Selector

The general sibling selector allow elements to be selected based on their sibling elements, those which share the same common parent. They are created by using the tilde character, ~, between two elements within a selector. The first element identifies what the second element shall be a sibling with, and both of which must share the same parent.

The h2 ~ p selector is a general sibling selector that looks for p elements that follow, and share the same parent, of any h2 elements. In order for a p element to be selected it must come after any h2 element.

The paragraphs on lines 5 and 9 are selected as they come after the heading within the document tree and share the same parent as their sibling heading.

CSS

h2 ~ p {...}

HTML

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>This paragraph will be selected</p>
</section>

######

Adjacent Sibling Selector

Occasionally a little more control may be desired, including the ability to select a sibling element that directly follows after another sibling element, which is where the adjacent sibling element comes in. The adjacent sibling selector will only select sibling elements directly following after another sibling element. Instead of using the tilde character, as with general sibling selectors, the adjacent sibling selector uses a plus character, +, between the two elements within a selector. Again, the first element identifies what the second element shall directly follow after and be a sibling with, and both of which must share the same parent.

Looking at the adjacent sibling selector h2 + p only p elements directly following after h2 elements will be selected. Both of which must also share the same parent element.

The paragraph on line 5 is selected as it directly follows after its sibling heading along with sharing the same parent element, thus selected.

CSS

h2 + p {...}

HTML

<p>...</p>
<section>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <div>
    <p>...</p>
  </div>
  <p>...</p>
</section>

Sibling Selectors Example

HTML

<input type="checkbox" id="toggle">
<label for="toggle">&#9776;</label>
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

input {
  display: none;
}
label,
ul {
  border: 1px solid #cecfd5;
  border-radius: 6px;
}
label {
  color: #0087cc;
  cursor: pointer;
  display: inline-block;
  font-size: 18px;
  padding: 5px 9px;
  transition: all .15s ease;
}
label:hover {
  color: #ff7b29;
}
input:checked + label {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  color: #9799a7;
}
nav {
  max-height: 0;
  overflow: hidden;
  transition: all .15s ease;
}
input:checked ~ nav {
  max-height: 500px;
}
ul {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
  width: 100px;
}
li {
  border-bottom: 1px solid #cecfd5;
}
li:last-child {
  border-bottom: 0;
}
a {
  color: #0087cc;
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
a:hover {
  color: #ff7b29;
}

Demo

Sibling Selectors Overview

Example	Classification	Explanation
`h2 ~ p`	General Sibling Selector	Selects an element that follows anywhere after the prior element, in which both elements share the same parent
`h2 + p`	Adjacent Sibling Selector	Selects an element that follows directly after the prior element, in which both elements share the same parent

Attribute Selectors

Some of the common selectors looked at early may also be defined as attribute selectors, in which an element is selected based upon its class or ID value. These class and ID attribute selectors are widely used and extremely powerful but only the beginning. Other attribute selectors have emerged over the years, specifically taking a large leap forward with CSS3. Now elements can be selected based on whether an attribute is present and what its value may contain.

Attribute Present Selector

The first attribute selector identifies an element based on whether it includes an attribute or not, regardless of any actual value. To select an element based on if an attribute is present or not, include the attribute name in square brackets, [], within a selector. The square brackets may or may not follow any qualifier such as an element type or class, all depending on the level of specificity desired.

CSS

a[target] {...}

HTML

<a href="#" target="_blank">...</a>

Attribute Equals Selector

To identify an element with a specific, and exact matching, attribute value the same selector from before may be used, however this time inside of the square brackets following the attribute name, include the desired matching value. Inside the square brackets should be the attribute name followed by an equals sign, =, quotations, "", and inside of the quotations should be the desired matching attribute value.

CSS

a[href="http://google.com/"] {...}

HTML

<a href="http://google.com/">...</a>

Attribute Contains Selector

When looking to find an element based on part of an attribute value, but not an exact match, the asterisk character, *, may be used within the square brackets of a selector. The asterisk should fall just after the attribute name, directly before the equals sign. Doing so denotes that the value to follow only needs to appear, or be contained, within the attribute value.

CSS

a[href*="login"] {...}

HTML

<a href="/login.php">...</a>

Attribute Begins With Selector

In addition to selecting an element based on if an attribute value contains a stated value, it is also possible to select an element based on what an attribute value begins with. Using a circumflex accent, ^, within the square brackets of a selector between the attribute name and equals sign denotes that the attribute value should begin with the stated value.

CSS

a[href^="https://"] {...}

HTML

<a href="https://chase.com/">...</a>

Attribute Ends With Selector

Opposite of the begins with selector, there is also an ends with attribute selector. Instead of using the circumflex accent, the ends with attribute selector uses the dollar sign, $, within the square brackets of a selector between the attribute name and equals sign. Using the dollar sign denotes that the attribute value needs to end with the stated value.

CSS

a[href$=".pdf"] {...}

HTML

<a href="/docs/menu.pdf">...</a>

Attribute Spaced Selector

At times attribute values may be spaced apart, in which only one of the words needs to be matched in order to make a selection. In this event using the tilde character, ~, within the square brackets of a selector between the attribute name and equals sign denotes an attribute value that should be whitespace-separated, with one word matching the exact stated value.

CSS

a[rel~="tag"] {...}

HTML

<a href="#" rel="tag nofollow">...</a>

Attribute Hyphenated Selector

When an attribute value is hyphen-separated, rather than whitespace-separated, the vertical line character, |, may be used within the square brackets of a selector between the attribute name and equals sign. The vertical line denotes that the attribute value may be hyphen-separated however the hyphen-separated words must begin with the stated value.

CSS

a[lang|="en"] {...}

HTML

<a href="#" lang="en-US">...</a>

###

Attribute Selectors Example

HTML

<ul>
  <li><a href="#.pdf">PDF Document</a></li>
  <li><a href="#.doc">Word Document</a></li>
  <li><a href="#.jpg">Image File</a></li>
  <li><a href="#.mp3">Audio File</a></li>
  <li><a href="#.mp4">Video File</a></li>
</ul>

CSS

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  background-position: 0 50%;
  background-repeat: no-repeat;
  color: #0087cc;
  padding-left: 22px;
  text-decoration: none;
}
a:hover {
  color: #ff7b29;
}
a[href$=".pdf"] {
  background-image: url("images/pdf.png");
}
a[href$=".doc"] {
  background-image: url("images/doc.png");
}
a[href$=".jpg"] {
  background-image: url("images/image.png");
}
a[href$=".mp3"] {
  background-image: url("images/audio.png");
}
a[href$=".mp4"] {
  background-image: url("images/video.png");
}

###

Demo

Attribute Selectors Overview

Example	Classification	Explanation
`a[target]`	Attribute Present Selector	Selects an element if the given attribute is present
`a[href="http://google.com/"]`	Attribute Equals Selector	Selects an element if the given attribute value exactly matches the value stated
`a[href*="login"]`	Attribute Contains Selector	Selects an element if the given attribute value contains at least once instance of the value stated
`a[href^="https://"]`	Attribute Begins With Selector	Selects an element if the given attribute value begins with the value stated
`a[href$=".pdf"]`	Attribute Ends With Selector	Selects an element if the given attribute value ends with the value stated
`a[rel~="tag"]`	Attribute Spaced Selector	Selects an element if the given attribute value is whitespace-separated with one word being exactly as stated
`a[lang\|="en"]`	Attribute Hyphenated Selector	Selects an element if the given attribute value is hyphen-separated and begins with the word stated

Pseudo-classes

Pseudo-classes are similar to regular classes in HTML however they are not directly stated within the markup, instead they are dynamically populated as a result of users’ actions or the document structure. The most common pseudo-class, and one you’ve likely seen before, is :hover. Notice how this pseudo-class begins with the colon character, :, as will all other pseudo-classes.

Link Pseudo-classes

Some of the more basic pseudo-classes include two revolving around links specifically. The :link and :visited pseudo-classes define if a link has or hasn’t been visited. To style an anchor which has not been visited the :link pseudo-class comes into play, where the :visited pseudo-class styles links that a user has already visited based on their browsing history.

a:link {...}
a:visited {...}

User Action Pseudo-classes

Based on a users’ actions different pseudo-classes may be dynamically applied to an element, of which include the :hover, :active, and :focus pseudo-classes. The :hover pseudo-class is applied to an element when a user moves their cursor over the element, most commonly used with anchor elements. The :active pseudo-class is applied to an element when a user engages an element, such as clicking on an element. Lastly, the :focus pseudo-class is applied to an element when a user has made an element the focus point of the page, often by using the keyboard to tab from one element to another.

a:hover {...}
a:active {...}
a:focus {...}

User Interface State Pseudo-classes

As with the link pseudo-classes there are also some pseudo-classes generated around the user interface state of elements, particularly within form elements. These user interface element state pseudo-classes include :enabled, :disabled, :checked, and :indeterminate.

The :enabled pseudo-class selects an input that is in the default state of enabled and available for use, where the :disabled pseudo-class selects an input that has the disabled attribute tied to it. Many browsers by default will fade out disabled inputs to inform users that the input is not available for interaction, however those styles may be adjusted as wished with the :disabled pseudo-class.

input:enabled {...}
input:disabled {...}

The last two user interface element state pseudo-classes of :checked and :indeterminate revolve around checkbox and radio button input elements. The :checked pseudo-class selects checkboxes or radio buttons that are, as you may expect, checked. When a checkbox or radio button has neither been selected nor unselected it lives in an indeterminate state, from which the :indeterminate pseudo-class can be used to target these elements.

input:checked {...}
input:indeterminate {...}

Structural & Position Pseudo-classes

A handful of pseudo-classes are structural and position based, in which they are determined based off where elements reside in the document tree. These structural and position based pseudo-classes come in a few different shapes and sizes, each of which provides their own unique function. Some pseudo-classes have been around longer than others, however CSS3 brought way of an entire new set of pseudo-classes to supplement the existing ones.

:first-child, :last-child, & :only-child

The first structural and position based pseudo-classes one is likely to come across are the :first-child, :last-child, and :only-child pseudo-classes. The :first-child pseudo-class will select an element if it’s the first child within its parent, while the :last-child pseudo-class will select an element if it’s the last element within its parent. These pseudo-classes are prefect for selecting the first or last items in a list and so forth. Additionally, the :only-child will select an element if it is the only element within a parent. Alternately, the :only-child pseudo-class could be written as :first-child:last-child, however :only-child holds a lower specificity.

Here the selector li:first-child identifies the first list item within a list, while the selector li:last-child identifies the last list item within a list, thus lines 2 and 10 are selected. The selector div:only-child is looking for a division which is the single child of a parent element, without any other other siblings. In this case line 4 is selected as it is the only division within the specific list item.

CSS

li:first-child {...}
li:last-child {...}
div:only-child {...}

HTML

<ul>
  <li>This list item will be selected</li>
  <li>
    <div>This div will be selected</div>
  </li>
  <li>
    <div>...</div>
    <div>...</div>
  </li>
  <li>This list item will be selected</li>
</ul>

:first-of-type, :last-of-type, & :only-of-type

Finding the first, last, and only children of a parent is pretty helpful, and often all that is needed. However sometimes you only want to select the first, last, or only child of a specific type of element. For example, should you only want to select the first or last paragraph within an article, or perhaps the only image within an article. Fortunately this is where the :first-of-type, :last-of-type, and :only-of-type pseudo-selectors come into place.

The :first-of-type pseudo-class will select the first element of its type within a parent, while the :last-of-type pseudo-class will select the last element of its type within a parent. The :only-of-type pseudo-class will select an element if it is the only of its type within a parent.

In the example below the p:first-of-type and p:last-of-type pseudo-classes select the first and last paragraphs within the article respectively, regardless if they are actually the first or last children within the article. Lines 3 and 6 are selected, reflecting these selectors. The img:only-of-type selector identifies the image on line 5 as it is the only image to appear within the article, thus also selected.

CSS

p:first-of-type {...}
p:last-of-type {...}
img:only-of-type {...}

HTML

######

<article>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <p>...</p>
  <img src="#"><!-- This image will be selected -->
  <p>This paragraph will be selected</p>
  <h6>...</h6>
</article>

###

Lastly there are a few structural and position based pseudo-classes that select elements based on a number or an algebraic expression. These pseudo-classes include :nth-child(n), :nth-last-child(n), :nth-of-type(n), and :nth-last-of-type(n). All of these unique pseudo-classes are prefixed with nth and accept a number or expression inside of the parenthesis, indicated by the character n argument.

The number or expression that falls within the parenthesis determines exactly what element, or elements, are to be selected. Using a number outright will count individual elements from the beginning or end of the document tree and then select one element, while using an expression will count numerous elements from the beginning or end of the document tree and select them in groups or multiples.

Using Pseudo-class Numbers & Expressions

As mentioned, using numbers outright within a pseudo-class will count from the beginning, or end, of the document tree and select one element accordingly. For example, the li:nth-child(4) selector will select the fourth list item within a list. Counting begins with the first list item and increases by one for each list item, until finally locating and selecting the fourth item. When using a number outright it must be a positive number.

Expressions for pseudo-classes fall in the format of *a*n, *a*n+*b*, *a*n-*b*, n+*b*, *-*n+*b*, and *-a*n+*b*. The same expression may be translated and read as (a×n)±b. The a variable stands for the multiplier in which elements will be counted in while the b variable stands for where the counting will begin or take place.

For example, the li:nth-child(3n) selector will identify every third list item within a list. Using the expression this equates to 3×0, 3×1, 3×2, and so forth. As you can see the results of this expression lead to the third, sixth, and every element a multiple of three being selected.

Additionally, the odd and even keyword values may be used. As expected, these will select odd or even elements respectively. Should keyword values not be appealing the expression of 2n+1 would select all odd elements while the expression of 2n would select all even elements.

Using the li:nth-child(4n+7) selector will identify every fourth list item starting with the seventh list item. Again, using the expression this equates to (4×0)+7, (4×1)+7, (4×2)+7, and so forth. The results of this expression leading to the seventh, eleventh, fifteenth, and every element that is a multiple of four here on out being selected.

Using the n argument without being prefixed by a number results in the a variable being interpreted as 1. With the li:nth-child(n+5) selector every list item will be selected starting with the fifth list item, leaving the first four list items unselected. Within the expression this breaks down as (1×0)+5, (1×1)+5, (1×2)+5, and so forth.

To make things a bit more complicated negative numbers may also be used. For example, the li:nth-child(6n-4) selector will start counting every sixth list item starting at negative four, selecting the second, eighth, and fourteenth list items and so forth. The same selector, li:nth-child(6n-4), could also be written as li:nth-child(6n+2), without the use of a negative b variable.

A negative a variable, or a negative n argument, must be followed by a positive b variable. When preceded by a negative a variable or negative n argument the b variable identifies how high the counting will reach. For example, the li:nth-child(-3n+12) selector will select every third list item within the first twelve list items. The selector li:nth-child(-n+9) will select the first nine list items within a list, as the n argument, without any stated a variable, is defaulted to -1.

:nth-child(n) & :nth-last-child(n)

With a general understanding of how the pseudo-class numbers and expressions work let’s take a look at the actual pseudo-classes in which these numbers and expressions may be used, the first of which being the :nth-child(n) and :nth-last-child(n) pseudo-classes. These pseudo-classes work a bit like the :first-child and :last-child pseudo-classes in that they look, and count, all of the elements within a parent and only select the element specifically identified. The :nth-child(n) works from the beginning of the document tree while the :nth-last-child(n) works from the end of the document tree.

Using the :nth-child(n) pseudo-class, let’s look at the li:nth-child(3n) selector. The selector here will identify every third list item, thus lines 4 and 7 are selected.

CSS

li:nth-child(3n) {...}

HTML

######

<ul>
  <li>...</li>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
  <li>...</li>
  <li>This list item will be selected</li>
</ul>

Using a different expression within the :nth-child(n) pseudo-class will yield a different selection. The li:nth-child(2n+3) selector, for example, will identify every second list item starting with the third and then onward. As a result, the list items lines 4 and 6 are selected.

CSS

li:nth-child(2n+3) {...}

HTML

######

<ul>
  <li>...</li>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
</ul>

###

Changing the expression again, this time with a negative value, yields new selection. Here the li:nth-child(-n+4) selector is identifying the top four list items, leaving the rest of the list items unselected, thus lines 2 through 5 are selected.

CSS

li:nth-child(-n+4) {...}

HTML

######

<ul>
  <li>This list item will be selected</li>
  <li>This list item will be selected</li>
  <li>This list item will be selected</li>
  <li>This list item will be selected</li>
  <li>...</li>
  <li>...</li>
</ul>

Adding a negative integer before the n argument changes the selection again. Here the li:nth-child(-2n+5) selector identifies every second list item within the first five list items starting with the first list item, thus the list items on lines 2, 4, and 6 are selected.

CSS

li:nth-child(-2n+5) {...}

HTML

######

<ul>
  <li>This list item will be selected</li>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
</ul>

Changing from the :nth-child(n) pseudo-class to the :nth-last-child(n) pseudo-class switches the direction of counting, with counting starting from the end of the document tree using the :nth-last-child(n) pseudo-class. The li:nth-last-child(3n+2) selector, for example, will identify every third list item starting from the second to last item in a list, moving towards the beginning of the list. Here the list items on lines 3 and 6 are selected.

CSS

li:nth-last-child(3n+2) {...}

HTML

######

<ul>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
  <li>...</li>
  <li>This list item will be selected</li>
  <li>...</li>
</ul>

:nth-of-type(n) & :nth-last-of-type(n)

The :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes are very similar to that of the :nth-child(n) and :nth-last-child(n) pseudo-classes, however instead of counting every element within a parent the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes only count elements of their own type. For example, when counting paragraphs within an article, the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes will skip any headings, divisions, or miscellaneous elements that are not paragraphs, while the :nth-child(n) and :nth-last-child(n) would count every element, no matter its type, only selecting the ones that match the element within the stated selector. Additionally, all of the same expression possibilities used within the :nth-child(n) and :nth-last-child(n) pseudo-classes are also available within the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes.

Using the :nth-of-type(n) pseudo-class within the p:nth-of-type(3n) selector we are able to identify every third paragraph within a parent, regardless of other sibling elements within the parent. Here the paragraphs on lines 5 and 9 are selected.

CSS

p:nth-of-type(3n) {...}

HTML

######

<article>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <p>This paragraph will be selected</p>
  <h2>...</h2>
  <p>...</p>
  <p>...</p>
  <p>This paragraph will be selected</p>
</article>

As with the :nth-child(n) and :nth-last-child(n) pseudo-classes, the primary difference between the :nth-of-type(n) and :nth-last-of-type(n) pseudo-classes is that the :nth-of-type(n) pseudo-class counts elements from the beginning of the document tree and the :nth-last-of-type(n) pseudo-class counts elements from the end of the document tree.

Using the :nth-last-of-type(n) pseudo-class we can write the p:nth-last-of-type(2n+1) selector which identifies every second paragraph from the end of a parent element starting with the last paragraph. Here the paragraphs on lines 4, 7, and 9 are selected.

CSS

p:nth-last-of-type(2n+1) {...}

HTML

<article>
  <h2>...</h2>
  <p>...</p>
  <p>This paragraph will be selected</p>
  <p>...</p>
  <h2>...</h2>
  <p>This paragraph will be selected</p>
  <p>...</p>
  <p>This paragraph will be selected</p>
</article>

Target Pseudo-class

The :target pseudo-class is used to style elements when an element’s ID attribute value matches that of the URI fragment identifier. The fragment identifier within a URI can be recognized by the hash character, #, and what directly follows it. The URL http://example.com/index.html#hello includes the fragment identifier of hello. When this identifier matches the ID attribute value of an element on the page, <section id="hello"> for example, that element may be identified and stylized using the :target pseudo-class. Fragment identifiers are most commonly seen when using on page links, or linking to another part of the same page.

Looking at the code below, if a user would visit a page with the URI fragment identifier of #hello, the section with that same ID attribute value would be stylized accordingly using the :target pseudo-class. If the URI fragment identifier changes, and matches the ID attribute value of another section, that new section may be stylized using the same selector and pseudo-class from before.

CSS

section:target {...}

HTML

<section id="hello">...</section>

###

Empty Pseudo-class

The :empty pseudo-class allows elements that do not contain children or text nodes to be selected. Comments, processing instructions, and empty text nodes are not considered children and are not treated as such.

Using the div:empty pseudo-class will identify divisions without any children or text nodes. Below the divisions on lines 2 and 3 are selected, as they are completely empty. Even though the second division contains a comment, it is not considered to be a child, thus leaving the division empty. The first division contains text, the fourth division contains one blank text space, and the last division contains a strong child element, thus they are all ruled out and are not selected.

CSS

div:empty {...}

HTML

<div>Hello</div>
<div><!-- Coming soon --></div><!-- This div will be selected -->
<div></div><!-- This div will be selected -->
<div> </div>
<div><strong></strong></div>

###

Negation Pseudo-class

The negation pseudo-class, :not(x), is a pseudo-class that takes an argument which is filtered out from the selection to be made. The p:not(.intro) selector uses the negation pseudo-class to identify every paragraph element without the class of intro. The paragraph element is identified at the beginning of the selector followed by the :not(x) pseudo-class. Inside of the parentheses falls the negation selector, the class of .intro in this case.

Below, both the div:not(.awesome) and :not(div) selectors use the :not(x) pseudo-class. The div:not(.awesome) selector identifies any division without the class of awesome, while the :not(div) selector identifies any element that isn’t a division. As a result the, division on line 1 is selected, as well as the two sections on lines 3 and 4, thus they are marked bold. The only element not selected is the division with the class of awesome, as it falls outside of the two negation pseudo-classes.

CSS

div:not(.awesome) {...}
:not(div) {...}

HTML

<div>This div will be selected</div>
<div class="awesome">...</div>
<section>This section will be selected</section>
<section class="awesome">This section will be selected</section>

###

Pseudo-classes Example

HTML

<table>
  <thead>
    <tr>
      <th>Number</th>
      <th>Player</th>
      <th>Position</th>
      <th>Height</th>
      <th>Weight</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>8</td>
      <td>Marco Belinelli</td>
      <td>G</td>
      <td>6-5</td>
      <td>195</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Carlos Boozer</td>
      <td>F</td>
      <td>6-9</td>
      <td>266</td>
    </tr>
    ...
  </tbody>
</table>

###

CSS

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
th,
td {
  padding: 6px 15px;
}
th {
  background: #42444e;
  color: #fff;
  text-align: left;
}
tr:first-child th:first-child {
  border-top-left-radius: 6px;
}
tr:first-child th:last-child {
  border-top-right-radius: 6px;
}
td {
  border-right: 1px solid #c6c9cc;
  border-bottom: 1px solid #c6c9cc;
}
td:first-child {
  border-left: 1px solid #c6c9cc;
}
tr:nth-child(even) td {
  background: #eaeaed;
}
tr:last-child td:first-child {
  border-bottom-left-radius: 6px;
}
tr:last-child td:last-child {
  border-bottom-right-radius: 6px;
}

Demo

Pseudo-classes Overview

Example	Classification	Explanation
`a:link`	Link Pseudo-class	Selects a link that has not been visited by a user
`a:visited`	Link Pseudo-class	Selects a link that has been visited by a user
`a:hover`	Action Pseudo-class	Selects an element when a user has hovered their cursor over it
`a:active`	Action Pseudo-class	Selects an element when a user has engaged it
`a:focus`	Action Pseudo-class	Selects an element when a user has made it their focus point
`input:enabled`	State Pseudo-class	Selects an element in the default enabled state
`input:disabled`	State Pseudo-class	Selects an element in the disabled state, by way of the disabled attribute
`input:checked`	State Pseudo-class	Selects a checkbox or radio button that has been checked
`input:indeterminate`	State Pseudo-class	Selects a checkbox or radio button that neither been checked or unchecked, leaving it in an indeterminate state
`li:first-child`	Structural Pseudo-class	Selects an element that is the first within a parent
`li:last-child`	Structural Pseudo-class	Selects an element that is the last within a parent
`div:only-child`	Structural Pseudo-class	Selects an element that is the only element within a parent
`p:first-of-type`	Structural Pseudo-class	Selects an element that is the first of its type within a parent
`p:last-of-type`	Structural Pseudo-class	Selects an element that is the last of its type within a parent
`img:only-of-type`	Structural Pseudo-class	Selects an element that is the only of its type within a parent
`li:nth-child(2n+3)`	Structural Pseudo-class	Selects an element that matches the given number or expression, counting all elements from the beginning of the document tree
`li:nth-last-child(3n+2)`	Structural Pseudo-class	Selects an element that matches the given number or expression, counting all elements from the end of the document tree
`p:nth-of-type(3n)`	Structural Pseudo-class	Selects an element that matches the given number or expression, counting only elements of its type from the beginning of the document tree
`p:nth-last-of-type(2n+1)`	Structural Pseudo-class	Selects an element that matches the given number or expression, counting only elements of its type from the end of the document tree
`section:target`	Target Pseudo-class	Selects an element whose ID attribute value matches that of the URI fragment identifier
`div:empty`	Empty Pseudo-class	Selects an element that does not contain any children or text nodes
`div:not(.awesome)`	Negation Pseudo-class	Selects an element not represented by the stated argument

Pseudo-elements

Pseudo-elements are dynamic elements that don’t exist in the document tree, and when used within selectors these pseudo-elements allow unique parts of the page to be stylized. One important point to note, only one pseudo-element may be used within a selector at a given time.

Textual Pseudo-elements

The first pseudo-elements ever released were the :first-letter and :first-line textual pseudo-elements. The :first-letter pseudo-element will identify the first letter of text within an element, while the :first-line pseudo-element will identify the first line of text within an element.

In the demonstration below the first letter of the paragraph with the class of alpha is set in a larger font size and colored orange, as is the first line of the paragraph with the class of bravo. These selections are made by use of the :first-letter and :first-line textual pseudo-elements respectively.

CSS

.alpha:first-letter,
.bravo:first-line {
  color: #ff7b29;
  font-size: 18px;
}

HTML

<p class="alpha">Lorem ipsum dolor...</p>
<p class="bravo">Integer eget enim...</p>

###

Textual Pseudo-elements Demo

Generated Content Pseudo-elements

The :before and :after generated content pseudo-elements create new inline level pseudo-elements just inside the selected element. Most commonly these pseudo-elements are used in conjunction with the content property to add insignificant information to a page, however that is not always the case. Additional uses of these psuedo-elements may be to add user interface components to the page without having to clutter the document with unsemantic elements.

The :before pseudo-element creates a pseudo-element before, or in front of, the selected element, while the :after pseudo-element creates a pseudo-element after, or behind, the selected element. These pseudo-elements appear nested within the selected element, not outside of it. Below the :after pseudo-element is used to display the href attribute value of anchor links within parentheses after the actual links. The information here is helpful, but not ultimately necessary should a browser not support these pseudo-elements.

CSS

a:after {
  color: #9799a7;
  content: " (" attr(href) ")";
  font-size: 11px;
}

HTML

<a href="http://google.com/">Search the Web</a>
<a href="http://learn.shayhowe.com/">Learn How to Build Websites</a>

###

Generated Content Pseudo-elements Demo

Fragment Pseudo-element

The ::selection fragment pseudo-element identifies part of the document that has been selected, or highlighted, by a user’s actions. The selection may then be stylized, however only using the color, background, background-color, and text-shadow properties. It is worth noting, the background-image property is ignore. While the shorthand background property may be used to add a color, any images will be ignored.

Single Colon (:) versus Double Colons (::)

The fragment pseudo-element was added with CSS3 and in attempt to differentiate pseudo-classes from pseudo-elements the double colons were added to pseudo-elements. Fortunately most browsers will support both values, single or double colons, for pseudo-elements however the ::selection pseudo-element must always start with double colons.

When selecting any of the text within the demonstration below the background will appear orange and any text shadows will be removed thanks to the ::selection fragment pseudo-element. Also note, the ::-moz-selection Mozilla prefixed fragment pseudo-element has been added to ensure the best support for all browsers.

CSS

::-moz-selection {
    background: #ff7b29;
}
::selection {
  background: #ff7b29;
}

`

Fragment Pseudo-element Demo

Pseudo-elements Example

HTML

<a class="arrow" href="#">Continue Reading</a>

###

CSS

.arrow {
  background: #2db34a;
  color: #fff;
  display: inline-block;
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  position: relative;
  text-decoration: none;
}
.arrow:before,
.arrow:after {
  content: "";
  height: 0;
  position: absolute;
  width: 0;
}
.arrow:before {
  border-bottom: 15px solid #2db34a;
  border-left: 15px solid transparent;
  border-top: 15px solid #2db34a;
  left: -15px;
}
.arrow:after {
  border-bottom: 15px solid transparent;
  border-left: 15px solid #2db34a;
  border-top: 15px solid transparent;
  right: -15px;
}
.arrow:hover {
  background: #ff7b29;
}
.arrow:hover:before {
  border-bottom: 15px solid #ff7b29;
  border-top: 15px solid #ff7b29;
}
.arrow:hover:after {
  border-left: 15px solid #ff7b29;
}

Demo

Pseudo-elements Overview

Example	Classification	Explanation
`.alpha:first-letter`	Textual Pseudo-elements	Selects the first letter of text within an element
`.bravo:first-line`	Textual Pseudo-elements	Selects the first line of text within an element
`div:before`	Generated Content	Creates a pseudo-element inside the selected element at the beginning
`a:after`	Generated Content	Creates a pseudo-element inside the selected element at the end
`::selection`	Fragment Pseudo-element	Selects the part of a document which has been selected, or highlighted, by a users’ actions

Selector Browser Support

While these selectors provide a variety of opportunity and the ability to do some truly amazing things with CSS, they are at times plagued by poor browser support. Before doing anything too critical check the selectors you are wishing to use across your visitor’s most common browsers, and then make the judgment call as to whether they are appropriate or not.

CSS3.info provides a CSS3 Selectors Test tool which will inform you as to which selectors are supported by the browser in use. It’s also never a bad idea to check browser support directly from the vendor.

Additionally, Selectivizr, a JavaScript utility, provides great support for these selectors in Internet Explorer 6-8. More support, should it be necessary, can also be provided by jQuery selectors.

Selector Speed & Performance

It is important to pay attention the speed and performance of selectors, as using too many intricate selectors can slow down the rendering of a page. Be attentive and when a selector begins to look a bit foreign think about revisiting it, and seeing if a better solution can be found.

Resources & Links

The 30 CSS Selectors you Must Memorize via Nettuts+
Child and Sibling Selectors via CSS-Tricks
CSS3 Substring Matching Attribute Selectors via CSS3.info
How To Use CSS3 Pseudo-Classes via Smashing Magazine
Understanding :nth-child Pseudo-class Expressions via SitePoint
Taming Advanced CSS Selectors via Smashing Magazine

Responsive Design

https://learn.shayhowe.com/advanced-html-css/responsive-web-design/

The Internet took off quicker than anyone would have predicted, growing like crazy. Now, for the past few years, mobile growth has exploded onto the scene. The growth of mobile Internet usage is also far out pacing that of general Internet usage growth.

These days it is hard to find someone who doesn’t own a mobile device, or multiple, connected to the Internet. In the UK there are more mobile phones than people, and should trends continue mobile Internet usage will surpass that of desktop Internet usage within the year.

With the growth in mobile Internet usage comes the question of how to build websites suitable for all users. The industry response to this question has become responsive web design, also known as RWD.

Responsive Overview

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

The responsive web design term itself was coined, and largely developed, by Ethan Marcotte. A lot of what is covered in this lesson was first talked about by Ethan online and in his book Responsive Web Design, which is worth a read.

Fig. 4

Food Sense has a beautiful website, responsive to all different viewport sizes. No matter how large or small the viewport may be the Food Sense website adjust, creating a natural user experience.

Responsive vs. Adaptive vs. Mobile

For some the term responsive may not be new, and others might be even more acquainted with the terms adaptive or mobile. Which may leave you wondering what exactly is the difference between all of them.

Responsive and adaptive web design are closely related, and often transposed as one in the same. Responsive generally means to react quickly and positively to any change, while adaptive means to be easily modified for a new purpose or situation, such as change. With responsive design websites continually and fluidly change based on different factors, such as viewport width, while adaptive websites are built to a group of preset factors. A combination of the two is ideal, providing the perfect formula for functional websites. Which term is used specifically doesn’t make a huge difference.

Mobile, on the other hand, generally means to build a separate website commonly on a new domain solely for mobile users. While this does occasionally have its place, it normally isn’t a great idea. Mobile websites can be extremely light but they do come with the dependencies of a new code base and browser sniffing, all of which can become an obstacle for both developers and users.

Currently the most popular technique lies within responsive web design, favoring design that dynamically adapts to different browser and device viewports, changing layout and content along the way. This solution has the benefits of being all three, responsive, adaptive, and mobile.

Flexible Layouts

Responsive web design is broken down into three main components, including flexible layouts, media queries, and flexible media. The first part, flexible layouts, is the practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. These relative lengths are then used to declare common grid property values such as width, margin, or padding.

Relative Viewport Lengths

CSS3 introduced some new relative length units, specifically related to the viewport size of the browser or device. These new units include vw, vh, vmin, and vmax. Overall support for these new units isn’t great, but it is growing. In time they look to play a large roll in building responsive websites.

vw
Viewports width
vh
Viewports height
vmin
Minimum of the viewport’s height and width
vmax
Maximum of the viewport’s height and width

Flexible layouts do not advocate the use of fixed measurement units, such as pixels or inches. Reason being, the viewport height and width continually change from device to device. Website layouts need to adapt to this change and fixed values have too many constraints. Fortunately, Ethan pointed out an easy formula to help identify the proportions of a flexible layout using relative values.

The formula is based around taking the target width of an element and dividing it by the width of it’s parent element. The result is the relative width of the target element.

1 2target ÷ context = result

Flexible Grid

Let’s see how this formula works inside of a two column layout. Below we have a parent division with the class of container wrapping both the section and aside elements. The goal is to have have the section on the left and the aside on the right, with equal margins between the two. Normally the markup and styles for this layout would look a bit like the following.

HTML

1 2 3 4 5<div class="container">  <section>...</section>  <aside>...</aside> </div>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16.container {  width: 538px; } section, aside {  margin: 10px; } section {  float: left;  width: 340px; } aside {  float: right;  width: 158px; }

Fixed Grid Demo

Using the flexible grid formula we can take all of the fixed units of length and turn them into relative units. In this example we’ll use percentages but em units would work equally as well. Notice, no matter how wide the parent container becomes, the section and aside margins and widths scale proportionally.

1 2 3 4 5 6 7 8 9 10 11 12 13section, aside {  margin: 1.858736059%; /*  10px ÷ 538px = .018587361 */ } section {  float: left;  width: 63.197026%;    /* 340px ÷ 538px = .63197026 */    } aside {  float: right;  width: 29.3680297%;  /* 158px ÷ 538px = .293680297 */ }

Flexible Grid Demo

Taking the flexible layout concept, and formula, and reapplying it to all parts of a grid will create a completely dynamic website, scaling to every viewport size. For even more control within a flexible layout, you can also leverage the min-width, max-width, min-height, and max-height properties.

The flexible layout approach alone isn’t enough. At times the width of a browser viewport may be so small that even scaling the the layout proportionally will create columns that are too small to effectively display content. Specifically, when the layout gets too small, or too large, text may become illegible and the layout may begin to break. In this event, media queries can be used to help build a better experience.

Media Queries

Media queries were built as an extension to media types commonly found when targeting and including styles. Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Being able to apply uniquely targeted styles opens up a world of opportunity and leverage to responsive web design.

Initializing Media Queries

There are a couple different ways to use media queries, using the @media rule inside of an existing style sheet, importing a new style sheet using the @import rule, or by linking to a separate style sheet from within the HTML document. Generally speaking it is recommend to use the @media rule inside of an existing style sheet to avoid any additional HTTP requests.

HTML

1 2 3<!-- Separate CSS File --> <link href="styles.css" rel="stylesheet" media="all and (max-width: 1024px)">

CSS

1 2 3 4 5 6/* @media Rule */ @media all and (max-width: 1024px) {...} /* @import Rule */ @import url(styles.css) all and (max-width: 1024px) {...}

Each media query may include a media type followed by one or more expressions. Common media types include all, screen, print, tv, and braille. The HTML5 specification includes new media types, even including 3d-glasses. Should a media type not be specified the media query will default the media type to screen.

The media query expression that follows the media type may include different media features and values, which then allocate to be true or false. When a media feature and value allocate to true, the styles are applied. If the media feature and value allocate to false the styles are ignored.

Logical Operators in Media Queries

Logical operators in media queries help build powerful expressions. There are three different logical operators available for use within media queries, including and, not, and only.

Using the and logical operator within a media query allows an extra condition to be added, making sure that a browser or devices does both a, b, c, and so forth. Multiple individual media queries can be comma separated, acting as an unspoken or operator. The example below selects all media types between 800 and 1024 pixels wide.

1 2@media all and (min-width: 800px) and (max-width: 1024px) {...}

The not logical operator negates the query, specifying any query but the one identified. In the example below the expression applies to any device that does not have a color screen. Black and white or monochrome screens would apply here for example.

1 2@media not screen and (color) {...}

The only logical operator is a new operator and is not recognized by user agents using the HTML4 algorithm, thus hiding the styles from devices or browsers that don’t support media queries. Below, the expression selects only screens in a portrait orientation that have a user agent capable of rending media queries.

1 2@media only screen and (orientation: portrait) {...}

Omitting a Media Type

When using the not and only logical operators the media type may be left off. In this case the media type is defaulted to all.

Media Features in Media Queries

Knowing the media query syntax and how logical operators work is a great introduction to media queries but the true work comes with media features. Media features identify what attributes or properties will be targeted within the media query expression.

Height & Width Media Features

One of the most common media features revolves around determining a height or width for a device or browser viewport. The height and width may be found by using the height and width media features. Each of these media features may then also be prefixed with the min or max qualifiers, building a feature such as min-width or max-width.

The height and width features are based off the height and width of the viewport rendering area, the browser window for example. Values for these height and width media features may be any length unit, relative or absolute.

1 2@media all and (min-width: 320px) and (max-width: 780px) {...}

Within responsive design the most commonly used features include min-width and max-width. These help build responsive websites on desktops and mobile devices equally, avoiding any confusion with device features.

Using Minimum & Maximum Prefixes

The min and max prefixes can be used on quite a few media features. The min prefix indicates a values of greater than or equal to while the max prefix indicates a value of less than or equal to. Using min and max prefixes avoid any conflict with the general HTML syntax, specifically not using the < and > symbols.

Orientation Media Feature

The orientation media feature determines if a device is in the landscape or portrait orientation. The landscape mode is triggered when the display is wider than taller, and the portrait mode is triggered when the display is taller than wider. This media feature plays a large part with mobile devices.

1 2@media all and (orientation: landscape) {...}

Aspect Ratio Media Features

The aspect-ratio and device-aspect-ratio features specifies the width/height pixel ratio of the targeted rendering area or output device. The min and max prefixes are available to use with the different aspect ratio features, identifying a ratio above or below that of which is stated.

The value for the aspect ratio feature consist of two positive integers separated by a forward slash. The first integer identifies the width in pixels while the second integer identifies the height in pixels.

1 2@media all and (min-device-aspect-ratio: 16/9) {...}

Pixel Ratio Media Features

In addition to the aspect ratio media features there are also pixel-ratio media features. These features do include the device-pixel-ratio feature as well as min and max prefixes. Specifically, the pixel ratio feature is great for identifying high definition devices, including retina displays. Media queries for doing so look like the following.

1 2@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3) {...}

Resolution Media Feature

The resolution media feature specifies the resolution of the output device in pixel density, also known as dots per inch or DPI. The resolution media feature does accept the min and max prefixes. Additionally, the resolution media feature will accept dots per pixel (1.3dppx), dots per centimeter (118dpcm), and other length based resolution values.

1 2@media print and (min-resolution: 300dpi) {...}

Other Media Features

Other media features include identifying available output colors with use of the color, color-index, and monochrome features, identifying bitmap devices with the grid feature, and identifying the scanning process of a television with the scan feature. These features are less common but equally as helpful when needed.

Media Query Browser Support

Unfortunately media queries do not work within Internet Explorer 8 and below, as well as other legacy browsers. There are, however, a couple suitable polyfills written in Javascript.

Respond.js is a lightweight polyfill that only looks for min/max-width media types, which is perfect should those be the only media query types used. CSS3-MediaQueries.js is a more developed, and heavier, polyfill offering support for a larger array of more complex media queries. Additionally, keep in mind any polyfill can have performance concerns, and potentially slow down websites. Make sure that any given polyfill is worth the performance trade off.

Media Queries Demo

Using media queries we will now rewrite the flexible layout we built previously. One of the current problems within the demo appears when the aside width becomes uselessly small within smaller viewports. Adding a media query for viewports under 420 pixels wide we can change the layout by turning off the floats and changing the widths of the section and aside.

1 2 3 4 5 6 7@media all and (max-width: 420px) {  section, aside {    float: none;    width: auto;  } }

Fig. 4

Without any media queries the section and aside become quite small. Perhaps too small to even contain any real content.

Fig. 4

Using media queries to remove the floats and change their widths, the section and aside are now able to span the full width of the viewport, allowing breathing room for any existing content.

Identifying Breakpoints

Your instinct might be to write media query breakpoints around common viewport sizes as determined by different device resolutions, such as 320px, 480px, 768px, 1024px, 1224px, and so forth. This is a bad idea.

When building a responsive website it should adjust to an array of different viewport sizes, regardless of the device. Breakpoints should only be introduced when a website starts to break, look weird, or the experience is being hampered.

Additionally, new devices and resolutions are being released all of the time. Trying to keep up with these changes could be an endless process.

Mobile First

One popular technique with using media queries is called mobile first. The mobile first approach includes using styles targeted at smaller viewports as the default styles for a website, then use media queries to add styles as the viewport grows.

The operating belief behind mobile first design is that a user on a mobile device, commonly using a smaller viewport, shouldn’t have to load the styles for a desktop computer only to have them over written with mobile styles later. Doing so is a waste of bandwidth. Bandwidth that is precious to any users looking for a snappy website.

The mobile first approach also advocates designing with the constraints of a mobile user in mind. Before too long, the majority of Internet consumption will be done on a mobile device. Plan for them accordingly and develop intrinsic mobile experiences.

A breakout of mobile first media queries might look at bit like the following.

1 2 3 4 5 6/* Default styles first then media queries */ @media screen and (min-width: 400px)  {...} @media screen and (min-width: 600px)  {...} @media screen and (min-width: 1000px) {...} @media screen and (min-width: 1400px) {...}

Additionally, downloading unnecessary media assets can be stopped by using media queries. Generally speaking, avoiding CSS3 shadows, gradients, transforms, and animations within mobile styles isn’t a bad idea either. When used excessively, they cause heavy loading and can even reduce a device’s battery life.

1 2 3 4 5 6 7 8 9 10 11/* Default media */ body {  background: #ddd; } /* Media for larger devices */ @media screen and (min-width: 800px) {  body {    background-image: url("bg.png") 50% 50% no-repeat;  } }

Mobile First Demo

Adding media queries to our previous example, we overwrote a handful of styles in order to have a better layout on viewports under 420 pixels wide. Rewriting this code to use the mobile styles first by default then adding media queries to adjust for viewports over 420 pixels wide we build the following:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18section, aside {  margin: 1.858736059%; } @media all and (min-width: 420px) {  .container {    max-width: 538px;  }  section {    float: left;    width: 63.197026%;  }  aside {    float: right;    width: 29.3680297%;  } }

Mobile First Demo

Notice, this is the same amount of code as before. The only exception here is that mobile devices only have to render only one CSS declaration. All of the other styles are deferred, only loading on larger viewports and done so without overwriting any initial styles.

Viewport

Mobile devices generally do a pretty decent job of displaying websites these days. Sometimes they could use a little assistance though, particularly around identifying the viewport size, scale, and resolution of a website. To remedy this, Apple invented the viewport meta tag.

Fig. 4

Although this demo has media queries, many mobile devices still do not know the initial width or scale of the website. Therefore, they may not interrupt media queries.

Viewport Height & Width

Using the viewport meta tag with either the height or width values will define the height or width of the viewport respectively. Each value accepts either a positive integer or keyword. For the height property the keyword device-height value is accepted, and for the width property the keyword device-width is accepted. Using these keywords will inherit the device’s default height and width value.

For the best results, and the best looking website, it is recommend that you use the device defaults by applying the device-height and device-width values.

1 2<meta name="viewport" content="width=device-width">

Fig. 4

Letting devices know the intended width of the website, device-width in this case, allows the website to be sized properly and to pick up any qualifying media queries.

Viewport Scale

To control how a website is scaled on a mobile device, and how users can continue to scale a website, use the minimum-scale, maximum-scale, initial-scale, and user-scalable properties.

The initial-scale of a website should be set to 1 as this defines the ratio between the device height, while in a portrait orientation, and the viewport size. Should a device be in landscape mode this would be the ratio between the device width and the viewport size. Values for initial-scale should always be a positive integer between 0 and 10.

1 2<meta name="viewport" content="initial-scale=2">

Fig. 4

Using an integer above 1 will zoom the website to be larger than the default scale. Generally speaking, this value will most commonly be set to 1.

The minimum-scale and maximum-scale values determine how small and how large a viewport may be scaled. When using minimum-scale the value should be a positive integer lower than or equal to the initial-scale. Using the same reasoning, the maximum-scale value should be a positive integer greater than or equal to the initial-scale. Values for both of these must also be between 0 and 10.

1 2<meta name="viewport" content="minimum-scale=0">

Generally speaking, these values should not be set to the same value as the initial-scale. This would disable any zooming, which can be accomplished instead by using the user-scalable value. Setting the user-scalable value to no will disable any zooming. Alternatively, setting the user-scalable value to yes will turn on zooming.

Turning off the ability to scale a website is a bad idea. It harms accessibility and usability, preventing those with disabilities from viewing a website as desired.

1 2<meta name="viewport" content="user-scalable=yes">

Viewport Resolution

Letting the browser decide how to scale a website based off any viewport scale values usually does the trick. When more control is needed, specifically over the resolution of a device, the target-densitydpi value may be used. The target-densitydpi viewport accepts a handful of values including device-dpi, high-dpi, medium-dpi, low-dpi, or an actual DPI number.

Using the target-densitydpi viewport value is rare, but extremely helpful when pixel by pixel control is needed.

1 2<meta name="viewport" content="target-densitydpi=device-dpi">

Combining Viewport Values

The viewport meta tag will accept individual values as well as multiple values, allowing multiple viewport properties to be set at once. Setting multiple values requires comma separating them within the content attribute value. One of the recommended viewport values is outlined below, using both the width and initial-scale properties.

1 2<meta name="viewport" content="width=device-width, initial-scale=1">

Fig. 4

A combination of width=device-width and initial-scale=1 provide the initial size and zoom commonly required.

CSS Viewport Rule

Since the viewport meta tag revolves so heavily around setting the styles of how a website should be rendered it has been recommend to move the viewport from a meta tag with HTML to an @ rule within CSS. This helps keep the style separated from content, providing a more semantic approach.

Currently some browsers have already implemented the @viewport rule, however support isn’t great across the board. The previously recommended viewport meta tag would look like the following @viewport rule in CSS.

1 2 3 4 5@viewport {  width: device-width;  zoom: 1; }

Flexible Media

The final, equally important aspect to responsive web design involves flexible media. As viewports begin to change size media doesn’t always follow suit. Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes.

One quick way to make media scalable is by using the max-width property with a value of 100%. Doing so ensures that as the viewport gets smaller any media will scale down according to its containers width.

1 2 3 4img, video, canvas {  max-width: 100%; }

Flexible Media Demo

Flexible Embedded Media

Unfortunately the max-width property doesn’t work well for all instances of media, specifically around iframes and embedded media. When it comes to third party websites, such as YouTube, who use iframes for embedded media this is a huge disappointment. Fortunately, there is a work around.

To get embedded media to be fully responsive, the embedded element needs to be absolutely positioned within a parent element. The parent element needs to have a width of 100% so that it may scale based on the width of the viewport. The parent element also needs to have a height of 0 to trigger the hasLayout mechanism within Internet Explorer.

Padding is then given to the bottom of the parent element, the value of which is set in the same aspect ratio of the video. This allows the height of the parent element to be proportionate to that of it’s width. Remember the responsive design formula from before? If a video has an aspect ratio of 16:9, 9 divided by 16 equals .5625, thus requiring a bottom padding of 56.25%. Padding on the bottom and not the top is specifically used to prevent Internet Explorer 5.5 from breaking, and treating the parent element as an absolutely positioned element.

HTML

1 2 3 4<figure>  <iframe src="https://www.youtube.com/embed/4Fqg43ozz7A"></iframe> </figure>

CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14figure {  height: 0;  padding-bottom: 56.25%; /* 16:9 */  position: relative;  width: 100%; } iframe {  height: 100%;  left: 0;  position: absolute;  top: 0;  width: 100%; }

Flexible Embedded Media Demo

For security reasons CodePen doesn’t allow iframes within embedded code samples, however you may review and edit this code on their website.

100% Wide Container

75% Wide Container

50% Wide Container

Resources & Links

Responsive Web Design via A List Apart
Viewport Percentage Lengths via W3C
CSS Media Queries via CSS-Tricks
Mobile First Presentation via Luke Wroblewski
An Introduction to Meta Viewport and @viewport via Dev.Opera

https://plus.google.com/share?url=http://learn.shayhowe.com/advanced-html-css/responsive-web-design/)

Lesson 3Complex Selectors Lesson 5Preprocessors

Learn More HTML & CSS or Study Other Topics

Learning how to code HTML & CSS and building successful websites can be challenging, and at times additional help and explanation can go a long way. Fortunately there are plenty of online schools, boot camps, workshops, and the alike, that can help.

Select your topic of interest below and I will recom

mend a course I believe will provide the best learning opportunity for you.

https://learn.shayhowe.com/advanced-html-css/preprocessors/

PreProcessors

In time writing HTML and CSS may feel a bit taxing, requiring a lot of the same tasks to be completed over and over again. Tasks such as closing tags in HTML or repetitively having to looking up hexadecimal color values in CSS.

These different tasks, while commonly small, do add up to quite a bit of inefficiency. Fortunately these, and a handful of other inefficiencies, have been recognized and preprocessor solutions have risen to the challenge.

A preprocessor is a program that takes one type of data and converts it to another type of data. In the case of HTML and CSS, some of the more popular preprocessor languages include Haml and Sass. Haml is processed into HTML and Sass is processed into CSS.

Upon setting out to solve some of the more common problems, Haml and Sass found many additional ways to empower HTML and CSS, not only by removing the inefficiencies but also in creating ways to make building websites easier and more logical. The popularity of preprocessors have also brought along different frameworks to support them, one of the more popular being Compass.

Haml

Haml, known as HTML abstraction markup language, is a markup language with the single goal of providing the ability to write beautiful markup. Serving as its own markup language, code written in Haml is later processed to HTML. Haml promotes DRY and well structured markup, providing a pleasing experience for anyone having to write or read it.

Installation

Haml requires Ruby to be compiled to HTML, so the first step to using it is to ensure that Ruby is installed. Fortunately for those on Mac OS X Ruby comes preinstalled, and those on a Windows machine may visit Windows Installer for directions. Upon confirming Ruby is installed the gem install haml command needs to be run from the command line, using Terminal or the alike command line program, to install Haml.

1 2gem install haml

Files written in the Haml markup should be saved with the file extension of .haml. To then convert these files from Haml to HTML the haml command below needs to be run to compile each individual file.

1 2haml index.haml index.html

In the example above, the file index.haml is converted to HTML and saved as index.html within the same directory. This command has to be run within the same directory the files reside in. Should the command be run outside this directory the path where the files reside need to be included within the command. At any time the command haml --help may be run to see a list of different available options.

Watching a File or Directory

Unfortunately Haml doesn’t provide a way to watch a file, or directory, for changes without the use of another dependency.

Inside of a Rails application a Haml dependency may be added in the Gemfile, thus automatically compiling Haml files to HTML upon any changes. There are a few desktop applications available for those not using Rails, one of the more popular being CodeKit.

On top of Haml CodeKit also supports other preprocessors, which may also come in handy.

Doctype

The first part to writing a document in Haml is knowing what type of doctype is to be used. When working with HTML documents, the general document type is going to be the HTML5 doctype. In Haml document types are identified with three exclamation points, !!! followed by any specifics if necessary.

The default doctype in Haml is the HTML 1.0 Transitional document type so in order to make this the HTML5 doctype the number five has to be passed in after the exclamation points, !!! 5.

Haml

1 2!!! 5

Compiled HTML

1 2<!DOCTYPE html>

Declaring Elements

One of the defining features of Haml is its syntax, and how to declare and nest elements. HTML elements generally have opening and closing tags, however within Haml elements only have one tag, the opening. Elements are initialized with a percent sign, %, and then indented to identify nesting. Indentation with Haml can be accomplish with one or more spaces, however what is important is that the indentation remain consistent. Hard tabs or spaces cannot be mixes together, and the same number of tabs or spaces must be the same throughout an entire document.

Removing the need for both opening and closing tags, as well as mandating the structure with indentation creates an easy to follow outline. At any given time the markup can be scanned and changed without struggle.

Haml

1 2 3 4 5 6%body  %header    %h2 Hello World  %section    %p Lorem ipsum dolor sit amet.

Compiled HTML

1 2 3 4 5 6 7 8 9<body>  <header>    <h2>Hello World</h2>  </header>  <section>    <p>Lorem ipsum dolor sit amet.</p>  </section> </body>

Handling Text

Text within Haml can be placed on the same line as the declared element, or indented below the element. Text cannot be both on the same line as the declared element and nested below it, it has to be either or. The example from above could be rewritten as the following:

1 2 3 4 5 6 7 8%body  %header    %h2      Hello World  %section    %p      Lorem ipsum dolor sit amet.

Attributes

Attributes, as with elements, are declared a bit differently in Haml. Attributes are declared directly after the element in either {} or (), all depending if you wish to use Ruby or HTML syntax. Ruby style attributes will use the standard hash syntax inside of {}, while HTML style attributes will use standard HTML syntax inside of ().

Haml

1 2 3 4%img{:src => "shay.jpg", :alt => "Shay Howe"} %img{src: "shay.jpg", alt: "Shay Howe"} %img(src="shay.jpg" alt="Shay Howe")

Compiled HTML

1 2<img src="shay.jpg" alt="Shay Howe">

Classes & IDs

If you wish to, Class and ID attributes may be declared the same as all other attributes, however they may also be treated a bit differently. Rather than listing out the class or ID attribute name and value inside {} or () the value can be identified directly after the element. Using either a . for classes or a # for an ID the value can be added directly after the element.

Additionally, attributes may be mixed and matched, chaining them together in the appropriate format. Classes are to be separated with a . and other attributes may be added using one of the previously outlined formats.

Haml

1 2 3 4 5%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")

Compiled HTML

1 2 3 4 5<section class="feature"></section> <section class="feature special"></section> <section id="hello"></section> <section class="feature" id="hello" role="region"></section>

Division Classes & IDs

In the event a class or ID is used on a div the %div may be omitted, and the class or ID value can be used outright. Again, classes are to be identified with a . and IDs are to be identified with a #.

Haml

1 2 3 4.awesome .awesome.lesson #getting-started.lesson

Compiled HTML

1 2 3 4<div class="awesome"></div> <div class="awesome lesson"></div> <div class="lesson" id="getting-started"></div>

Boolean Attributes

Boolean attributes are handled just as they would be within Ruby or HTML, all depending on the syntax being used.

Haml

1 2 3 4%input{:type => "checkbox", :checked => true} %input(type="checkbox" checked=true) %input(type="checkbox" checked)

Compiled HTML

1 2<input type="checkbox" checked>

Escaping Text

One of the benefits of Haml is the ability to evaluate and run Ruby, however this isn’t always the desired action. Text, and lines of code, can be escaped by using a backslash, \, allowing the text to be rendered explicitly without being executed.

In the example below, the first instance of = @author is executed Ruby, pulling the authors name from the application. The second instance, starting with the backslash, is escaped text, printing it as is, without execution.

Haml

1 2 3 4.author  = @author  \= @author

Compiled HTML

1 2 3 4 5<div class="author">  Shay Howe  = @author </div>

Text Escaping Alternatives

Occasionally escaping text doesn’t quite do the job and Ruby is needed to generate the desired output. One popular instance of this is when trying to include a period directly after a link, but not as part of the anchor text. Putting the period on a new line isn’t acceptable as it will be treated as an empty class value, causing a compiling error. Adding a backslash before the period will escape the character however it places a blank space between the last word and the period. Again, not producing the desired output.

In these cases a Ruby helper comes in handy. In the example below, the helper is used to place a period directly after the last word but still outside of the anchor text.

Haml

1 2 3 4 5%p  Shay is  = succeed "." do    %a{:href => "#"} awesome

Compiled HTML

1 2<p>Shay is <a href="#">awesome</a>.</p>

Comments

As with elements and attributes, comments are handled a bit differently in Haml as well. Simply enough, code can be commented out with the use of a single forward slash, /. Individual lines may be commented out with the use of a forward slash at the beginning of the line, and blocks of code can be commented out by being nested underneath a forward slash.

Haml

1 2 3 4 5 6 7 8%div  / Commented line  Actual line /  %div    Commented block

Compiled HTML

1 2 3 4 5 6 7 8 9 10 11<div>  <!-- Commented line -->  Actual line </div> <!--  <div>    Commented block  </div> -->

Conditional Comments

Conditional comments are also handled differently in Haml. To create a conditional comment use square brackets, [], around the condition. These square brackets need to be placed directly after the forward slash.

Haml

1 2 3/[if lt IE 9]  %script{:src  => "html5shiv.js"}

Compiled HTML

1 2 3 4<!--[if lt IE 9]>  <script src="html5shiv.js"></script> <![endif]-->

Silent Comments

Haml also provides the ability to create Haml specific comments, or silent comments. Silent comments differ from general HTML comments in that upon being complied any content within a silent comment is completely removed from the page, and is not displayed in the output. Silent comments are initialized with a dash then the number sign, -#. As with other comments, silent comments may be used to remove one line or multiple lines with the use of nesting.

Haml

1 2 3 4%div  -# Removed line  Actual line

Compiled HTML

1 2 3 4<div>  Actual line </div>

Filters

Haml provides a handful of filters, allowing different types of input to be used inside of Haml. Filters are identified with a colon followed by the name of the filter, :markdown for example, with all of the content to be filtered nested underneath.

Common Filters

Below are some of the more common filters, with the more popular ones of the group being :css and :javascript.

:cdata
:coffee
:css
:erb
:escaped
:javascript
:less
:markdown
:maruku
:plain
:preserve
:ruby
:sass
:scss
:textile

Javascript Filter

Haml

1 2 3 4 5:javascript  $('button').on('click', function(event) {    $('p').hide('slow');  });

Compiled HTML

1 2 3 4 5 6<script>  $('button').on('click', function(event) {    $('p').hide('slow');  });  </script>

CSS & Sass Filters

Haml

1 2 3 4 5 6 7 8 9 10 11:css  .container {    margin: 0 auto;    width: 960px;  } :sass  .container    margin: 0 auto    width: 960px

Compiled HTML

1 2 3 4 5 6 7<style>  .container {    margin: 0 auto;    width: 960px;  } </style>

Ruby Interpolation

As previously mentioned Haml can evaluate Ruby, and there may occasionally be times where Ruby needs to be evaluated inside of plain text. In this event Ruby needs to be interpolated, accomplished by wrapping the necessary Ruby code inside “.

Below is an example of Ruby being interpolated as part of a class name.

Haml

1 2%div{:class => "student-#{@student.name}"}

Compiled HTML

1 2<div class="student-shay">

SCSS & Sass

SCSS and Sass are preprocessing languages which are compiled to CSS, resembling Haml a bit in that they make writing code easier, and provide quite a bit of leverage in doing so. Individually SCSS and Sass come from the same origin however they are technical different syntaxes.

Sass, Syntactically Awesome Stylesheets, came first and is a strict indented syntax. SCSS, Sassy CSS, followed shortly after providing the same firing power of Sass but with a more flexible syntax, including the ability to write plain CSS.

Installation

As with Haml, SCSS and Sass are compiled using Ruby therefore Ruby needs to be installed to produce CSS files. Please follow the directions from before to install, or ensure Ruby is installed.

Once Ruby is installed the gem install sass command needs to be run from the command line to install SCSS and Sass.

1 2gem install sass

Files written in SCSS or Sass need to have the .scss or .sass file extensions respectively. To convert either of these file types to .css the following sass command needs to be run.

1 2sass styles.sass styles.css

The command above takes the styles.sass Sass file and compiles it to the styles.css file. As with Haml, these file names are paths and need to be executed respectively. The above command works when those files reside within the directory from which the command is run, should the files reside outside of the directory their path needs to be explicitly stated within the command.

Should changes to a file be ongoing Sass can watch the file and recompile the CSS every time a change takes place. To watch a Sass file the following sass command may be run.

1 2sass --watch styles.sass:styles.css

Additionally, instead of compiling or watching individual files, Sass is capable of compiling and watching entire directories of files. For example, to watch an entire directory of Sass files and convert them to CSS the sass command below may be run.

1 2sass --watch assets/sass:public/css

Converting Files from SCSS to Sass & Vice Versa

On top of being able to convert SCSS and Sass files to CSS you can also convert files from SCSS to Sass and vice versa. To do so the sass commands below may be used to convert a SCSS file to Sass, and then a Sass file to SCSS respectively.

1 2 3 4 5 6# Convert Sass to SCSS sass-convert styles.sass styles.scss # Convert SCSS to Sass sass-convert styles.scss styles.sass

Syntax

As previously mentioned the primary difference between SCSS and Sass is their syntax, and their difference in severity. The syntax of SCSS isn’t much different than that of regular CSS. In fact, standard CSS will run inside of SCSS. Sass on the other hand is fairly strict, and any indenting or character errors will prohibit the styles from compiling. Sass omits all curly brackets, {}, and semicolons, ;, relying on indentation and clear line breaks for formatting.

SCSS

1 2 3 4 5 6 7 8.new {  color: #ff7b29;  font-weight: bold;  span {    text-transform: uppercase;  } }

Sass

1 2 3 4 5 6.new  color: #ff7b29  font-weight: bold  span    text-transform: uppercase

Compiled CSS

1 2 3 4 5 6 7 8.new {  color: #ff7b29;  font-weight: bold; } .new span {  text-transform: uppercase; }

Using SCSS vs. Sass

Deciding on whether to use SCSS or Sass boils down to personal preference, and is a decision to be made based on what is best for a specific team and project. There are pros and cons to each syntax, all of which are fair.

Personally, I prefer the Sass syntax as it requires less characters and provides, I believe, a cleaner syntax. Sass will not allow straight CSS input as SCSS does, and will not put up with any composition errors. Sass has a bit more of a learning curve, however a learning curve I see well worth the ease of manageable styles.

Moving forward the examples in this lesson will use Sass, however they may also all be accomplished with SCSS.

Nesting

In the syntax example above you will notice how selectors may be nested inside of one another to create compound selectors. The nesting quickly outlines identifiable selectors, however it is important not to go overboard. Do not nest selectors for unapparent reasons or go overboard nesting one selector under the prior one. Using specific selectors without raising specificity is important.

Sass

1 2 3 4 5 6 7.portfolio  border: 1px solid #9799a7  ul    list-style: none  li    float: left

Compiled CSS

1 2 3 4 5 6 7 8 9 10.portfolio {  border: 1px solid #9799a7; } .portfolio ul {  list-style: none; } .portfolio li {  float: left; }

Nesting Properties

On top of nesting selectors it is also possible to nest properties. Some of the most popular uses of this may be seen with font, margin, padding, and border properties. As with the decision of SCSS versus Sass, this is very much a personal decision. Many feel that shorthand values are fine and breaking out values in this longer format is unnecessary. Ultimately your decision is up to personal preference.

Sass

1 2 3 4 5 6div  font:    family: Baskerville, Palatino, serif    style: italic    weight: normal

Compiled CSS

1 2 3 4 5 6div {  font-family: Baskerville, Palatino, serif;  font-style: italic;  font-weight: normal; }

Nested Media Queries

Individual media queries may also be nested inside of a selector, changing property values based off a media condition.

Sass

1 2 3 4 5.container  width: 960px  @media screen and (max-width: 960px)    width: 100%

Compiled CSS

1 2 3 4 5 6 7 8 9.container {  width: 960px; } @media screen and (max-width: 960px) {  .container {    width: 100%;  } }

Parent Selector

Sass provides a way to add styles to a previous selector with the use of the parent selector, implemented by using an ampersand, &. Most commonly the parent selector is used in conjunction with a pseudo class, such as :hover, however it doesn’t have to be. Additionally the parent selector could be used to bind additional selectors to its parent, such as &.featured.

Sass

1 2 3 4 5a  color: #0087cc  &:hover    color: #ff7b29

Compiled CSS

1 2 3 4 5 6 7a {  color: #0087cc; } a:hover {  color: #ff7b29; }

Parent Key Selector

The parent selector may also be used as the key selector, adding qualifying selectors to make compound selectors. There are an abundance of ways to use the parent selector as the key selector but perhaps one of the most beneficial is inside of feature detection.

Sass

1 2 3 4 5.btn  background: linear-gradient(#fff, #9799a7)  .no-cssgradients &    background: url("gradient.png") 0 0 repeat-x

Compiled CSS

1 2 3 4 5 6 7.btn {  background: linear-gradient(#fff, #9799a7); } .no-cssgradients .btn {  background: url("gradient.png") 0 0 repeat-x; }

Comments

Sass handles comments very similar to that of Haml. The standard CSS syntax, /* ... */, for comments works as intended within Sass however there is also a syntax for silent comments to completely remove a comment or lines of code from being compiled.

The syntax for silent comments is two forward slashes, //, and any content on that line or nested below it will be omitted from computation. Notice in the example below how the // Omitted comment line is not rendered in the compiled CSS.

Sass

1 2 3 4 5 6 7/* Normal comment */ div  background: #333 // Omitted comment strong  display: block

Compiled CSS

1 2 3 4 5 6 7 8 9/* Normal comment */ div {  background: #333; } strong {  display: block; }

Variables

Variables are one of the more sought after features of CSS that Sass provides. With Sass you can define variables and then reuse them as necessary.

Variables are defined with a dollar sign, $, followed by the variable name. Between the variable name and value is a colon followed by an empty space, such as $font-base: 1em. As for the value of the variable, it may be a number, string, color, boolean, null, or a list of values separated by spaces or commas.

Sass

1 2 3 4 5 6$font-base: 1em $serif: "Helvetica Neue", Arial, "Lucida Grande", sans-serif p  font: $font-base $serif

Compiled CSS

1 2 3 4p {  font: 1em "Helvetica Neue", Arial, "Lucida Grande", sans-serif; }

Variable Interpolation

For the most part variables may be used anywhere inside of a Sass document. However, they may occasionally need to be interpolated using the “syntax. A few instances of where variables need to be interpolated include when being used in a class name, property name, or inside a string of plain text.

Sass

1 2 3 4 5 6$location: chicago $offset: left .#{$location}  #{$offset}: 20px

Compiled CSS

1 2 3 4.chicago {  left: 20px; }

Calculations

Sass also has the ability to do calculations in a variety of different manners. Calculations can handle most problems, such as addition, subtraction, division, multiplication, and rounding.

Addition can be done by using the plus sign, +, and may be completed with or without units of measurement. When done with units, the unit tied to the first number in the equation is the unit that will be used in the computed value. For example, ten pixels plus one inch will equal 106 pixels. Subtraction is handled the same way as addition but with the minus sign, -, instead.

Multiplication is completed with the asterisk sign, *, however only one of the numbers, if any, may include a unit of measurement. Using the percent sign, %, will return the remainder of the two numbers upon being divided, and as with multiplication, only allows one number, if any, to have a unit.

Sass

1 2 3 4 5width: 40px + 6 width: 40px - 6 width: 40px * 6 width: 40px % 6

Compiled CSS

1 2 3 4 5width: 46px; width: 34px; width: 240px; width: 4px;

Division

Division is a bit trickier in Sass as the forward slash, /, used to perform division is already used in some CSS property values. Generally speaking, division will take place when any part of the value uses a variable, if the value is wrapped in parentheses, or if the value is used as part of another equation.

When using one unit of measurement in division the value will reside in that unit. When using two units of measurement, however, the resulting value will be unitless.

Sass

1 2 3 4 5 6 7width: 100px / 10 width: (100px / 10) width: (100px / 10px) $width: 100px width: $width / 10 width: 5px - 100px / 10

Compiled CSS

1 2 3 4 5 6width: 100px/10; width: 10px; width: 10; width: 10px; width: -5px;

Detailed Math

As one may expect, Sass is also capable of combining multiple math operations. Sass also recognizes which operations to execute first based on the use of parentheses.

Sass

1 2 3 4 5 6 7$grid: 16 $column: 40px $gutter: 20px $container: ($column * $grid) + ($gutter * $grid) width: $container

Compiled CSS

1 2width: 960px;

Number Functions

By default Sass includes a handful of built in functions, many of which are used to manipulate number values as wished.

The percentage() function turns a value into a percentage. The round() function rounds a value to the closest whole number, defaulting to rounding up where necessary. The ceil() function rounds a value up to the closest whole number, and the floor() function rounds a value down to the closest whole number. Lastly, the abs() function finds the absolute value of a given number.

percentage()
round()
ceil()
floor()
abs()

Sass

1 2 3 4 5 6width: percentage(2.5) width: round(2.5px) width: ceil(2.5px) width: floor(2.5px) width: abs(-2.5px)

Compiled CSS

1 2 3 4 5 6width: 250%; width: 3px; width: 3px; width: 2px; width: 2.5px;

Color

Sass provides quite a bit of assistance in working with colors, providing a handful of different features to alter and manipulate colors. One of the more popular color features in Sass is the ability to change a hexadecimal color, or variable, and convert it into an RGBa value.

Sass

1 2 3 4 5color: rgba(#8ec63f, .25) $green: #8ec63f color: rgba($green, .25)

Compiled CSS

1 2color: rgba(142, 198, 63, .25);

Color Operations

On top of numbers, math may additionally be performed on colors using addition, subtraction, multiplication, and division. These computations are performed on the red, green, and blue components, changing them as intended.

Sass

1 2 3 4color: #8ec63f + #666 color: #8ec63f * 2 color: rgba(142, 198, 63, .75) / rgba(255, 255, 255, .75)

Compiled CSS

1 2 3 4color: #f4ffa5; color: #ffff7e; color: rgba(0, 0, 0, .75);

Color Alterations

Using color operators to perform calculations is helpful but can be a bit challenging as well. In this case color alterations may be a better option. Color alterations provide the ability to inverse colors, find complementary colors, mix colors together, or find the grayscale value of a color.

invert()
complement()
mix()
grayscale()

Sass

1 2 3 4 5 6color: invert(#8ec63f) color: complement(#8ec63f) color: mix(#8ec63f, #fff) color: mix(#8ec63f, #fff, 10%) color: grayscale(#8ec63f)

Compiled CSS

1 2 3 4 5 6color: #7139c0; color: #773fc6; color: #c6e29f; color: #f3f9eb; color: #838383;

HSLa Color Alterations

HSLa color alterations take things a step further, adding in even more alterations. Some of the more popular HSLa color alterations include lighten(), darken(), saturate(), and desaturate().

lighten()
darken()
saturate()
desaturate()
adjust-hue()
fade-in()
fade-out()

Sass

1 2 3 4 5 6 7 8 9color: lighten(#8ec63f, 50%) color: darken(#8ec63f, 30%) color: saturate(#8ec63f, 75%) color: desaturate(#8ec63f, 25%) color: adjust-hue(#8ec63f, 30) color: adjust-hue(#8ec63f, -30) color: fade-in(rgba(142, 198, 63, 0), .4) color: fade-out(#8ec63f, .4)

Compiled CSS

1 2 3 4 5 6 7 8 9color: white; color: #3b5319; color: #98ff06; color: #89a75e; color: #4ac63f; color: #c6bb3f; color: rgba(142, 198, 63, 0.4); color: rgba(142, 198, 63, 0.6);

Color Manipulation

Outside of altering colors Sass can also directly manipulate colors. Manipulating colors provides the most control over how to finely tune specific color properties. With this control also comes complexity, which is why color manipulations are a bit less common than color alterations.

change-color() — Set any property of a color
$color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
adjust-color() — Incrementally manipulate any property of a color
$color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha]
scale-color() — Fluidly scale any percentage based on property of a color
$color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha]

Sass

1 2 3 4color: change-color(#8ec63f, $red: 60, $green: 255) color: adjust-color(#8ec63f, $hue: 300, $lightness: 50%) color: scale-color(#8ec63f, $lightness: 25%, $alpha: 30%)

Compiled CSS

1 2 3 4color: #3cff3f; color: white; color: #aad46f;

Extends

Extends provide a way to easily share and reuse styles without having to explicitly repeat code or use additional classes, providing a perfect way to keep code modular. Both elements and class selectors may be used as an extend, and there is even a placeholder selector built just for extends.

Extends are established by using the @extend rule followed by the selector to extend. Instead of duplicating the property and values, the original selector receives and additional selector, that of which is from the selector calling the extend.

In all, this provides a way to quickly reuse code without driving up code weight. Additionally, extends parley nicely with OOCSS and SMACSS.

Sass

1 2 3 4 5 6 7 8 9.alert  border-radius: 10px  padding: 10px 20px .alert-error  @extend .alert  background: #f2dede  color: #b94a48

Compiled CSS

1 2 3 4 5 6 7 8 9 10.alert, .alert-error {  border-radius: 10px;  padding: 10px 20px; } .alert-error {  background: #f2dede;  color: #b94a48; }

Placeholder Selector Extend

To avoid building a bunch of unused classes purely for extends we can use what is known as a placeholder selector. The placeholder selector is initialized with a percentage sign, %, and is never directly compiled into CSS. Instead, it is used to attach selectors to when it is called with an extend. In the refined example below notice how the .alert selector never makes its way into the CSS.

Sass

1 2 3 4 5 6 7 8 9%alert  border-radius: 10px  padding: 10px 20px .alert-error  @extend %alert  background: #f2dede  color: #b94a48

Compiled CSS

1 2 3 4 5 6 7 8 9.alert-error {  border-radius: 10px;  padding: 10px 20px; } .alert-error {  background: #f2dede;  color: #b94a48; }

Element Selector Extend

As with classes, extends also work with standard element selectors too.

Sass

1 2 3 4 5 6 7 8h2  color: #9c6  span    text-decoration: underline .sub-heading  @extend h2

Compiled CSS

1 2 3 4 5 6 7h2, .sub-heading  {  color: #9c6; } h2 span, .sub-heading span {  text-decoration: underline; }

Mixins

Mixins provide a way to easily template properties and values, then share them amongst different selectors. Mixins differ from extends as mixins allow arguments to be passed in where extends are fixed values.

Mixins are identified using the @mixin rule followed by any potential arguments, then any styles are outlined below the rule. To call a mixin from within a selector use the plus sign, +, followed by the name of the mixin and any desired argument values if needed.

It is worth nothing that SCSS handles mixins a bit different. Instead of using a plus sign to call a mixin SCSS use an @include rule.

Sass

1 2 3 4 5 6 7 8@mixin btn($color, $color-hover)  color: $color  &:hover    color: $color-hover .btn  +btn($color: #fff, $color-hover: #9799a7)

Compiled CSS

1 2 3 4 5 6 7.btn {  color: #fff; } .btn:hover {  color: #9799a7; }

Default Arguments

Using the same example from above we can also specify default argument values, which may be over written if wished.

Sass

1 2 3 4 5 6 7 8@mixin btn($color: #fff, $color-hover: #9799a7)  color: $color  &:hover    color: $color-hover .btn  +btn($color-hover: #9799a7)

Compiled CSS

1 2 3 4 5 6 7.btn {  color: #fff; } .btn:hover {  color: #9799a7; }

Variable Arguments

When one or more values need to be passed to an argument the variable name may end with ... inside of the mixin. In the example below with box shadows we can pass in comma separated values to the mixin.

1 2 3 4 5 6 7 8@mixin box-shadow($shadow...)  -webkit-box-shadow: $shadow  -moz-box-shadow: $shadow  box-shadow: $shadow .shadows  +box-shadow(0 1px 2px #cecfd5, inset 0 0 5px #cecfd5)

Compiled CSS

1 2 3 4 5 6.shadows {  -moz-box-shadow: 0 1px 2px #cecfd5, inset 0 0 5px #cecfd5;  -webkit-box-shadow: 0 1px 2px #cecfd5, inset 0 0 5px #cecfd5;  box-shadow: 0 1px 2px #cecfd5, inset 0 0 5px #cecfd5; }

Imports

One of nicest parts of Sass is its ability to import multiple .scss or .sass files and condense them into one single file. Condensing all of the files into one allows for multiple stylesheets to be used for better organization without the worry of numerous HTTP request.

Instead of referencing all of the different stylesheets within an HTML document only reference the one Sass file importing all of the other stylesheets.

In the following examples, all three files _normalize.sass, _grid.sass, and _typography.sass are all compiled into one file. In the event that the Sass file importing all the other files is named styles.sass, and it is compiled into styles.css, then only styles.css needs to be referenced within the HTML document.

Sass

1 2 3@import "normalize" @import "grid", "typography"

Compiled HTML

1 2<link href="styles.css" rel="stylesheet">

Loops & Conditionals

For a bit more intricate styling Sass supports different control directives. Its important to understand these directives are not intended for everyday styling but for creating detailed mixins and helpers. Many of these will look familiar as they are borrowed from other programming languages.

Operators

Some loops and conditionals will require operators to determine their behavior, of which can be broken down into relational and comparison operators. Relational operators looks at the relationship between two entities, while comparison operators determine equality or different between to entities.

<
Less than
>
Greater than
==
Equal to
<=
Less than or equal to
>=
Greather than or equal to
!=
Not equal to

1 2 3 4 5 6 7 8 9 10 11// Relational Operators 6 < 10   // true 4 <= 60  // true 8 > 2    // true 10 >= 10 // true // Comparison Operators #fff == white  // true 10 + 30 == 40  // true normal != bold // true

If Function

The @if rule test an expressions then loads the styles beneath that expression should it return anything other than false or null. The initial if statement may be proceeded by several else if statements and one else statement. Once a statement is successful identified the styles directly tied to it will be applied.

Sass

1 2 3 4 5 6 7 8 9 10$shay: awesome .shay  @if $shay == awesome    background: #ff7b29  @else if $shay == cool    background: #0087cc  @else    background: #333

Compiled CSS

1 2 3 4.shay {  background: #ff7b29;  }

For Loop

The @for rule outputs different sets of styles based off of a counter variable. There are two different forms available for for loops, those being to and through. The first, @for $i from 1 to 3 for example, will output styles up to, but not including, 3. The other form, @for $i from 1 through 3, will output styles up to, and including, 3.

Sass

1 2 3 4@for $col from 1 to 6  .col-#{$col}    width: 40px * $col

Compiled CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16.col-1 {  width: 40px; } .col-2 {  width: 80px; } .col-3 {  width: 120px; } .col-4 {  width: 160px; } .col-5 {  width: 200px; }

Each Loop

Simply enough, the @each rule returns styles for each item in a list. List may include multiple comma separated items.

Sass

1 2 3 4@each $class in uxd, rails, html, css  .#{$class}-logo    background: url("/img/#{$class}.jpg")

Compiled CSS

1 2 3 4 5 6 7 8 9 10 11 12 13.uxd-logo {  background: url("/img/uxd.jpg"); } .rails-logo {  background: url("/img/rails.jpg"); } .html-logo {  background: url("/img/html.jpg"); } .css-logo {  background: url("/img/css.jpg"); }

While Loop

The @while rule repeatedly returns styles until the statement becomes false. The directive accepts a handful of different operators and the counter variable can be finely controlled allowing for precise looping.

Sass

1 2 3 4 5 6$heading: 1 @while $heading <= 6  h#{$heading}    font-size: 2em - ($heading * .25em)  $heading: $heading + 1

Compiled CSS

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19h2 {  font-size: 1.75em; } h2 {  font-size: 1.5em; } h3 {  font-size: 1.25em; } h4 {  font-size: 1em; } h5 {  font-size: 0.75em; } h6 {  font-size: 0.5em; }

Other Preprocessors

Haml and Sass are far from the only preprocessing languages available, including JavaScript preprocessors as well. Some of the other popular preprocessors including Jade, Slim, LESS, Stylus, and CoffeeScript.

In the interest of brevity Haml and Sass were the only preprocessors covered in this lesson. They were also chosen because they are built using Ruby and fit right into Ruby on Rails applications. They’ve also got tremendous community support.

When it comes to choosing which, if any, preprocessor to use it is important to consider what is best for your team and project. Projects built in Node.js may likely better benefit from Jade and Stylus. The most important aspect to consider, though, is what your team is accustomed to using. Do your research for each project and make the most educated decision.

Resources & Links

Haml — HTML Abstraction Markup Language
Sass — Syntactically Awesome Stylesheets
Haml Documentation Reference
Sass Documentation Reference
Sass Playground via SassMeister
SassScript Function via Sass Documentation
HSLa Color Function Visualization via SassMe

PDFs

Responsive Design

[doc id=109570]

Preprocessors

[doc id=109570]

JQuery

[doc id=109572]

Transforms

[doc id=109573]

Transitions / Animations

[doc id=109611]

Featuresupport / Polyfills

[doc id=109612]

Extending Semantics

[doc id=109613]