Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
This presentation is based on the third chapter of my textbook Fundamentals of Web Development. The book is published by Addison-Wesley. It can be purchased via http://www.amazon.com/Fundamentals-Web-Development-Randy-Connolly/dp/0133407152.
This book is intended to be used as a textbook on web development suitable for intermediate to upper-level computing students. It may also be of interest to a non-student reader wanting a single book that encompasses the entire breadth of contemporary web development.
This book will be the first in what will hopefully be a textbook series. Each book in the series will have the same topics and coverage but each will use a different web development environment. The first book in the series will use PHP.
To learn more about the book, visit http://www.funwebdev.com.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
This presentation is based on the third chapter of my textbook Fundamentals of Web Development. The book is published by Addison-Wesley. It can be purchased via http://www.amazon.com/Fundamentals-Web-Development-Randy-Connolly/dp/0133407152.
This book is intended to be used as a textbook on web development suitable for intermediate to upper-level computing students. It may also be of interest to a non-student reader wanting a single book that encompasses the entire breadth of contemporary web development.
This book will be the first in what will hopefully be a textbook series. Each book in the series will have the same topics and coverage but each will use a different web development environment. The first book in the series will use PHP.
To learn more about the book, visit http://www.funwebdev.com.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
Structuring your CSS for maintainability: rules and guile lines to write CSSSanjoy Kr. Paul
Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
css-presentation css file with your content add-ins for PowerPoint lets you c...ssc2rbl
This also means that only one style document has to be downloaded for a single site. Using Cascading Style Sheets. 1/1/97. slide 9. STANFORD UNIVERSITY •
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.
Css training tutorial css3 & css4 essentialsQA TrainingHub
Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
These (still) aren't the SCs you're looking for ... (mis)adventures in WCAG 2...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the guidelines' normative text. And, of course, it is not perfect - with some omissions, handwaving, and straight-up loopholes. So where does this leave developers and auditors?
In this talk - a reprise of a previous talk, now updated to cover new SCs from WCAG 2.2 - Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
Pointer Events Working Group update / TPAC 2023 / Patrick H. LaukePatrick Lauke
Update about Pointer Events Level 3 work for the upcoming W3C Technical Plenary and Advisory Committee (TPAC) 2023 in Seville
https://www.youtube.com/watch?v=r0spZl1qaa0
https://w3c.github.io/pointerevents/
https://www.w3.org/TR/pointerevents/
https://www.w3.org/2023/09/TPAC/
https://patrickhlauke.github.io/touch/w3c_tpac2023_pewg/
Cross-posted from https://www.w3.org/2023/09/TPAC/group-updates.html#pointer-events
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
These aren't the SCs you're looking for ... (mis)adventures in WCAG 2.x inter...Patrick Lauke
WCAG is supposed to give us a reasonably objective way of saying whether or not the sites we are building/auditing are "accessible" (to a particular baseline). However, they are only as useful as our understanding and interpretation of the actual guidelines' normative text. And of course they're not perfect - with some omissions, handwaving, and straight up loopholes. So where does this leave developers and auditors? In this talk, Patrick may not have all the answers, but he'll have a good rant around the subject anyway...
Too much accessibility - good intentions, badly implemented / Public Sector F...Patrick Lauke
HTML offers many features and attributes that can make your sites more accessible...but only if they're used wisely. Can there really be "too much accessibility"?
Audio recording: https://archive.org/details/Psf8August2007.PatrickH.Lauke-TooMuchAccessibilityGoodIntentions
Implementing Web Standards across the institution: trials and tribulations of...Patrick Lauke
Patrick H. Lauke - Implementing Web Standards across the institution: trials and tribulations of a redesign / Institutional Web Management Workshop IWMW / Birmingham / 28 July 2004
Geolinking content - experiments in connecting virtual and physical places / ...Patrick Lauke
Patrick H. Lauke: Geolinking content - experiments in connecting virtual and physical places / Institutional Web Management Workshop IWMW / York / 16 July 2007
All change for WCAG 2.0 - what you need to know about the new accessibility g...Patrick Lauke
Patrick H. Lauke: All change for WCAG 2.0 - what you need to know about the new accessibility guidelines / Manchester Digital Development Agency MDDA / 24 March 2009
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any w...Patrick Lauke
Ian Lloyd/Patrick H. Lauke: Accessified - practical accessibility fixes any web developer can use / South By Southwest SXSW / Austin, Texas, 11 March 2007
WAI-ARIA An introduction to Accessible Rich Internet Applications / JavaScrip...Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
WAI-ARIA An introduction to Accessible Rich Internet Applications / CSS Minsk...Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
WAI-ARIA An introduction to Accessible Rich Internet Applications / AccessU 2018Patrick Lauke
Vanilla HTML is limiting and boring. Our clients demand highly engaging and interactive web experiences. And wouldn’t you know, with just a bit of HTML and JavaScript we can craft amazing custom controls, widgets and effects that go far beyond the confines of traditional static markup. But how can we ensure that these custom experiences are both understandable and usable for people with disabilities, and in particular those using assistive technologies such as screen readers?
In this talk, we will look at the basics of making some common custom-built components accessible - covering how browsers and assistive technologies interact, the limitations of HTML, and how ARIA can help make interactive experiences more accessible. In addition, we will explore some of the recent additions in ARIA 1.1, as well as some particular challenges when it comes to traditional ARIA patterns and assistive technologies on mobile/tablet/touch devices.
Evergreen slidedeck at https://patrickhlauke.github.io/aria/presentation/ / https://github.com/patrickhlauke/aria/
Getting touchy - an introduction to touch and pointer events / Frontend NE / ...Patrick Lauke
Beyond smartphones and tablets, touchscreens are finding their way into laptops and even desktop computers. With hardware support for touch becoming increasingly ubiquitous, it's time to explore what new possibilities are available to developers. This session will cover the basics of handling touch events - from making sure simple single-tap interactions are as responsive as possible, all the way to examples of full multitouch, gesture-enabled elements.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
The Art of the Pitch: WordPress Relationships and SalesLaura Byrne
Clients don’t know what they don’t know. What web solutions are right for them? How does WordPress come into the picture? How do you make sure you understand scope and timeline? What do you do if sometime changes?
All these questions and more will be explored as we talk about matching clients’ needs with what your agency offers without pulling teeth or pulling your hair out. Practical tips, and strategies for successful relationship building that leads to closing the deal.
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
PHP Frameworks: I want to break free (IPC Berlin 2024)Ralf Eggert
In this presentation, we examine the challenges and limitations of relying too heavily on PHP frameworks in web development. We discuss the history of PHP and its frameworks to understand how this dependence has evolved. The focus will be on providing concrete tips and strategies to reduce reliance on these frameworks, based on real-world examples and practical considerations. The goal is to equip developers with the skills and knowledge to create more flexible and future-proof web applications. We'll explore the importance of maintaining autonomy in a rapidly changing tech landscape and how to make informed decisions in PHP development.
This talk is aimed at encouraging a more independent approach to using PHP frameworks, moving towards a more flexible and future-proof approach to PHP development.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Styling Your Web Pages with Cascading Style Sheets / EDU course / University of Salford / 13 February 2006
1. Date or reference
Styling Your Web Pages with Cascading Style Sheets
Patrick H. Lauke / WWW Editor / External Relations Division
EDU Session - 13/02/2006
2. 13/10/2006 2
Introduction and aims for the day
Who am I?
• WWW Editor, External
Relations Division
• Responsible for core
University site
• Guidelines and Strategy
and enforcing
consistency / compliance
• Support for web authors
• Using CSS for last 5
years
3. 13/10/2006 3
Aims for the day
CSS a complex subject
• Easy to start with, difficult to master
• Browser issues and incompatibilities
• Sometimes style rules interact in unexpected ways
• Difficulty shedding old habits
What this session is not about:
• comprehensive guide to HTML/CSS
• how to use Dreamweaver, etc
Give an overview of:
• basic principles of web standards
• Introduction to CSS
• A few advanced examples
What do you want to get out of it?
5. 13/10/2006 5
Web standards?
University pages designed with “web standards”.
• Using correct syntax
• Following accepted “grammar rules”
• Ethos of separating content from presentation
6. 13/10/2006 6
Using correct syntax / grammar
Who defines what HTML, CSS and all other
technologies are?
World Wide Web Consortium (W3C) – over 350
organisations www.w3.org
Defined protocols for interoperability – how do you
write a proper webpage…
7. 13/10/2006 7
Standards? Who cares…
HTML itself only meant to “mark up” content.
Dot.com boom, browser wars – Microsoft vs.
Netscape: raft of new, “funky” tags (font, colours,
embed,…)
Designers got interested in the web as purely visual
medium: abuse / perversion of the original idea,
tables for layout, blockquotes for indentation,…
8. 13/10/2006 8
Problems
Problems:
• Markup got more and more complex (content
and presentation)
• Need for WYSIWYG tools
• Incompatibility between browsers (separate
versions, “best viewed with…”)
• Pages don’t degrade nicely (PDAs, print, etc)
• Mixed markup difficult to maintain and change
9. 13/10/2006 9
Solution
Separation of content and presentation
• Markup much cleaner and easier to edit / maintain
• Works fairly consistently across browsers
• Degrades gracefully (print, PDA) and can be styled
differently (e.g. UoS print styles)
• Easy to make sweeping changes to look and feel
10. 13/10/2006 10
What can be achieved with CSS
http://www.csszengarden.com/
Perfect example of what can be achieved by
separating content and presentation:
• HTML always remains the same
• Selecting different CSS changes entire look
Note: most designs use very advanced CSS
techniques, but this gives an idea of what’s
achievable.
11. 13/10/2006 11
Stop worrying about the layout
Once you have your content, first step is to “mark it
up”:
• Not interested in how it looks / displays
• Step back and think: what is this?
• Structure the content, don’t use structure for
visual effect
The following may seem patronisingly basic, but it’s
best to reiterate (meaning got obfuscated over
years of bad practice HTML and WYSIWYG
abuse)
12. 13/10/2006 12
HTML – bare bones
At its core, HTML is a way to tell machines / programmes how
content is structured.
Defines a few rules and the basic structure for a document:
<html>
<head>
Information about the document (meta information)
</head>
<body>
Actual content of the document
</body>
</html>
13. 13/10/2006 13
HTML – bare bones
Defines a set of elements and how to use them to identify
certain parts of a document:
<h1></h1> … <h6></h6>
“this is a heading”
<p></p>
“this is a paragraph”
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
“this is an unordered list”
14. 13/10/2006 14
HTML – bare bones
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
“this is an ordered list”
<strong></strong> and <em></em>
“this is important” and “needs to be emphasised” (admittedly a
fine distinction…even HTML’s choice of names isn’t perfect)
Etc.
Notice: it doesn’t say “this is important and needs to be in bold,
red, with a box around it”
In addition, HTML has two “semantically neutral” elements:
<div></div> and <span></span> used to group elements /
content into logical “things” (more later)
15. 13/10/2006 15
Old-style markup example
Old-style markup (mixing presentation and content)
<p><font size=“+3”><b>This is a
heading</b></font></p>
<p>Blah blah blah</p>
<p><font size=“+3”><b>This is another
heading</b></font></p>
<p>Blah blah blah</p>
<p><font size=“+2”><b>A sub-section</b></font></p>
<p>Blah blah blah</p>
16. 13/10/2006 16
Structural markup example
Using proper, semantic markup
<h1>This is a heading</h1>
<p>Blah blah blah</p>
<h1>This is another heading</h1>
<p>Blah blah blah</p>
<h2>A sub-section</h2>
<p>Blah blah blah</p>
• Machine-readable.
• Convey meaning and structure, not just visual appearance.
• Cfr MS Word and screen readers.
• “But the headings look ugly…” – use CSS
Outline:
•This is a heading
•This is another heading
–A sub-section
17. 13/10/2006 17
HTML – bare bones applied
So, simply need to take your raw, naked content in pure
text and define what everything is.
Why does the browser need to know if something is a
heading or a paragraph?
“semantically / structurally correct” markup has many
advantages:
• It’s the right thing to do (yeah right…)
• Should display properly, regardless of styling / device
capabilities
• Accessibility
• Search engines
18. 13/10/2006 18
Exercise
• Take the old-style piece of markup (mixing up
content and presentation, lacking proper
structure), strip it of its visual aspects, and mark
it up properly.
19. 13/10/2006 19
Structural markup looks boring…
Pure, unstyled markup looks very 1980s
Without any style information, browser reverts to
most basic defaults: size of headings, typeface,
etc
Remember: separation of content and presentation.
We’ve done the first part, now let’s think about
the look…
20. 13/10/2006 20
Cascading Style Sheets
In order to tell browsers how we want content
displayed, we use Cascading Style Sheets
(CSS):
• New language, completely separate from HTML
• More powerful (further control)
• Works by defining rules, and where these rules
are applied in the document
21. 13/10/2006 21
Anatomy of a style
h1 { color: red; }
h1 is the “selector” – where do the rules apply?
color: red; is the “rule” – what the browser should
do visually.
{ } denotes a group – could be one or more rules
applied to a selector.
22. 13/10/2006 22
Commonly used styles
font-family: Arial, Verdana, Sans; (list of font names)
font-size: 150%; (can use pixel, %, em and others)
font-style: italic; (normal, italic, oblique)
font-weight: bold; (normal and bold most supported, but there are others)
line-height: 1.2; (new to CSS, typographic leading – no unit, refers to font size)
Many such rules also use a shorthand notation
font: italic bold 150%/1.2 Arial, Verdana, Sans;
color: #ff0000; (can use hexadecimal, rgb values and keywords)
background-color; #eeeeee;
Hexadecimal shorthand: if the two numbers in each triplet are the same, we can
shorten it to 3 numbers: #ff3355 -> #f35, #ffffff -> #fff
list-style-image: url(bullet.gif);
24. 13/10/2006 24
The box model (cont.)
p { margin-top: 2em; margin-right: 0; margin-
bottom: 2em; margin-left: 1em; }
Or using shorthand
p { margin: 2em 0 2em 1em; }
Same for padding and border (which has a whole
slew of rules, like border-width-bottom etc)
25. 13/10/2006 25
How to marry content with style
3 different ways to add style to content:
1) Inline styles in HTML
<p style=“color: red”>blah</p>
No real separation; should never need to be used.
2) Style definitions in HTML’s HEAD
<head>
…
<style type=“text/css”>
p { color: red; }
</style>
</head>
Still not separated, but slightly better; can be useful for quick
“one off” styles on a single page.
26. 13/10/2006 26
How to marry content with style
3) External style sheets (with reference in HEAD)
<link rel=“stylesheet” href=“/common/style.css” />
Complete separation; many pages can refer back to
this single style – easy to make sweeping
changes in look / feel; styles can be cached
(improved speed, bandwidth saving)
27. 13/10/2006 27
Different types of selectors
Many different ways of defining where a set of rules applies,
from the general to the specific:
p { … }
Generic: all paragraphs
div p { … }
All paragraphs contained within a div
You can make the same rules apply to more than one type of
element by putting multiple selectors, separated by a
comma:
ul, ol { … }
28. 13/10/2006 28
Exercise
• Using an external style sheet, try to match at
least part of the look of the original document
with simple CSS rules.
29. 13/10/2006 29
Getting specific
What if we don’t want to apply styles to all types of an
element, but only a single one or a specific type of
them?
p.comment { … }
All paragraphs with a class of “comment”
There can be one or more elements with a class in the same
page. You can also apply a class to different elements
To style “anything” with a given class, you can leave the
selector very general:
.comment { … }
30. 13/10/2006 30
Getting specific (cont.)
p#introduction { … }
Only the paragraph with the unique ID “introduction”
There can be only a single occurrence of an ID in
the same page.
To make the rule apply to anything with that
particular ID, generic rule:
#introduction { … }
31. 13/10/2006 31
The cascade
“Cascading” refers to the way multiple styles which apply to the
same elements interact:
p { border: 1px blue solid; }
p.comment { color: red; }
The paragraph with class “comment” will be red, but also have a
border.
p { color: red; }
p.comment { color: blue; }
The second rule overrides the first for paragraphs with class “comment”
Additional, complex rules of “specificity”: the more specific the selector,
the higher the precedence its rules take (important when overriding
rules)
32. 13/10/2006 32
The inheritance
“Inheritance” refers to the way certain styles defined on a
parent element are passed on to its children:
body { color: #000; }
Applies to the body, but is also inherited by all of the
body’s children.
Not all styles are inherited (e.g. margin,padding,border)
33. 13/10/2006 33
Inheritance “gotcha”
Particular care needs to be taken with relative font sizes
and inheritance.
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
If we have a rule that defines the text size for the whole
body, defining another relative font size for the list
items will compound the size:
body { font-size: 75%; }
li { font-size: 75%; }
The actual font size of the list items is now
75% of 75% = 56.25%
34. 13/10/2006 34
Classitis, divitis, excessive IDs
The temptation is great to start adding classes to
everything you want to style.
Taking advantage of selectors, cascade and
inheritance you can write far more concise
markup and style rules.
36. 13/10/2006 36
Classitis
Far more concise
<ul class=“ingredients”>
<li>sugar</li>
<li>water</li>
<li>flour</li>
</ul>
ul.ingredients li { color: #f00; … }
37. 13/10/2006 37
Inheritance/cascade
Even more concise
<ul class=“ingredients”>
<li>sugar</li>
<li>water</li>
<li>flour</li>
</ul>
ul.ingredients { color: #f00; … }
As the color is inherited by the child elements of ul.
38. 13/10/2006 38
Good class/ID names
As we’re working with content when adding classes and
Ids, we should strive to use “semantic” (meaningful)
names for those as well.
<p class=“red”>This paragraph is highlighted because it’s
important</p>
What if we later redefine that everything important should
be blue instead?
.red { color: blue; }
Instead we use something more meaningful, like
.important { color: blue; }
39. 13/10/2006 39
Multiple style sheets/definitions
You can add multiple style sheets/definitions to the same
document:
…
<head>
….
<link rel=“stylesheet” href=“style1.css” />
<link rel=“stylesheet” href=“style2.css” />
….
<style type=“text/css”>
….
</style>
</head>
Order here is important, combined with cascade and
inheritance.
40. 13/10/2006 40
Specificity can override order
Order of style rules (either in same style sheet or
multiple style sheets) determines if a rule gets
redefined.
p { color: red; }
… more rules …
p { color: blue; }
However…
41. 13/10/2006 41
Specificity can override order (cont)
div p { color: red; }
…
p { color: blue; }
First rule is more specific (rule of thumb: more
complex selector has greater specificity)
42. 13/10/2006 42
Common techniques: backgrounds
Adding background images that tile:
body { background-image: url(tileimage.gif); }
You can also have backgrounds that tile only in one
direction:
body {
background-image: url(topgradient.gif);
background-repeat: repeat-x;
}
43. 13/10/2006 43
Common techniques: backgrounds
and define where the tiling starts
body {
background-image: url(topgradient.gif);
background-repeat: repeat-x;
background-position: top left;
}
44. 13/10/2006 44
Common techniques: backgrounds
Now, we can use backgrounds to add purely
decorative images (images that don’t serve a
purpose other than eye candy) by using a non-
repeating background (and use shorthand):
p.notice { background: url(warning.gif) no-repeat top left; }
Ensure that we apply enough padding for the image
to show properly.
In old ways, this would have involved adding an
image to the markup and aligning it left. Now the
content is cleaner.
45. 13/10/2006 45
Entire layout via CSS
Traditionally, designers used tables to create layouts.
Grids are a familiar tool for designers.
Table markup is meant for tabular data – think Excel
spreadsheets.
Layout is presentational, so should be handled via CSS.
This way, layouts can also be adapted to different media
(e.g. screen, print, etc)
Most difficult part of CSS: producing solid, stable layouts
that are “bullet proof”
46. 13/10/2006 46
CSS layout: floating
Blocks of content can be “floated” (see for instance
http://css.maxdesign.com.au/floatutorial/ for good
tutorial)
float: left; or float: right;
Padding and margin still taken into account.
47. 13/10/2006 47
CSS layout: floating (cont.)
Make sure you define a width for the floated content
via the width rule.
If you define a width in %, it refers to the parent
element’s width.
div { width: 80%; }
div p { width: 50%; }
The paragraph would get a width of 50% of 80% = 40%
48. 13/10/2006 48
CSS layout: floating
You can also define width based on size of font,
making it an elastic box;
p { width: 10em; }
49. 13/10/2006 49
CSS layout: floating
With floating, “source order” (where something
appears in the markup) is important and can
affect the appearance of the float.
Nonetheless, you should aim to ensure that the
source order is logical, and try not to change
your content markup to suit your presentational
needs.
Example of a two column layout and possible ways
around it: float the right-hand column, float both.
50. 13/10/2006 50
CSS layout: floating
To add further content after all the floating, and
make sure it’s below the floated blocks, we use a
rule to “clear” any floats;
p.notice { clear: both; }
52. 13/10/2006 52
CSS layout: positioning
Another method to create layouts is via absolute
positioning of blocks of content.
Most complex part of CSS, so we won’t touch on
this here though.
53. 13/10/2006 53
Cross-browser compatibility
All these techniques are based on standards,
defined by W3C.
Some browsers (mainly Internet Explorer) don’t
understand all rules, have quite serious bugs, or
just different default browser styles.
Methodology to follow:
- write clean HTML/CSS
- validate (to ensure no syntax errors are present)
- test in as many browsers as possible
54. 13/10/2006 54
Cross-browser compatibility (cont.)
W3C validation service:
HTML: http://validator.w3.org/
CSS: http://jigsaw.w3.org/css-validator/
Similar to spell checkers: ensures that the words are
spelt correctly…can’t ensure that they actually make
sense though.
Minimises weird display due to errors in your
content/style though (e.g. multiple elements with
same ID) which can be handled differently by different
browsers.
55. 13/10/2006 55
Links and references
Web:
http://webstandards.org/
http://webstandardsgroup.org/
http://www.w3.org/MarkUp/
http://www.w3.org/TR/CSS21/
http://www.meyerweb.com/eric/css/
Books:
• Eric Meyer - Eric Meyer on CSS: Mastering the Language of Web Design
• Dan Cederholm - Bulletproof Web Design : Improving flexibility and protecting
against worst-case scenarios with XHTML and CSS
• Jeffrey Zeldman - Designing with Web Standards
• Dan Cederholm - Web Standards Solutions: The Markup and Style Handbook
• Dave Shea, Molly E. Holzschlag - The Zen of CSS Design : Visual
Enlightenment for the Web