SlideShare a Scribd company logo
Ashley Nolan
Senior UI Web Engineer at :
@AshNolan_
Design & CSS
So, I'd just like to start by saying thanks for coming along and for inviting me to come in and talk to you today.
So as Simon mentioned, I’m Ashley Nolan, and I work just around the corner from here at Just Eat as a Senior UI Engineer.
@AshNolan_ `
So, I’ve been working with the web for around 12 years professionally and I’ve been lucky enough to have worked with some great companies in that time.
Most recently, I’ve found myself working on some really high traffic projects such as the BBC Good Food website and now at JUST EAT I’m currently leading the rebuild of our Global Platform.
@AshNolan_ `
But I'm here to talk to you today about design and CSS, and although my professional career has spanned about 12 years, I started out playing around with the web in the late 90's when I was back in school -
and I only really thought about it when I was putting these slides together but as most of you were only a couple of years old when I was in school – or perhaps not even born at all which is even more
depressing to me – you would have missed out on amazing looking website designs such as this one.
So this website was released to market the film Space Jam in 1996, and was regarded as being one of the best looking websites back at that time.
So as you can see, things were pretty basic when the web started out – and that's just because CSS was a lot more simple than it is now. Layouts traditionally looked quite boxy because they were built using
HTML table tags rather than using CSS for layout and you were restricted by the styles that you could apply – for example you could only use built in system fonts so a lot of websites looked pretty similar.
@AshNolan_ `
Content StylingBehaviour
In terms of the web today, the main front-end technologies that are used to create websites are the same as back when that Space Jam site was built back in 1996, and so that's HTML, CSS and JavaScript –
and each of these technologies takes care of different aspects of a website.
HTML defines the content you will display on a page. JavaScript, thinking about it's most basic functionality, let’s you create behaviours and handle state on a webpage – such as what happens when
someone clicks on an area of your page, or if an event triggers when a user scrolls down your webpage for example.
CSS is what styles the content that you specify in your HTML, and that's the main topic I'm going to be talking about today.
@AshNolan_ `
3:00: So when I started playing around with these languages and making websites, I really fell in love with the power that HTML and CSS gave me.
CSS in particular was one of the first programming languages that I really connected with when I was starting out. I think like a lot of people who have gone on to become front-end developers – the ability to
change some values in CSS and be able to immediately see how those changes affect the visual design of a webpage was much more gratifying to me than when I was learning some of the other
programming languages that I was taught.
Personally, it’s been fascinating to see what was a pretty basic language back then turn into a language that is now massively powerful, with a mature eco-system of tools and methodologies around it.
@AshNolan_ :
CSS
What we'll cover today
• The cascade
• Importance, specificity and source order
• CSS Layout and design grids
• Web fonts
• Front-end Testing Tools
• Advanced reading
So what specifically are we going to cover today in terms of CSS.
Well first of all, it'd be really great if I could gauge knowledge levels in the room – because that'll probably adjust the content a little bit - so just in terms of CSS experience who here has never written any
CSS before?
Ok, great and who has written a little bit of CSS and feels like they know some of the basics of the language.
Awesome and is there anyone here who feels like they know CSS reasonably well? So moving on from the basics and feels quite confident using it.
Ok, well here's the rough list of things that I plan to cover today. We're going to talk about the basics such as the cascade, as well as what terms such as importance and specificity mean within CSS and how
knowing about these can help improve the code that you write. We'll also cover some CSS layout techniques, adding webfonts to a website, and then we'll finish by looking at a couple of front-end testing
tools, and some future topics you can go away and look at if you're interested in learning some more about CSS.
@AshNolan_ :
CSS
Cascading Style SheetsContent is styled with CSS
5:00: So, for those of you that don't know, CSS stands for Cascading Style Sheets, and as I mentioned earlier…
*CLICK*
…CSS is what styles the content on your webpage.
@AshNolan_ `http://ashn.uk/devtool
So just to show you this more visually, this is what the BBC homepage looks like when you turn CSS off and view it. So you can do this on any webpage using a chrome extension called "Web Developer
toolbar". If you'd like to try this out for yourself on any websites, the link to install the extension is in the bottom left of the slide.
So as you can see, the web would look pretty boring without CSS and it can be used to style lots of different aspects of a website – you can define colours, font-sizes, how things are laid out and more
complex things, like controlling animations and transitions between visual state.
@AshNolan_ :
Some simple CSS
CSS Selector
CSS properties
5:45: Its a really simple, declarative language. So the main idea with CSS is that you define a selector, which is the top part of this code block, and then define some CSS properties to show how you want the
elements being selected to be styled.
So here we're selecting the body tag and we're adding some styles to it, such as a background colour, a width, what font size and font-family to use and to align any text in the centre of our page.
Also, one small thing to be aware of in CSS, is that you need to use American spellings when defining properties – so you'll notice that in the above code where we have properties for colour and when
centring text – they both use the American spellings of those words.
@AshNolan_ :
By combining importance, origin, specificity, and the
source order of the style concerned, the CSS cascade
assigns a weight to each declaration. This weight is
used to determine exactly, and without conflict, which
style declarations should be applied to a specific
element: the declaration with the highest weight takes
precedence.
What is the cascade?
http://reference.sitepoint.com/css/cascade
So the C in CSS stands for Cascading, but what does that actually mean?
Well there's a really great definition on Sitepoint which describes it as shown here…
But I think the most important part of this definition, is the last sentence…
@AshNolan_ :
By combining importance, origin, specificity, and the
source order of the style concerned, the CSS cascade
assigns a weight to each declaration. This weight is
used to determine exactly, and without conflict, which
style declarations should be applied to a specific
element: the declaration with the highest weight takes
precedence.
What is the cascade?
http://reference.sitepoint.com/css/cascade
And that's "the CSS declaration with the highest weight takes precedence".
So what do we actually mean by this?
@AshNolan_ :
Remember this?
Well going back to our simple block of CSS – this on it's own should hopefully be pretty easy to understand what styles will be applied.
There's only one selector and only one set of properties, so we don't have to worry about which styles will take precedence over any others.
@AshNolan_ :
What happens here?
But what happens if we have some CSS a bit more like this – so here we have 3 selectors, but they're all targeting the same element – our body tag.
And some of the rules in each block are specifying the same thing. So our first and second blocks are both specifying a different background colour on our body tag. So this is where the cascade comes in –
to help us define which rules should take precedence in situations like this.
Now in CSS, rules that are defined lower down in our stylesheet are considered more important than those defined previously if they have the same selector specificity. So here, as the selectors are exactly
the same, the specificity is also the same and so the rules in our third selector block are considered the most important, then the ones defined in the second block, and then finally the ones in the first block.
So the width defined in the third block here, will take precedence over the width defined in the first block, so our page will be 500px wide and not 80% wide. And that's because of the rules of the cascade.
@AshNolan_ :
Selectors
• Element
• Classes
• IDs
• Complex selectors
Now in practice, you'll rarely see examples like that last one where you have the same selector being defined multiple times in one CSS file – I was just using it to illustrate an example – but the cascade does
becomes more important as we look at the other ways that we can select elements in CSS.
The main selectors that we can use are element selectors – which we've been using to select our body element – classes, IDs and complex selectors. So let's take a look at each of these.
@AshNolan_ :
Element selectors
• Matches elements with the corresponding element
type name
• Quite general and not very specific.
Now the selector that you've seen in the examples up to now, where we have been selecting the body tag, is what is called an element selector – and that's because you are selecting a HTML element by it's
tag name.
Now these selectors are quite general and so they tend to be used to define the default styles of your site. So if you want to make every paragraph tag on your website a certain size, you might write some
CSS to do that with an element selector such as this one and set the font-size of all the paragraph tags on your site to a certain value.
@AshNolan_ :
Classes and IDs?
When there is more than one of a given element on the
page, and you want them to look different, you can use
classes and IDs to do this.
<div></div>
<div id=“foo”></div>
<div class=“bar”></div>
Element:
ID:
Class:
Now as your site starts to grow, you may want to style some tags differently to others on your site and this isn't possible just using element selectors – but we two other main methods of selecting tags in CSS
– and that's to use either classes or IDs.
@AshNolan_ :
ID selectors
Matches an element that has a specific id attribute
value. Since id attributes must have unique values, an
ID selector can never match more than one element in
a document.
10:00: So what are both of these?
So IDs match an element that has a specific ID attribute value.
IDs are also unique, which means that you cannot have multiple HTML elements on a page with the same ID, and so this means that an ID selector in CSS can never match more than one element on a page.
@AshNolan_ :
Class selectors
Less specific than an ID because they are not unique
Classes are much more flexible than IDs. HTML elements can have any number of classes, and a class can be applied to multiple HTML elements.
So this means that we can define a CSS class selector that can change the style of multiple things on our webpage, which in practice is a lot more useful than using IDs.
So let's look at a code example to highlight this…
@AshNolan_ :
Selector examples
Selector basics
Complex Selectors
11:00 (5 minutes for demos).
@AshNolan_ :
Selectors and Specificity
- The lower the specificity of your CSS the better
- Use classes to help you achieve this
- More info on CSS selectors here: 

http://ashn.uk/selectors
16:00
Selectors link has all of the different types of selectors you can use to target elements – some of which we haven't had time to cover today.
@AshNolan_ :
CSS Layouts
…or how to put things where you want
them on a webpage
17:00: So the next thing I wanted to briefly cover, was CSS layouts and the different approaches that developers can use for constructing webpage layouts.
@AshNolan_ :
Design Grids
Now as we've only got a limited amount of time today, I wanted to cover probably the most common layout issue in CSS, and that's design grids.
So after things had moved on from the early days of web design using tables for layouts, things progressed towards using design grids.
So what do I mean by a design grid?
@AshNolan_ `
12 Column Grid
6 columns 6 columns
12 columns
4 columns4 columns4 columns
3 columns 3 columns 3 columns 3 columns
2 col2 col2 col2 col2 col2 col
Well an example of a design grid would be something that looks like the following.
So the idea of a grid in web design is that you split up the width of your design into a number of equal width columns – 12 became quite a popular number of columns to use on the web simply because 12 is
also divisible by 1, 2, 3, 4, and 6, so it gives you a good range of widths to design your content to.
So as you can see here, you can have 2 sections that span 6 columns each, or 3 sections that span 4 columns each, and so on.
So the reason that you design a grid like this is that once you have defined your design like this, it helps establish a rhythm and proportion for your site. There are whole talks and articles on grid design out
there so if you're interested in learning more about the thinking that goes into the proportions of grids, it's worth having a read of those to understand those design principles.
@AshNolan_ `http://ashn.uk/gridtool
Now once you know about grids, if you look closer at the websites you visit, then you'll likely be able to see that most of them are designed to a grid of some sort.
So for example, this is a screen recording of me putting a 12 column grid over the BBC website yesterday – and you can see by doing this how the site is designed with this grid in mind as it is aligned to
these 12 grid columns.
If you ever want to do this yourself, there are a few chrome extensions out there that let you do this – the one I'm using is called Design Grid overlay which you can find at that link in the bottom corner.
@AshNolan_ :
Design Grids
How do you implement these in CSS
So in terms of writing CSS, how can you go about implementing a design grid for a site you are building?
@AshNolan_ :
Essentially a way of 'floating' different blocks of
content next to one another.
Floats
https://css-tricks.com/all-about-floats/
Well the way that it was done up until very recently was using a layout technique called floats.
So the float property originates from print design, where in magazines or newspapers it was common to have images set into the page such that text flowed around them.
In CSS, page elements with the float property are just like the images in the print layout – they remain part of the flow of the page, and if surrounded by text content, this will flow around a floated element.
@AshNolan_ :
Essentially a way of 'floating' different blocks of
content next to one another.
Floats
https://css-tricks.com/all-about-floats/
Aside from this simple example of wrapping text around elements, floats can also be used to create entire web layouts.
Essentially, by floating elements, you can make sections of your page sit side-by-side, and some CSS grid frameworks are still built using this technique. So if anyone has heard of Bootstrap which is a
common CSS framework, until recently their grid was using floats to define the grid which came with that.
@AshNolan_ :
Essentially a way of 'floating' different blocks of
content next to one another.
Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
20:00: A couple of years ago, browser support for a layout property called "Flexbox" landed in all mainstream browsers.
Flexbox is short for flexible box model, and it was designed to deal with 2 dimensional layouts. So 2 dimensional layouts are where we are only concerned with one direction of the layout – so either
horizontal or vertical. So with the design grids that we've just been looking at, these are 2 dimensional because we're only concerned with defining the horizontal width of our webpage – so these grids are
actually pretty easy to create using Flexbox, even though grids aren't really the use-case that flexbox was designed to handle. So a lot of the grid frameworks that I mentioned before have now moved on to
being written using flexbox.
Flexbox gives you a lot more power than just specifying columns in a grid, because when writing your layouts in Flexbox it can help your layout adapt to the content on your webpage.
Now this is quite hard to explain just using slides, so let's take a quick look at another code sample.
@AshNolan_ :
Flexbox Reading
Complete Guide to Flexbox
Flexbox in GIFs
Flexbox Froggy
25?
@AshNolan_ :
A new CSS layout standard, that enables you to
specify native grid layouts in CSS.
CSS Grid
https://css-tricks.com/snippets/css/complete-guide-grid/
Now in the last year, an even newer CSS layout technique has started to become supported in the latest browsers, and this technique is called CSS Grid.
Now the idea of CSS Grid is that instead of using floats or flexbox, that were never designed to solve design grids on the web, we now have a truly 3 dimensional layout tool which lets you layout your website
in hugely creative ways.
Show CSS Grid example on Codepen
28:00: Now you might think, surely if I need a grid now when I'm building my own websites, I'd just turn to using the CSS grid property for that.
But one issue that always needs to be considered when writing any front-end code is what browsers your users will be using. So just because you are using the latest version of chrome, doesn't mean that
everyone using your website will be. There might be some people still using old versions of Internet explorer for example, or an older mobile phone which can't run the latest version of iOS on it.
So there's a really good site out there called CanIUse.com that helps you check what browsers support the latest features in HTML, CSS and JavaScript. So this is the current support list for Grid right now, and
although it's quite well supported across major browsers, there are still gaps in support, which means that it's worth either using one of the slightly older techniques, or using a technique called progressive
enhancement.
@AshNolan_ :
Progressive Enhancement
So progressive enhancement is simply where we try to develop our website so that as many of our users get a decent experience, and then use new features using the latest technology features to enhance
the experience for those users on the latest browsers.
By doing this, we don't make our website impossible to use for people with older browsers, they'll just get a experience that might not look quite as nice as if they were to use a more modern browser.
So for companies like Just Eat for example, this is really important as we have millions of users using a huge variety of devices and browsers, and so it's important for us to try and build things in this way.
@AshNolan_ :
Grid Reading
Complete Guide to Grid
Grid by example
Progressively enhancing layouts
More Grid examples
@AshNolan_ :
fonts
30:00: Now another subject that I wanted to really briefly cover was how to add webfonts to a website, so let's take a look at the different options you have for doing this on a site you're developing.
@AshNolan_ :
fonts
font-family:
font-size:
font-weight:
font-style:
line-height:
text-transform:
Arial, Helvetica
20px
normal or bold
normal or italic
1.2 or 20px
uppercase or lowercase
Many different options when styling fonts but you only
need to remember a few:
@AshNolan_ :
font stacks
https://developer.mozilla.org/en-US/docs/Web/CSS/font-family
When setting a font-family, it's important to specify a
number of fonts to create a font stack
So setting:
font-family: Avenir, Arial, sans-serif;
Creates a font-stack where the browser tries to use Avenir as its
top priority. If that font isn't available, it will try to use Arial and
then it will finally falls back to sans-serif.
@AshNolan_ :
Webfonts
Standard system fonts can be fairly limiting to a
websites design.
Web fonts enable us to use fonts that aren't installed
on a users machine, using a property called
@font-face.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
@AshNolan_ :
Webfont Services
Services like, Google Fonts, Typekit or fonts.com allow
us to use specially licensed fonts for use on the web.
Some are open source (free), others need to be
purchased.
Typekit and fonts.com are subscription services but
Google fonts are free.
@AshNolan_ :
Examples of web type
http://hellohappy.org/beautiful-web-type/
http://www.typewolf.com/
Good for inspiration, and so if you're stuck on what fonts to use, it's good to look at sites like these for some design inspiration.
@AshNolan_ :
Web font example
Go to example Codepen
@AshNolan_ :
Webfonts
- Google fonts is a great place to start out
- Experiment!
@AshNolan_ :
Testing
Front End Testing tools
35:00: So finally, I just wanted to spend a couple of minutes to cover what tools I use on a regular basis to help me test the sites that I build.
TMW Code Club
Developer tools
So the first tool, and probably the one I spend the most time using is the Chrome Developer tools. Firefox and Microsoft Edge also have their own developer tools, but I still find Chrome's my personal
favourite.
So Chrome's dev tools let you inspect the web page as you're building it, but it also let's you adjust the CSS on the page that you are inspecting, which is pretty handy for fixing bugs directly on the website
you're building.
@AshNolan_ :
Dev Tools Tips
https://umaar.com/dev-tips/
It has way too many features to go into here, but if you're interested in learrning more about it's features and what's possible a great resource on this is dev tools tips, which is a collection of over 160 tips
showing you what is possible with Chrome's dev tools.
You can also sign up to their email newsletter and they'll send you the latest features every week so you can stay up to date with the latest features being added.
TMW Code Club
BrowserStack
You can get a free trial account on Browserstack, and if you are open sourcing your project you can contact them and get a free account for doing this too.
TMW Code Club
WebPageTest
Used for performance testing your site.
@AshNolan_ :
Further CSS
Some future reading
@AshNolan_ `
One CSS tool that's really worth looking into as you become more confident writing CSS, is called Sass.
So Sass is an extension language that is built on top of CSS and gives you some features that just aren't possible with native CSS right now. So rather than being an all new language, Sass let's you write
standard CSS and just extends this with it's own functionality.
I'm not going to go into huge detail about Sass today, but I'd definitely advise you to take a look at it once you feel more comfortable writing basic CSS, as it gives you a number of great features that help
you write much better CSS code, such as variables, mixin's and functions.
@AshNolan_ `http://codepen.io/davidkpiano/
A really great site to look at for creative examples of what is possible using CSS and JavaScript is called CodePen. One of my favourite examples on the site is this illustration which has been created using
just CSS – so this uses no JavaScript at all, it's created solely using CSS animations and styles.
So this example uses Sass to create what would otherwise be extremely complex CSS animations and he’s created a whole number of animations like this one which you can view by visiting his CodePen
profile, the link to which is on the bottom of this slide, which I'll share with you all afterwards.
CodePen is full of examples like this that show how Sass can be used to help create flexible and maintainable code while creating some incredible visual effects.
@AshNolan_ :
Component driven CSS
So that developers can evolve CSS
components over time
@AshNolan_ :
Component driven development
- Reuse patterns across a website
- Becomes easier to find specific functionality – and
redundancy – in a codebase
- It encourages the extension of styles (through
classes)
- CSS Components are not tightly coupled to a page
context, so can be used anywhere – including other
projects.
@AshNolan_ :
So moving to a real example, this is the current JUST EAT search results page.
Now rather than trying to style up the entire page so it’s specifically a search results page, we can break this down into much simpler components, putting them together to form this page.
So here we can have components for a media element, which would just handle the styling of an image sitting side by side to some text. We can also have a component for our results listing, because this is a style that is actually used in multiple
places on our site. And similarly you break apart this entire page into smaller components – the page navigation, breadcrumb, we have a rating component for the stars in our listing that are used across our site. And we might have a grid layout
component to handle how the overall page layout can be specified.
So by combining all of these components, we build up our search results page, but there’s nothing on this page that couldn’t potentially be used in another part of our site.
There’s a couple of really great resources on this that I’d recommend to anyone interested in learning more, and these are SMACSS by Jonathan Snook and Atomic Design by Brad Frost.
So both of these books explain in more detail how to go about making your CSS more modular, so it’s easily reusable, and go into a lot more detail about components and common issues people face on projects. In the case of SMACSS Jonathan
Snook applies this to the work that he did while he worked at Yahoo, and Atomic design goes into the detail of how this approach can be combined with tools like styleguides and the workflows you can use.
So I’d recommend checking these out if you haven’t already.
@AshNolan_ :
Naming Schemes
i.e. BEM or SUIT
@AshNolan_ :
Thanks
Ashley Nolan
Senior UI Engineer at :
@AshNolan_

More Related Content

What's hot (20)

Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
Thinkful
 
Html for beginners
Html for beginnersHtml for beginners
Html for beginners
Florian Letsch
 
Links and Navigation
Links and NavigationLinks and Navigation
Links and Navigation
sdireland
 
Inline, Block and Positioning in CSS
Inline, Block and Positioning in CSSInline, Block and Positioning in CSS
Inline, Block and Positioning in CSS
UC Berkeley Graduate School of Journalism
 
Visualizing The Code
Visualizing The CodeVisualizing The Code
Visualizing The Code
sdireland
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
vegdwk
 
Better Typography
Better TypographyBetter Typography
Better Typography
markboultondesign
 
Roadmap 01
Roadmap 01Roadmap 01
Roadmap 01
quangnv17071980
 
Food blogging at UBC
Food blogging at UBCFood blogging at UBC
Food blogging at UBC
Tris Hussey
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 
Down and Dirty EPUB 3
Down and Dirty EPUB 3Down and Dirty EPUB 3
Down and Dirty EPUB 3
digitalbindery
 
Designing for WordPress
Designing for WordPressDesigning for WordPress
Designing for WordPress
Liam Dempsey
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Russ Weakley
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
AursalanSayed
 
Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012
Tris Hussey
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Pascal Klein
 
Shaping Up With CSS
Shaping Up With CSSShaping Up With CSS
Shaping Up With CSS
sdireland
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
Suzette Franck
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
Thinkful
 
Links and Navigation
Links and NavigationLinks and Navigation
Links and Navigation
sdireland
 
Visualizing The Code
Visualizing The CodeVisualizing The Code
Visualizing The Code
sdireland
 
Web Design 101
Web Design 101Web Design 101
Web Design 101
vegdwk
 
Food blogging at UBC
Food blogging at UBCFood blogging at UBC
Food blogging at UBC
Tris Hussey
 
Html css crash course may 11th, atlanta
Html css crash course may 11th, atlantaHtml css crash course may 11th, atlanta
Html css crash course may 11th, atlanta
Thinkful
 
Designing for WordPress
Designing for WordPressDesigning for WordPress
Designing for WordPress
Liam Dempsey
 
CSS3 Media Queries
CSS3 Media QueriesCSS3 Media Queries
CSS3 Media Queries
Russ Weakley
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012Building Websites with WordPress UBC Summer 2012
Building Websites with WordPress UBC Summer 2012
Tris Hussey
 
Beautiful Web Typography (#5)
Beautiful Web Typography (#5)Beautiful Web Typography (#5)
Beautiful Web Typography (#5)
Pascal Klein
 
Shaping Up With CSS
Shaping Up With CSSShaping Up With CSS
Shaping Up With CSS
sdireland
 
Intro to Sass for WordPress Developers
Intro to Sass for WordPress DevelopersIntro to Sass for WordPress Developers
Intro to Sass for WordPress Developers
Suzette Franck
 
How to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - SacramentoHow to use CSS3 in WordPress - Sacramento
How to use CSS3 in WordPress - Sacramento
Suzette Franck
 

Similar to Design and CSS (20)

CSS Best Practices
CSS Best PracticesCSS Best Practices
CSS Best Practices
nolly00
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
nikhilsh66131
 
Presentation 1 [autosaved]
Presentation 1 [autosaved]Presentation 1 [autosaved]
Presentation 1 [autosaved]
AbdulrahmaanDhagacad
 
Exploring Our Front-End Workflows
Exploring Our Front-End WorkflowsExploring Our Front-End Workflows
Exploring Our Front-End Workflows
nolly00
 
Reworking our-workflows
Reworking our-workflowsReworking our-workflows
Reworking our-workflows
nolly00
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
Phoenix
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
Zohar Arad
 
CSS 101
CSS 101CSS 101
CSS 101
dunclair
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to css
Neil Perlin
 
INTRODUCTIONS OF CSS
INTRODUCTIONS OF CSSINTRODUCTIONS OF CSS
INTRODUCTIONS OF CSS
SURYANARAYANBISWAL1
 
Srijan presentation on CSS
Srijan presentation on CSSSrijan presentation on CSS
Srijan presentation on CSS
Shashank Merothiya
 
Tutorial5
Tutorial5Tutorial5
Tutorial5
tutorialsruby
 
Tutorial5
Tutorial5Tutorial5
Tutorial5
tutorialsruby
 
Css
CssCss
Css
Jahid Blackrose
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Sanjoy Kr. Paul
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
Timothy Knight
 
Css and its future
Css and its futureCss and its future
Css and its future
Alex Bondarev
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
DignitasDigital1
 
CSS_GUIDE_Intro
CSS_GUIDE_IntroCSS_GUIDE_Intro
CSS_GUIDE_Intro
tutorialsruby
 
CSS Best Practices
CSS Best PracticesCSS Best Practices
CSS Best Practices
nolly00
 
The CSS Handbook
The CSS HandbookThe CSS Handbook
The CSS Handbook
jackchenvlo
 
Exploring Our Front-End Workflows
Exploring Our Front-End WorkflowsExploring Our Front-End Workflows
Exploring Our Front-End Workflows
nolly00
 
Reworking our-workflows
Reworking our-workflowsReworking our-workflows
Reworking our-workflows
nolly00
 
Css masterclass book
Css masterclass bookCss masterclass book
Css masterclass book
Phoenix
 
CSS Methodology
CSS MethodologyCSS Methodology
CSS Methodology
Zohar Arad
 
Spectrum 2015 going online with style - an intro to css
Spectrum 2015   going online with style - an intro to cssSpectrum 2015   going online with style - an intro to css
Spectrum 2015 going online with style - an intro to css
Neil Perlin
 
Structuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSSStructuring your CSS for maintainability: rules and guile lines to write CSS
Structuring your CSS for maintainability: rules and guile lines to write CSS
Sanjoy Kr. Paul
 
Architecting with Style
Architecting with StyleArchitecting with Style
Architecting with Style
Timothy Knight
 
Sass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by ShafeeqSass:-Syntactically Awesome Stylesheet by Shafeeq
Sass:-Syntactically Awesome Stylesheet by Shafeeq
DignitasDigital1
 

More from nolly00 (6)

Exploring the Results of the Front-End Tooling Survey 2018
Exploring the Results of the Front-End Tooling Survey 2018 Exploring the Results of the Front-End Tooling Survey 2018
Exploring the Results of the Front-End Tooling Survey 2018
nolly00
 
Developing for the Unknown
Developing for the UnknownDeveloping for the Unknown
Developing for the Unknown
nolly00
 
TMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS BasicsTMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS Basics
nolly00
 
TMW Code Club Session 1
TMW Code Club Session 1TMW Code Club Session 1
TMW Code Club Session 1
nolly00
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
nolly00
 
Scaling Responsively
Scaling ResponsivelyScaling Responsively
Scaling Responsively
nolly00
 
Exploring the Results of the Front-End Tooling Survey 2018
Exploring the Results of the Front-End Tooling Survey 2018 Exploring the Results of the Front-End Tooling Survey 2018
Exploring the Results of the Front-End Tooling Survey 2018
nolly00
 
Developing for the Unknown
Developing for the UnknownDeveloping for the Unknown
Developing for the Unknown
nolly00
 
TMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS BasicsTMW Code Club – Session 2 - CSS Basics
TMW Code Club – Session 2 - CSS Basics
nolly00
 
TMW Code Club Session 1
TMW Code Club Session 1TMW Code Club Session 1
TMW Code Club Session 1
nolly00
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
nolly00
 
Scaling Responsively
Scaling ResponsivelyScaling Responsively
Scaling Responsively
nolly00
 

Recently uploaded (20)

Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 
Build Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For DevsBuild Your Own Copilot & Agents For Devs
Build Your Own Copilot & Agents For Devs
Brian McKeiver
 
How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?How Can I use the AI Hype in my Business Context?
How Can I use the AI Hype in my Business Context?
Daniel Lehner
 
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...
Impelsys Inc.
 
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded DevelopersLinux Support for SMARC: How Toradex Empowers Embedded Developers
Linux Support for SMARC: How Toradex Empowers Embedded Developers
Toradex
 
Rusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond SparkRusty Waters: Elevating Lakehouses Beyond Spark
Rusty Waters: Elevating Lakehouses Beyond Spark
carlyakerly1
 
Semantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AISemantic Cultivators : The Critical Future Role to Enable AI
Semantic Cultivators : The Critical Future Role to Enable AI
artmondano
 
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxDevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptx
Justin Reock
 
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-UmgebungenHCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
HCL Nomad Web – Best Practices und Verwaltung von Multiuser-Umgebungen
panagenda
 
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Massive Power Outage Hits Spain, Portugal, and France: Causes, Impact, and On...
Aqusag Technologies
 
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul Shares 5 Steps to Implement AI Agents for Maximum Business Efficien...
Noah Loul
 
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager APIUiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPath Community Berlin: Orchestrator API, Swagger, and Test Manager API
UiPathCommunity
 
Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025Splunk Security Update | Public Sector Summit Germany 2025
Splunk Security Update | Public Sector Summit Germany 2025
Splunk
 
Cyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of securityCyber Awareness overview for 2025 month of security
Cyber Awareness overview for 2025 month of security
riccardosl1
 
Linux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdfLinux Professional Institute LPIC-1 Exam.pdf
Linux Professional Institute LPIC-1 Exam.pdf
RHCSA Guru
 
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes Partner Innovation Updates for May 2025
ThousandEyes
 
Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.Greenhouse_Monitoring_Presentation.pptx.
Greenhouse_Monitoring_Presentation.pptx.
hpbmnnxrvb
 
Mobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi ArabiaMobile App Development Company in Saudi Arabia
Mobile App Development Company in Saudi Arabia
Steve Jonas
 
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdfThe Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
The Evolution of Meme Coins A New Era for Digital Currency ppt.pdf
Abi john
 
AI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global TrendsAI and Data Privacy in 2025: Global Trends
AI and Data Privacy in 2025: Global Trends
InData Labs
 
Procurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptxProcurement Insights Cost To Value Guide.pptx
Procurement Insights Cost To Value Guide.pptx
Jon Hansen
 

Design and CSS

  • 1. Ashley Nolan Senior UI Web Engineer at : @AshNolan_ Design & CSS So, I'd just like to start by saying thanks for coming along and for inviting me to come in and talk to you today. So as Simon mentioned, I’m Ashley Nolan, and I work just around the corner from here at Just Eat as a Senior UI Engineer.
  • 2. @AshNolan_ ` So, I’ve been working with the web for around 12 years professionally and I’ve been lucky enough to have worked with some great companies in that time. Most recently, I’ve found myself working on some really high traffic projects such as the BBC Good Food website and now at JUST EAT I’m currently leading the rebuild of our Global Platform.
  • 3. @AshNolan_ ` But I'm here to talk to you today about design and CSS, and although my professional career has spanned about 12 years, I started out playing around with the web in the late 90's when I was back in school - and I only really thought about it when I was putting these slides together but as most of you were only a couple of years old when I was in school – or perhaps not even born at all which is even more depressing to me – you would have missed out on amazing looking website designs such as this one. So this website was released to market the film Space Jam in 1996, and was regarded as being one of the best looking websites back at that time. So as you can see, things were pretty basic when the web started out – and that's just because CSS was a lot more simple than it is now. Layouts traditionally looked quite boxy because they were built using HTML table tags rather than using CSS for layout and you were restricted by the styles that you could apply – for example you could only use built in system fonts so a lot of websites looked pretty similar.
  • 4. @AshNolan_ ` Content StylingBehaviour In terms of the web today, the main front-end technologies that are used to create websites are the same as back when that Space Jam site was built back in 1996, and so that's HTML, CSS and JavaScript – and each of these technologies takes care of different aspects of a website. HTML defines the content you will display on a page. JavaScript, thinking about it's most basic functionality, let’s you create behaviours and handle state on a webpage – such as what happens when someone clicks on an area of your page, or if an event triggers when a user scrolls down your webpage for example. CSS is what styles the content that you specify in your HTML, and that's the main topic I'm going to be talking about today.
  • 5. @AshNolan_ ` 3:00: So when I started playing around with these languages and making websites, I really fell in love with the power that HTML and CSS gave me. CSS in particular was one of the first programming languages that I really connected with when I was starting out. I think like a lot of people who have gone on to become front-end developers – the ability to change some values in CSS and be able to immediately see how those changes affect the visual design of a webpage was much more gratifying to me than when I was learning some of the other programming languages that I was taught. Personally, it’s been fascinating to see what was a pretty basic language back then turn into a language that is now massively powerful, with a mature eco-system of tools and methodologies around it.
  • 6. @AshNolan_ : CSS What we'll cover today • The cascade • Importance, specificity and source order • CSS Layout and design grids • Web fonts • Front-end Testing Tools • Advanced reading So what specifically are we going to cover today in terms of CSS. Well first of all, it'd be really great if I could gauge knowledge levels in the room – because that'll probably adjust the content a little bit - so just in terms of CSS experience who here has never written any CSS before? Ok, great and who has written a little bit of CSS and feels like they know some of the basics of the language. Awesome and is there anyone here who feels like they know CSS reasonably well? So moving on from the basics and feels quite confident using it. Ok, well here's the rough list of things that I plan to cover today. We're going to talk about the basics such as the cascade, as well as what terms such as importance and specificity mean within CSS and how knowing about these can help improve the code that you write. We'll also cover some CSS layout techniques, adding webfonts to a website, and then we'll finish by looking at a couple of front-end testing tools, and some future topics you can go away and look at if you're interested in learning some more about CSS.
  • 7. @AshNolan_ : CSS Cascading Style SheetsContent is styled with CSS 5:00: So, for those of you that don't know, CSS stands for Cascading Style Sheets, and as I mentioned earlier… *CLICK* …CSS is what styles the content on your webpage.
  • 8. @AshNolan_ `http://ashn.uk/devtool So just to show you this more visually, this is what the BBC homepage looks like when you turn CSS off and view it. So you can do this on any webpage using a chrome extension called "Web Developer toolbar". If you'd like to try this out for yourself on any websites, the link to install the extension is in the bottom left of the slide. So as you can see, the web would look pretty boring without CSS and it can be used to style lots of different aspects of a website – you can define colours, font-sizes, how things are laid out and more complex things, like controlling animations and transitions between visual state.
  • 9. @AshNolan_ : Some simple CSS CSS Selector CSS properties 5:45: Its a really simple, declarative language. So the main idea with CSS is that you define a selector, which is the top part of this code block, and then define some CSS properties to show how you want the elements being selected to be styled. So here we're selecting the body tag and we're adding some styles to it, such as a background colour, a width, what font size and font-family to use and to align any text in the centre of our page. Also, one small thing to be aware of in CSS, is that you need to use American spellings when defining properties – so you'll notice that in the above code where we have properties for colour and when centring text – they both use the American spellings of those words.
  • 10. @AshNolan_ : By combining importance, origin, specificity, and the source order of the style concerned, the CSS cascade assigns a weight to each declaration. This weight is used to determine exactly, and without conflict, which style declarations should be applied to a specific element: the declaration with the highest weight takes precedence. What is the cascade? http://reference.sitepoint.com/css/cascade So the C in CSS stands for Cascading, but what does that actually mean? Well there's a really great definition on Sitepoint which describes it as shown here… But I think the most important part of this definition, is the last sentence…
  • 11. @AshNolan_ : By combining importance, origin, specificity, and the source order of the style concerned, the CSS cascade assigns a weight to each declaration. This weight is used to determine exactly, and without conflict, which style declarations should be applied to a specific element: the declaration with the highest weight takes precedence. What is the cascade? http://reference.sitepoint.com/css/cascade And that's "the CSS declaration with the highest weight takes precedence". So what do we actually mean by this?
  • 12. @AshNolan_ : Remember this? Well going back to our simple block of CSS – this on it's own should hopefully be pretty easy to understand what styles will be applied. There's only one selector and only one set of properties, so we don't have to worry about which styles will take precedence over any others.
  • 13. @AshNolan_ : What happens here? But what happens if we have some CSS a bit more like this – so here we have 3 selectors, but they're all targeting the same element – our body tag. And some of the rules in each block are specifying the same thing. So our first and second blocks are both specifying a different background colour on our body tag. So this is where the cascade comes in – to help us define which rules should take precedence in situations like this. Now in CSS, rules that are defined lower down in our stylesheet are considered more important than those defined previously if they have the same selector specificity. So here, as the selectors are exactly the same, the specificity is also the same and so the rules in our third selector block are considered the most important, then the ones defined in the second block, and then finally the ones in the first block. So the width defined in the third block here, will take precedence over the width defined in the first block, so our page will be 500px wide and not 80% wide. And that's because of the rules of the cascade.
  • 14. @AshNolan_ : Selectors • Element • Classes • IDs • Complex selectors Now in practice, you'll rarely see examples like that last one where you have the same selector being defined multiple times in one CSS file – I was just using it to illustrate an example – but the cascade does becomes more important as we look at the other ways that we can select elements in CSS. The main selectors that we can use are element selectors – which we've been using to select our body element – classes, IDs and complex selectors. So let's take a look at each of these.
  • 15. @AshNolan_ : Element selectors • Matches elements with the corresponding element type name • Quite general and not very specific. Now the selector that you've seen in the examples up to now, where we have been selecting the body tag, is what is called an element selector – and that's because you are selecting a HTML element by it's tag name. Now these selectors are quite general and so they tend to be used to define the default styles of your site. So if you want to make every paragraph tag on your website a certain size, you might write some CSS to do that with an element selector such as this one and set the font-size of all the paragraph tags on your site to a certain value.
  • 16. @AshNolan_ : Classes and IDs? When there is more than one of a given element on the page, and you want them to look different, you can use classes and IDs to do this. <div></div> <div id=“foo”></div> <div class=“bar”></div> Element: ID: Class: Now as your site starts to grow, you may want to style some tags differently to others on your site and this isn't possible just using element selectors – but we two other main methods of selecting tags in CSS – and that's to use either classes or IDs.
  • 17. @AshNolan_ : ID selectors Matches an element that has a specific id attribute value. Since id attributes must have unique values, an ID selector can never match more than one element in a document. 10:00: So what are both of these? So IDs match an element that has a specific ID attribute value. IDs are also unique, which means that you cannot have multiple HTML elements on a page with the same ID, and so this means that an ID selector in CSS can never match more than one element on a page.
  • 18. @AshNolan_ : Class selectors Less specific than an ID because they are not unique Classes are much more flexible than IDs. HTML elements can have any number of classes, and a class can be applied to multiple HTML elements. So this means that we can define a CSS class selector that can change the style of multiple things on our webpage, which in practice is a lot more useful than using IDs. So let's look at a code example to highlight this…
  • 19. @AshNolan_ : Selector examples Selector basics Complex Selectors 11:00 (5 minutes for demos).
  • 20. @AshNolan_ : Selectors and Specificity - The lower the specificity of your CSS the better - Use classes to help you achieve this - More info on CSS selectors here: 
 http://ashn.uk/selectors 16:00 Selectors link has all of the different types of selectors you can use to target elements – some of which we haven't had time to cover today.
  • 21. @AshNolan_ : CSS Layouts …or how to put things where you want them on a webpage 17:00: So the next thing I wanted to briefly cover, was CSS layouts and the different approaches that developers can use for constructing webpage layouts.
  • 22. @AshNolan_ : Design Grids Now as we've only got a limited amount of time today, I wanted to cover probably the most common layout issue in CSS, and that's design grids. So after things had moved on from the early days of web design using tables for layouts, things progressed towards using design grids. So what do I mean by a design grid?
  • 23. @AshNolan_ ` 12 Column Grid 6 columns 6 columns 12 columns 4 columns4 columns4 columns 3 columns 3 columns 3 columns 3 columns 2 col2 col2 col2 col2 col2 col Well an example of a design grid would be something that looks like the following. So the idea of a grid in web design is that you split up the width of your design into a number of equal width columns – 12 became quite a popular number of columns to use on the web simply because 12 is also divisible by 1, 2, 3, 4, and 6, so it gives you a good range of widths to design your content to. So as you can see here, you can have 2 sections that span 6 columns each, or 3 sections that span 4 columns each, and so on. So the reason that you design a grid like this is that once you have defined your design like this, it helps establish a rhythm and proportion for your site. There are whole talks and articles on grid design out there so if you're interested in learning more about the thinking that goes into the proportions of grids, it's worth having a read of those to understand those design principles.
  • 24. @AshNolan_ `http://ashn.uk/gridtool Now once you know about grids, if you look closer at the websites you visit, then you'll likely be able to see that most of them are designed to a grid of some sort. So for example, this is a screen recording of me putting a 12 column grid over the BBC website yesterday – and you can see by doing this how the site is designed with this grid in mind as it is aligned to these 12 grid columns. If you ever want to do this yourself, there are a few chrome extensions out there that let you do this – the one I'm using is called Design Grid overlay which you can find at that link in the bottom corner.
  • 25. @AshNolan_ : Design Grids How do you implement these in CSS So in terms of writing CSS, how can you go about implementing a design grid for a site you are building?
  • 26. @AshNolan_ : Essentially a way of 'floating' different blocks of content next to one another. Floats https://css-tricks.com/all-about-floats/ Well the way that it was done up until very recently was using a layout technique called floats. So the float property originates from print design, where in magazines or newspapers it was common to have images set into the page such that text flowed around them. In CSS, page elements with the float property are just like the images in the print layout – they remain part of the flow of the page, and if surrounded by text content, this will flow around a floated element.
  • 27. @AshNolan_ : Essentially a way of 'floating' different blocks of content next to one another. Floats https://css-tricks.com/all-about-floats/ Aside from this simple example of wrapping text around elements, floats can also be used to create entire web layouts. Essentially, by floating elements, you can make sections of your page sit side-by-side, and some CSS grid frameworks are still built using this technique. So if anyone has heard of Bootstrap which is a common CSS framework, until recently their grid was using floats to define the grid which came with that.
  • 28. @AshNolan_ : Essentially a way of 'floating' different blocks of content next to one another. Flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 20:00: A couple of years ago, browser support for a layout property called "Flexbox" landed in all mainstream browsers. Flexbox is short for flexible box model, and it was designed to deal with 2 dimensional layouts. So 2 dimensional layouts are where we are only concerned with one direction of the layout – so either horizontal or vertical. So with the design grids that we've just been looking at, these are 2 dimensional because we're only concerned with defining the horizontal width of our webpage – so these grids are actually pretty easy to create using Flexbox, even though grids aren't really the use-case that flexbox was designed to handle. So a lot of the grid frameworks that I mentioned before have now moved on to being written using flexbox. Flexbox gives you a lot more power than just specifying columns in a grid, because when writing your layouts in Flexbox it can help your layout adapt to the content on your webpage. Now this is quite hard to explain just using slides, so let's take a quick look at another code sample.
  • 29. @AshNolan_ : Flexbox Reading Complete Guide to Flexbox Flexbox in GIFs Flexbox Froggy 25?
  • 30. @AshNolan_ : A new CSS layout standard, that enables you to specify native grid layouts in CSS. CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ Now in the last year, an even newer CSS layout technique has started to become supported in the latest browsers, and this technique is called CSS Grid. Now the idea of CSS Grid is that instead of using floats or flexbox, that were never designed to solve design grids on the web, we now have a truly 3 dimensional layout tool which lets you layout your website in hugely creative ways. Show CSS Grid example on Codepen
  • 31. 28:00: Now you might think, surely if I need a grid now when I'm building my own websites, I'd just turn to using the CSS grid property for that. But one issue that always needs to be considered when writing any front-end code is what browsers your users will be using. So just because you are using the latest version of chrome, doesn't mean that everyone using your website will be. There might be some people still using old versions of Internet explorer for example, or an older mobile phone which can't run the latest version of iOS on it. So there's a really good site out there called CanIUse.com that helps you check what browsers support the latest features in HTML, CSS and JavaScript. So this is the current support list for Grid right now, and although it's quite well supported across major browsers, there are still gaps in support, which means that it's worth either using one of the slightly older techniques, or using a technique called progressive enhancement.
  • 32. @AshNolan_ : Progressive Enhancement So progressive enhancement is simply where we try to develop our website so that as many of our users get a decent experience, and then use new features using the latest technology features to enhance the experience for those users on the latest browsers. By doing this, we don't make our website impossible to use for people with older browsers, they'll just get a experience that might not look quite as nice as if they were to use a more modern browser. So for companies like Just Eat for example, this is really important as we have millions of users using a huge variety of devices and browsers, and so it's important for us to try and build things in this way.
  • 33. @AshNolan_ : Grid Reading Complete Guide to Grid Grid by example Progressively enhancing layouts More Grid examples
  • 34. @AshNolan_ : fonts 30:00: Now another subject that I wanted to really briefly cover was how to add webfonts to a website, so let's take a look at the different options you have for doing this on a site you're developing.
  • 35. @AshNolan_ : fonts font-family: font-size: font-weight: font-style: line-height: text-transform: Arial, Helvetica 20px normal or bold normal or italic 1.2 or 20px uppercase or lowercase Many different options when styling fonts but you only need to remember a few:
  • 36. @AshNolan_ : font stacks https://developer.mozilla.org/en-US/docs/Web/CSS/font-family When setting a font-family, it's important to specify a number of fonts to create a font stack So setting: font-family: Avenir, Arial, sans-serif; Creates a font-stack where the browser tries to use Avenir as its top priority. If that font isn't available, it will try to use Arial and then it will finally falls back to sans-serif.
  • 37. @AshNolan_ : Webfonts Standard system fonts can be fairly limiting to a websites design. Web fonts enable us to use fonts that aren't installed on a users machine, using a property called @font-face. https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
  • 38. @AshNolan_ : Webfont Services Services like, Google Fonts, Typekit or fonts.com allow us to use specially licensed fonts for use on the web. Some are open source (free), others need to be purchased. Typekit and fonts.com are subscription services but Google fonts are free.
  • 39. @AshNolan_ : Examples of web type http://hellohappy.org/beautiful-web-type/ http://www.typewolf.com/ Good for inspiration, and so if you're stuck on what fonts to use, it's good to look at sites like these for some design inspiration.
  • 40. @AshNolan_ : Web font example Go to example Codepen
  • 41. @AshNolan_ : Webfonts - Google fonts is a great place to start out - Experiment!
  • 42. @AshNolan_ : Testing Front End Testing tools 35:00: So finally, I just wanted to spend a couple of minutes to cover what tools I use on a regular basis to help me test the sites that I build.
  • 43. TMW Code Club Developer tools So the first tool, and probably the one I spend the most time using is the Chrome Developer tools. Firefox and Microsoft Edge also have their own developer tools, but I still find Chrome's my personal favourite. So Chrome's dev tools let you inspect the web page as you're building it, but it also let's you adjust the CSS on the page that you are inspecting, which is pretty handy for fixing bugs directly on the website you're building.
  • 44. @AshNolan_ : Dev Tools Tips https://umaar.com/dev-tips/ It has way too many features to go into here, but if you're interested in learrning more about it's features and what's possible a great resource on this is dev tools tips, which is a collection of over 160 tips showing you what is possible with Chrome's dev tools. You can also sign up to their email newsletter and they'll send you the latest features every week so you can stay up to date with the latest features being added.
  • 45. TMW Code Club BrowserStack You can get a free trial account on Browserstack, and if you are open sourcing your project you can contact them and get a free account for doing this too.
  • 46. TMW Code Club WebPageTest Used for performance testing your site.
  • 48. @AshNolan_ ` One CSS tool that's really worth looking into as you become more confident writing CSS, is called Sass. So Sass is an extension language that is built on top of CSS and gives you some features that just aren't possible with native CSS right now. So rather than being an all new language, Sass let's you write standard CSS and just extends this with it's own functionality. I'm not going to go into huge detail about Sass today, but I'd definitely advise you to take a look at it once you feel more comfortable writing basic CSS, as it gives you a number of great features that help you write much better CSS code, such as variables, mixin's and functions.
  • 49. @AshNolan_ `http://codepen.io/davidkpiano/ A really great site to look at for creative examples of what is possible using CSS and JavaScript is called CodePen. One of my favourite examples on the site is this illustration which has been created using just CSS – so this uses no JavaScript at all, it's created solely using CSS animations and styles. So this example uses Sass to create what would otherwise be extremely complex CSS animations and he’s created a whole number of animations like this one which you can view by visiting his CodePen profile, the link to which is on the bottom of this slide, which I'll share with you all afterwards. CodePen is full of examples like this that show how Sass can be used to help create flexible and maintainable code while creating some incredible visual effects.
  • 50. @AshNolan_ : Component driven CSS So that developers can evolve CSS components over time
  • 51. @AshNolan_ : Component driven development - Reuse patterns across a website - Becomes easier to find specific functionality – and redundancy – in a codebase - It encourages the extension of styles (through classes) - CSS Components are not tightly coupled to a page context, so can be used anywhere – including other projects.
  • 52. @AshNolan_ : So moving to a real example, this is the current JUST EAT search results page. Now rather than trying to style up the entire page so it’s specifically a search results page, we can break this down into much simpler components, putting them together to form this page. So here we can have components for a media element, which would just handle the styling of an image sitting side by side to some text. We can also have a component for our results listing, because this is a style that is actually used in multiple places on our site. And similarly you break apart this entire page into smaller components – the page navigation, breadcrumb, we have a rating component for the stars in our listing that are used across our site. And we might have a grid layout component to handle how the overall page layout can be specified. So by combining all of these components, we build up our search results page, but there’s nothing on this page that couldn’t potentially be used in another part of our site.
  • 53. There’s a couple of really great resources on this that I’d recommend to anyone interested in learning more, and these are SMACSS by Jonathan Snook and Atomic Design by Brad Frost. So both of these books explain in more detail how to go about making your CSS more modular, so it’s easily reusable, and go into a lot more detail about components and common issues people face on projects. In the case of SMACSS Jonathan Snook applies this to the work that he did while he worked at Yahoo, and Atomic design goes into the detail of how this approach can be combined with tools like styleguides and the workflows you can use. So I’d recommend checking these out if you haven’t already.
  • 55. @AshNolan_ : Thanks Ashley Nolan Senior UI Engineer at : @AshNolan_