The document discusses various techniques for writing professional CSS, including:
- CSS allows for rich styling and separates presentation from structure.
- Basic CSS rules include using selectors to style elements, grouping styles, and inheritance.
- More advanced selectors include class, ID, attribute, and pseudo-class selectors.
- The cascade, inheritance, and specificity determine which styles take precedence.
- Proper use of CSS structure, selectors, and rules allows for clean separation of concerns and maintainable styling.
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
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
More on Object Oriented CSS at the Silicon Valley JavaScript Meet Up. How to extend objects, avoiding location dependent styles, and best practices for fast sites.
How do you scale CSS for millions of visitors or thousands of pages? The slides from Nicole's presentation at Web Directions North in Denver will show you how to use Object Oriented CSS to write fast, maintainable, standards-based front end code. Adds much needed predictability to CSS so that even beginners can participate in writing beautiful, standards-compliant, fast websites.
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
In this Java Spring Training session, you will learn Spring – Inversion of Control, Dependency Injection and Bean definitions. Topics covered in this session are:
For more information, visit this link:
Spring Framework
• Core Container
• Data Access/Integration
• Web Layer
• Spring Setup
• Key features
• Spring Bean
• Dependency Injection
• Relation between DI and IoC
• Spring IoC Containers
• Spring DI
https://www.mindsmapped.com/courses/software-development/spring-fundamentals-learn-spring-framework-and-spring-boot/
This lesson teaches ASP.NET Core MVC and Entity Framework Core with controllers and views.
The EMS sample web application demonstrates how to create ASP.NET Core 2.2 MVC web applications using Entity Framework (EF) Core 2.0 and Visual Studio 2017.
Angular - Chapter 9 - Authentication and AuthorizationWebStackAcademy
Authentication is the process of validating a user on the credentials (username and password)
and provide access to the web application(ex: Email)
Authorization helps you to control access rights by granting or denying specific permissions
to an authenticated user (Ex: User / Manager / Admin).
The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width , border-style , border-color .
The basics to start developing Rich Internet applications.
This presentation talks about some of the important stuff to follow to make the web application both interactive and robust
(Part 1 of 2) Cascading Style Sheets (CSS) control the look and feel of modern web pages while also separating presentation from content. Learn comprehensive CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design. This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues.
In this Java Spring Training session, you will learn Spring – Inversion of Control, Dependency Injection and Bean definitions. Topics covered in this session are:
For more information, visit this link:
Spring Framework
• Core Container
• Data Access/Integration
• Web Layer
• Spring Setup
• Key features
• Spring Bean
• Dependency Injection
• Relation between DI and IoC
• Spring IoC Containers
• Spring DI
https://www.mindsmapped.com/courses/software-development/spring-fundamentals-learn-spring-framework-and-spring-boot/
This lesson teaches ASP.NET Core MVC and Entity Framework Core with controllers and views.
The EMS sample web application demonstrates how to create ASP.NET Core 2.2 MVC web applications using Entity Framework (EF) Core 2.0 and Visual Studio 2017.
Angular - Chapter 9 - Authentication and AuthorizationWebStackAcademy
Authentication is the process of validating a user on the credentials (username and password)
and provide access to the web application(ex: Email)
Authorization helps you to control access rights by granting or denying specific permissions
to an authenticated user (Ex: User / Manager / Admin).
The border CSS property is a shorthand property for setting the individual border property values in a single place in the style sheet. border can be used to set the values for one or more of: border-width , border-style , border-color .
The basics to start developing Rich Internet applications.
This presentation talks about some of the important stuff to follow to make the web application both interactive and robust
(Part 1 of 2) Cascading Style Sheets (CSS) control the look and feel of modern web pages while also separating presentation from content. Learn comprehensive CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design. This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues.
In this session, Michael Alford and Mark Meeker will describe the major business goals that drove the development of Orbitz Worldwide’s next generation online travel commerce platform, and how those goals were met with Spring and other technologies.
Last summer, Orbitz Worldwide released a new generation of its global technology platform with the goals of internationalization, white-label capability, and faster, streamlined development. Michael and Mark will describe the key challenges of this technology project and how those challenges were addressed, including the good, bad, and ugly of the Spring Framework and Spring Web Flow.
This is an overview session that touches onto all kinds of new developments in the wide field of web design. This talk is mainly focussed on client side technologies (HTML, CSS, JavaScript) and outlines the news of the past months. If you have not been following the buzz lately, this is a good session to get you up to speed.
(Part 2 of 2) Cascading Style Sheets (CSS) control the look and feel of modern web pages while also separating presentation from content. Learn comprehensive CSS techniques in this step-by-step coding demonstration that starts with an un-styled web page and ends up with a finished design. This presentation will also touch on accessibility, semantic markup, visual design and other site-design related issues.
Evolution of the web through the lens of a developer
Tech Talk @ Georgia Gwinnett University,
1000 University Center Lane
Lawrenceville, GA 30043
Talk Schedule :
http://www.ggc.edu/ggc-life/campus-events/icalrepeat.detail/2011/03/09/744/27|25|26/Yjc4Zjg4NjM1NTAyN2JlMzRmNjczZWMzYzA2Y2JhMjU=
YUI or Yahoo! User Interface Libraries is a rich collection of Javascript and CSS libraries that
can help a web developer create rich experiences and highly interactive web sites. The libraries
are open source and there is a active community around it.
YUI 2 was hugely successful with its large collection of utilities and Widgets. Many Yahoo! sites and non Yahoo! sites use these libraries extensively. YUI 3 is the latest offering from Yahoo! that is a much more extensible and powerful Javascript and CSS library. YUI 3 incorporates all the learnings from the experiences creating YUI 2 libraries and many web standards.
Todays talk is an introduction into YUI 3 as an Open Source Project and how a developer can get on to contributing to YUI. The talk will give various pointers and references that will allow some one to start exploring the YUI libraries, more specifically YUI 3.0
Asynchronous development in javascript can be a very powerful development paradigm. Ajax applications make use of this paradigm. This presentation will provide an insight about the important things to consider while creating Rich Internet applications
Unlocking Productivity: Leveraging the Potential of Copilot in Microsoft 365, a presentation by Christoforos Vlachos, Senior Solutions Manager – Modern Workplace, Uni Systems
SAP Sapphire 2024 - ASUG301 building better apps with SAP Fiori.pdfPeter Spielvogel
Building better applications for business users with SAP Fiori.
• What is SAP Fiori and why it matters to you
• How a better user experience drives measurable business benefits
• How to get started with SAP Fiori today
• How SAP Fiori elements accelerates application development
• How SAP Build Code includes SAP Fiori tools and other generative artificial intelligence capabilities
• How SAP Fiori paves the way for using AI in SAP apps
Dr. Sean Tan, Head of Data Science, Changi Airport Group
Discover how Changi Airport Group (CAG) leverages graph technologies and generative AI to revolutionize their search capabilities. This session delves into the unique search needs of CAG’s diverse passengers and customers, showcasing how graph data structures enhance the accuracy and relevance of AI-generated search results, mitigating the risk of “hallucinations” and improving the overall customer journey.
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.
In his public lecture, Christian Timmerer provides insights into the fascinating history of video streaming, starting from its humble beginnings before YouTube to the groundbreaking technologies that now dominate platforms like Netflix and ORF ON. Timmerer also presents provocative contributions of his own that have significantly influenced the industry. He concludes by looking at future challenges and invites the audience to join in a discussion.
Removing Uninteresting Bytes in Software FuzzingAftab Hussain
Imagine a world where software fuzzing, the process of mutating bytes in test seeds to uncover hidden and erroneous program behaviors, becomes faster and more effective. A lot depends on the initial seeds, which can significantly dictate the trajectory of a fuzzing campaign, particularly in terms of how long it takes to uncover interesting behaviour in your code. We introduce DIAR, a technique designed to speedup fuzzing campaigns by pinpointing and eliminating those uninteresting bytes in the seeds. Picture this: instead of wasting valuable resources on meaningless mutations in large, bloated seeds, DIAR removes the unnecessary bytes, streamlining the entire process.
In this work, we equipped AFL, a popular fuzzer, with DIAR and examined two critical Linux libraries -- Libxml's xmllint, a tool for parsing xml documents, and Binutil's readelf, an essential debugging and security analysis command-line tool used to display detailed information about ELF (Executable and Linkable Format). Our preliminary results show that AFL+DIAR does not only discover new paths more quickly but also achieves higher coverage overall. This work thus showcases how starting with lean and optimized seeds can lead to faster, more comprehensive fuzzing campaigns -- and DIAR helps you find such seeds.
- These are slides of the talk given at IEEE International Conference on Software Testing Verification and Validation Workshop, ICSTW 2022.
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.
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.
Threats to mobile devices are more prevalent and increasing in scope and complexity. Users of mobile devices desire to take full advantage of the features
available on those devices, but many of the features provide convenience and capability but sacrifice security. This best practices guide outlines steps the users can take to better protect personal devices and information.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
Sudheer Mechineni, Head of Application Frameworks, Standard Chartered Bank
Discover how Standard Chartered Bank harnessed the power of Neo4j to transform complex data access challenges into a dynamic, scalable graph database solution. This keynote will cover their journey from initial adoption to deploying a fully automated, enterprise-grade causal cluster, highlighting key strategies for modelling organisational changes and ensuring robust disaster recovery. Learn how these innovations have not only enhanced Standard Chartered Bank’s data infrastructure but also positioned them as pioneers in the banking sector’s adoption of graph technology.
Communications Mining Series - Zero to Hero - Session 1DianaGray10
This session provides introduction to UiPath Communication Mining, importance and platform overview. You will acquire a good understand of the phases in Communication Mining as we go over the platform with you. Topics covered:
• Communication Mining Overview
• Why is it important?
• How can it help today’s business and the benefits
• Phases in Communication Mining
• Demo on Platform overview
• Q/A
Essentials of Automations: The Art of Triggers and Actions in FMESafe Software
In this second installment of our Essentials of Automations webinar series, we’ll explore the landscape of triggers and actions, guiding you through the nuances of authoring and adapting workspaces for seamless automations. Gain an understanding of the full spectrum of triggers and actions available in FME, empowering you to enhance your workspaces for efficient automation.
We’ll kick things off by showcasing the most commonly used event-based triggers, introducing you to various automation workflows like manual triggers, schedules, directory watchers, and more. Plus, see how these elements play out in real scenarios.
Whether you’re tweaking your current setup or building from the ground up, this session will arm you with the tools and insights needed to transform your FME usage into a powerhouse of productivity. Join us to discover effective strategies that simplify complex processes, enhancing your productivity and transforming your data management practices with FME. Let’s turn complexity into clarity and make your workspaces work wonders!
Essentials of Automations: The Art of Triggers and Actions in FME
Professional Css
1. Writing Professional CSS
Manage presentation better on today’s web pages
Subramanyan Murali
Yahoo!
Frontend Engineer, YDN Evangelist
2. Overview
• The Web's Fall from Grace
• CSS to the Rescue
– Rich styling
• Ease of use
– Basic Rules
– Grouping
• Class and ID Selectors
• Attribute Selectors
• Using Document Structure
• Pseudo-Classes and Pseudo-Elements
Technical Presentation 2
3. Overview …
• Structure and the Cascade
– Inheritance
– Specificity
– Cascade
• Visual Formatting model
– Floating and Positioning
• Managing your CSS
– Markup and Page design
• References
Technical Presentation 3
5. Some Perspective
• HTML was a fairly lean language
– It was originally intended to be a structural markup
language, used to describe the various parts of a
document
• Very little was said about how those parts should be
displayed.
– The language wasn't concerned with appearance—it was
just a clean little markup scheme.
• Gradually, presentational aspects of the web were
explored in HTML
6. Some Perspective …
• As a result of these pressures, markup began to adapt
with presentational aspects
• Elements like <FONT> and <BIG> started to creep into
the language.
• Suddenly, a structural language started to become
presentational
• For this reason, CSS was invented.
Technical Presentation 6
8. Cascading style sheets
• The problem of polluting HTML with presentational
markup was not lost on the World Wide Web Consortium
(W3C)
• CSS was W3Cs quick solution to this growing problem
– In 1995, the consortium started publicizing a work-in-
progress called CSS
– By 1996, it had become a full Recommendation, with the
same weight as HTML itself
9. Cascading style sheets …
• CSS allows for much richer document appearances than
HTML ever allowed
• CSS allows for rich styling
– Set colors
– Background colors, images and transparency
– Creation of borders, increase or decrease of the space
around them
– Text decorations
– Formatting and display
Technical Presentation 9
11. Basic Rules
• Any HTML element on the page can be reached and
styled
• Properly written style sheets can can drastically reduce
a web author's workload
– centralize all of the style information for a page in one
place
• CSS also makes provisions for conflicting rules; these
provisions are collectively referred to as the cascade
• CSS is markup independent, element can be changed
but the style applied can remain
Technical Presentation 11
12. Basic Rules …
• Presentational attributes can be inherited from parent
• CSS made some presentational markup un-necessary
– <font>, <basefont>, <u>, <strike>, <s>, and <center>
• Separate CSS files for display and print media aid better
organization and presentation
• The CSS language is human readable and writable, and
expresses style in common desktop publishing
terminology
Technical Presentation 12
13. Grouping
• Each style property can be individually specified as
style attributes, or multiple style attributes can be
grouped
• Grouping can reduce the size of the style sheet, while
making it concise and some times more readable
• Grouped styles can be individually over-ridden
• CSS selectors can be grouped as well
h1, h2, h3 { color: #000;}
#someid, .someclass { margin:2px 4px; }
body { font: 18px Helvetica; }
Technical 13
Presentation
14. Lets dive in to details
Technical
14
Presentation
15. Selectors
• Primary advantages of CSS is its ability to easily apply a
set of styles to all elements of the same type identified
by a selector
• Document elements can be directly referenced in CSS
• Classes (.) are HTML attributes that can be used to
apply styles
– Classes can be duplicated
• IDs ( # ) are unique identifiers to the HTML element
– IDs have higher specificity value
16. Selectors …
• Document elements, Class and ID selectors can be used
together
• The period helps keep the class selector separate from
anything with which it might be combined an element
selector
• Classes can be nested in HTML
<div class=‘item warning’>some text</div>
.item { padding:5px; }
.warning { color: red; }
.item.warning{ font-weight:bold; }
Technical 16
Presentation
17. Attribute Selectors
• The syntax used in the previous two sections is
particular to HTML, SVG, and MathML documents
– In other markup languages, these class and ID selectors
may not be available
• To address this situation, CSS2 introduced attribute
selectors, which can be used to select elements based
on their attributes and the values of those attributes
– Simple Attribute Selection
– Selection Based on Exact Attribute Value
– Selection Based on Partial Attribute Values
– A Particular Attribute Selection Type
Technical 17
Presentation
18. Attribute Selectors …
• Attribute selectors are supported by
– Safari
– Opera
– Gecko-based browsers
– Not by Internet Explorer up through IE5/Mac and IE6/Win
– IE7 fully supports all CSS2.1 attribute selectors, as well as
a few CSS3 attribute selectors
• YUI 3 Node utility uses selector paradigm
Technical 18
Presentation
19. Simple Attribute Selectors
• h1[class] {color: silver;}
– will set style to all elements with a class attribute
• img[alt] { border: 3px solid red; }
• This strategy is very useful in XML documents, as XML
languages tend to have element and attribute names
that are very specific to their purpose
• planet[moons] {font-weight: bold;}
Technical 19
Presentation
20. Exact Attribute Value selectors
• In addition to selecting elements with attributes, you can
further narrow the selection process to encompass only
those elements whose attributes are a certain value
• form [name=‘testForm’] input { border: 1px solid; }
• Useful in XML as well
• planet[type=‘barren rocky’] {font-weight: bold;}
Technical 20
Presentation
21. Partial Attribute Values Selectors
• For any attribute that accepts a space-separated list of
words, it is possible to select based on the presence of
any one of those words
• The classic example in HTML is the class attribute,
which can accept one or more words as its value
• div [class ~= ‘warning’ ] { font-weight: bold; }
• span[class *= ‘yahoo_’] {font-style: italic;}
• span[class ^= ‘bar’] {background: silver;}
• span[class $= ‘y’] {font-weight: bold;}
Technical 21
Presentation
22. Particular Attribute Selection Type
• *[lang |= ‘en’] {color: white;}
• This rule will select any element whose lang attribute is
equal to en or begins with en-
• In general, the form [att |= ‘val’ ] can be used for any
attribute and its values.
• You can match all of these images with file name with
figure using the following selector:
img[src |= ‘figure’] {border: 1px solid gray;}
Technical 22
Presentation
23. Pseudo-Classes and Pseudo-Elements
• These selectors let you assign styles to structures that
don't necessarily exist in the document
– To phantom classes that are inferred by the state of
certain elements, or even by the state of the document
itself
• The styles are applied to pieces of a document based on
something other than the structure of the document
• Applying styles based on somewhat ephemeral
conditions that can't be predicted in advance
Technical 23
Presentation
24. Pseudo-Classes
• a:visited {color: red;}
• a#footer-copyright:link {font-weight: bold;}
• a#footer-copyright:visited {font-weight: normal;}
• Dynamic pseudo-classes
– CSS2.1 defines three pseudo-classes that can change a
document's appearance as a result of user behavior
– These dynamic pseudo-classes can be more widely
applied
• a:hover {color: red;}
• a:active {color: yellow;}
• input:focus { font-weight: bold; }
• body *:hover {background: yellow;}
Technical 24
Presentation
25. Pseudo-Classes …
• Dynamic pseudo-classes can cause some issues on the
page
• Consider
– a:link, a:visited {font-size: 13px;}
– a:hover {font-size: 20px;}
• A user agent that supports this behavior must redraw
the document while an anchor is in hover state
– This causes reflow which is not supported as per CSS
specification
Technical 25
Presentation
26. Pseudo-Classes …
• Static pseudo-class, :first-child, is used to select
elements that are the first children of other elements
• p:first-child {font-weight: bold;}
• li:first-child {text-transform: uppercase;}
Technical 26
Presentation
27. Pseudo-Elements
• Pseudo-elements insert fictional elements into a
document in order to achieve certain effects
• Four pseudo-elements are defined in CSS2.1
– styling the first letter
– styling the first line
– styling before elements
– styling after elements
• h2:first-letter {font-size: 200%;}
• p:first-line {color: purple;}
Technical 27
Presentation
28. Pseudo-Elements …
• In CSS2, the :first-letter and :first-line pseudo-elements
can be applied only to block-level elements
– In CSS2.1, :first-letter applies to all elements
• Using CSS, we can place arbitrary content before or
after a given element
– h2:before {content: ”>>quot;; color: #c0c0c0;}
– body:after {content: quot; The End.quot;;}
• This forms part of what is called generated content,
which adds presentation to the content in the DOM
• :after is heavily used to fix the wrapping of container
boxes to 2 floated elements
Technical 28
Presentation
30. Document Structure
body
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
ul p [id=‘main’] cite
li li li h1
text text text text text text
31. Inheritance
• Inheritance is the mechanism by which styles are
body
applied not only to a specified element, but also to its
descendants
body {font-size: 13px; }
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
div.bd #main h1 { font-size: 1.2em; }
div.nv ul li a:hover { font-size: 1.05em; color:#efefef; }
ul p [id=‘main’] cite
• Certain style attributes are not inherited like border
– Can be deduced based on common sense
li li h1
• Somelibrowsers have inheritance bugs
text text text text text text
Technical 31
Presentation
32. Cascade
• CSS is based on a method of causing styles to cascade
body
together
• As a thumb rule, we can say that the CSS style that is at
the closest to the HTML element will take precedence
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
• Inline styles take maximum precedence
– !important can help styles to over write inline styles, but
its not recommended
ul p [id=‘main’] cite
• Cascade can be decided based on Specificity and
Inheritance of styles as well
li li li h1
text text text text text text
Technical 32
Presentation
33. Cascade …
• Understanding the CSS cascade along with Specificity
body
can be very important when code bases mix
• The style applied to a given element will be a computed
based on cascade, inheritance, nesting div [class=‘ft’]
div [class=‘nv’] div [class=‘bd’] and specificity
– It’s a union of various styles
– This is Style conflict resolution
ul p [id=‘main’] cite
li li li h1
text text text text text text
Technical 33
Presentation
34. Specificity
• Specificity : It is a process used to determine which
body
rules take precedence in CSS when several rules could
be applied to the same element in markup
• In simple terms means which style is more specific to
div [class=‘nv’] div [class=‘bd’] div [class=‘ft’]
the element under question
• Specificity calculations aid
ul p [id=‘main’] cite
Class,
Inline Style ID Pseudo-Class, Element
Selectors Selectors Attributes Selectors
Selectors
li li li h1
1000 100 10 1
text text text text text text
Technical 34
Presentation
35. Specificity …
• .nv ul li { … } body
• body > div.nv ul li { … }
• div.bd p { … }
• div.bd p#main h1 { … } div [class=‘bd’]
div [class=‘nv’] div [class=‘ft’]
• body div.ft cite { … }
ul p [id=‘main’] cite
li li li h1
text text text text text text
Technical 35
Presentation
37. Box Model
• CSS assumes that every element generates one or more
rectangular boxes, called element boxes
• Element box has a content area at its core
• The content area is surrounded by optional amounts of
padding, borders, and margins
– These are all considered optional as they all can be zero
• Every element is laid out with respect to its containing
block
– In a very real way, the containing block is the ‘layout
context’ for an element
38. Box Model …
<body>
<div>
<p>This is a paragraph</p>
</div>
</body> Containing Block
Margins
Border
Padding
Content area
• The layout of the ‘p’ is dependent on the layout of the ‘div’, which is
in turn dependent on the layout of the ‘body’
Technical 38
Presentation
39. Box Model …
• Normal flow
– The left-to-right, top-to-bottom rendering of text in
– The only way for an element to leave it is to be floated or
positioned
• Block Level Elements
• Inline Elements
• Non-Replaced Element
• Replaced Element
– Img is a example of replaced element as the images from
server replaces the HTML element
Technical 39
Presentation
40. Box model …
• Any padding, borders, or margins you specify are added
to the width value
– <p style=“width: 200px; padding: 10px; margin:
20px;”>wideness?</p>
• The total width now is 260px
• The Box model calculations across various user agents
causes lot of rendering issues
• Negative Margins will force the box to creep into the
neighboring box
Technical 40
Presentation
41. Flows
• Normal Flow
– Includes normal positioning and relative positioning for
block and inline boxes
• Float Model
– In the float model, a box is first laid out according to the
normal flow, then taken out of the flow and shifted to the
left or right as far as possible. Content may flow along the
side of a float
• Absolute Positioning
– In the absolute positioning model, a box is removed from
the normal flow entirely and assigned a position with
respect to a containing block. This has no impact on later
siblings.
Technical 41
Presentation
42. Positioning and Floating
• The idea behind positioning is to allows you to define
exactly where element boxes will appear relative to
where they would ordinarily be, or relative to a parent
element, another element, or even to the browser
window itself
• Positioning models will alter the normal flow of the
element under question
– Absolute
– Relative
– Fixed
– Static
Technical 42
Presentation
43. Positioning and Floating …
• A floated element is removed from the normal flow of
the document, although it still affects the layout
– Other content “flows around” it
• Floating replaced elements with just margins will ensure
that the space will be occupied as much as the margins/
border specified
– A image with Margin 20px will occupy 40px of space even
if the image is not loaded
• Floating a nonreplaced element must have a width
attribute
– Else the element's width will tend toward zero
Technical 43
Presentation
44. Positioning and Floating …
• If there are 2 floated elements, then the containing block
will assume that it does not contain any element, and
hence the Height will result to Zero
– Clearing the floats will result in proper height calculation
Technical 44
Presentation
45. Managing your CSS
Separation of Markup and Presentation
Technical
45
Presentation
46. Problems with CSS and Web 2.0
• Layouts are very complex, hence calculating margins,
padding etc need to be done correctly
• Giving length measurements in % or ems are better for
changing screen and font sizes. Layouts need to change
accordingly
• Strict web development standards and accessibility
guidelines enforce use of complex CSS for layouts
• Browser differences in CSS implementations cause
differences in presentations
• Hacks and other tricks make the code messy and
difficult to understand
47. Problems with CSS and Web 2.0 …
• Box model differences cause change in appearance of
layouts in different browsers
• During Dynamic page interactions, calculations of floats
and positioning can cause presentation issues
Technical 47
Presentation
48. Markup and CSS
• The cascade can be very powerful but sometimes there
is a temptation to use the same generic class name in
many places
– Put your class name on the outer-most element. The child
elements can be targeted with the parent elements class
name or ID
<!--Its common to see things like--> <!--Its far better to write (Semantic)-->
<div class=quot;headertitlequot;>...</div> <div id=quot;headerquot;>
<div class=quot;headerdescriptionquot;>...</div> <h3>...</h3>
<div class=quot;headerlinksquot;>...</div> <p>...</p>
<ul>
<li>...</li>
<ul>
</div>
Technical 48
Presentation
49. Markup and CSS …
• Markup is purely to represent structure of the data.
– Never mix structural elements and presentational
elements
– Good clean semantic markup is essential for good page
design
• Do not use inline styles, as you are mixing presentation
with markup
– Inline styles will also not allow you to over ride the styles,
and will force you to use !important
• Clean markup can also mean that you have complete
control over the presentation, which can be changed by
just swapping the CSS include
Technical 49
Presentation
50. Things to remember
• Using class nesting can be useful, but over using it can
be confusing
• Tracking which style actually applies to the element can
be tough
– Understanding of Specificity, Inheritance, cascade and
visual formatting is paramount
• Don't use too many #id on the page
• Try to create classes which are generic, and that can be
applied to more than one element
• Be sure of the positioning model you are using
Technical 50
Presentation
51. Things to remember …
• Use class nesting, cascading styles and other powers of
CSS
• Try not to manipulate individual CSS via Javascript,
instead, couple sets of style changes into a class
• Use document structure to your advantage
• For complex column based layouts, use standard CSS
preferably YUI grids
Technical 51
Presentation
52. Things to remember …
• CSS Class names should be descriptive of the feature
not what they are doing
.nav { Describes feature .bluebold { Describes style
border:1px solid; font-weight : bold;
width : 10em; color : blue;
background-color: grey; }
}
Technical 52
Presentation
53. Things to remember …
• Try to split presentational styles across different style
blocks ( or class names ) so that they can be nested to
make it more readable and efficient
<div class=“section”> .section {
<h3>Section Header</h3> padding:1px 2px;
… background-color: black;
</div> color: white;
<div class=“section selected“> }
<h3>Section Header</h3> .selected {
… border:1px dashed white;
</div> font-style:italic;
<div class=“warning selected”> color:green;
<em>Something wrong</em> }
</div> .warning {
background-color:red;
}
Technical 53
Presentation
54. Things to remember …
• CSS is always closer to the <head>
• Always minify your CSS and deliver it off a content
delivery network
– Saves from unwanted headers sent
• When your CSS is minimal, place all your CSS part of
your page in the <style> tag inside the <head> tag
• Use CSS hacks only if necessary
– Commonly for Box model differences and IE PNG
transparency issues
– Try to keep all the hacks in one place for better
management
Technical 54
Presentation
56. Also look at
• CSS: The Definitive Guide, 3rd Edition
– by Eric A. Meyer
– Available on Safari Online Books
• http://developer.yahoo.com/yui/grids/
• http://www.positioniseverything.net/articles/
onetruelayout/
• http://www.alistapart.com/articles/negativemargins/