CSS (Cascading Style Sheets) is a language for styling web documents. It allows separation of document content from document presentation and formatting. The document provides the summary of CSS basics, including its history, structure, selectors, box model, positioning schemes, and tips for designing with CSS. Some key points covered include how CSS separates style from content, how rules and declarations work, the cascade priority scheme, and advantages of CSS like flexibility, site-wide consistency, and reduced bandwidth.
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 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 PPT is an introduction to PPT about HTML and CSS.
With the help of this powerpoint, people will get know about HTML and CSS. The functionality of the same
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
CSS:CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen ,paper , or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.
CSS is used to define styles for your web pages, including the design ,layout and variations in display for different devices and screen sizes.
layout:A website can be divided into various sections comprising of header, menus, content and footer based on which there are many different layout design available for developer
CSS Grid layout is a 2D layout system for the web.
It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.
The most common structure of website layout contains:
Header
Navigation menu
Content : The content section is the main body of the website. The user can divide content section in n-column layout. Example :1-column layout,2-column layout etc.
Footer
position:The position property specifies the type of positioning method used for an element.
There are four different position values:
Static
Relative
Fixed
Absolute
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Overlapping elements: When elements are positioned ,they can overlap other elements.
The z-index property specifies the stack order of an element.
forms:There are many CSS properties available which can be used to create and style HTML forms to make them more interactive. Some of them are as below:
Attribute selector
Styling the width of input
Add padding in inputs
Set margin for inputs
Adding border and border radius
Adding colour to add text
Focus Selector
Transition property
pseudo-class:Selector: pseudo-class{ property: value }
:link
:visited }link (A tag) related pseudo classes
:hover
:active
:after
:before
:first-child
:focus
:first-letter
:first-line
This PPT is an introduction to PPT about HTML and CSS.
With the help of this powerpoint, people will get know about HTML and CSS. The functionality of the same
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
CSS:CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen ,paper , or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once.
External stylesheets are stored in CSS files.
CSS is used to define styles for your web pages, including the design ,layout and variations in display for different devices and screen sizes.
layout:A website can be divided into various sections comprising of header, menus, content and footer based on which there are many different layout design available for developer
CSS Grid layout is a 2D layout system for the web.
It lets you lay content out in rows and columns, and has many features that make building complex layouts straightforward.
The most common structure of website layout contains:
Header
Navigation menu
Content : The content section is the main body of the website. The user can divide content section in n-column layout. Example :1-column layout,2-column layout etc.
Footer
position:The position property specifies the type of positioning method used for an element.
There are four different position values:
Static
Relative
Fixed
Absolute
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.
Overlapping elements: When elements are positioned ,they can overlap other elements.
The z-index property specifies the stack order of an element.
forms:There are many CSS properties available which can be used to create and style HTML forms to make them more interactive. Some of them are as below:
Attribute selector
Styling the width of input
Add padding in inputs
Set margin for inputs
Adding border and border radius
Adding colour to add text
Focus Selector
Transition property
pseudo-class:Selector: pseudo-class{ property: value }
:link
:visited }link (A tag) related pseudo classes
:hover
:active
:after
:before
:first-child
:focus
:first-letter
:first-line
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 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.
This session will consider: - what data is available from index blocks - Cascade's object and data types and their implications on indexes - organizing transformation 'formats' for multi-/re-use Example widgets include: - Handy reports for project managers and site administrators - News aggregation and syndication blocks - Dynamic decision tree web widgets - XPath-based search and browse web widgets Bring your inspired indexing ideas and innovations for sharing.
2nd Techathon in Geometric - 27/28 Feb 2015Nitin Bhide
Techathon was regular event in Geometric Ltd. in 2015/16. We used to do approx. 3 Techathons every year. We also did recruitment Techathon. These are memories from 2nd Techathon.
Many teams create a 3 column Kanban board. They think that they are now using Kanban.However, most of these teams fail to get the benefits expected from Kanban implementation. This talk is about identifying what benefits you will get , what to do if you are not seeing these benefits.
My somewhat random exploration of deriving docker container best practices by applying SOLID/OO design principles docker container design.
I will love to hear your feedback. Please comment.
Daily Habits Of Highly Agile DevelopersNitin Bhide
Slides from my talk in Pune Agile UnConference 2018 (PAUC18) . Talk focus on practices that a developer should follow so that he can "be agile"
PAUC18 - https://www.puneagileunconference.com/
my understanding of fundamentals of DevOps and how it relates conceptually to Agile, Scrum, Kanban, etc.
SlideShare does not allow uploading a new version of existing presentation. Hence I have to upload the new verson.
Goto https://www.slideshare.net/nitinbhide/devops-understanding-core-concepts for latest version.
Fundamental Principles of Software Development Nitin Bhide
These are fundamental principles as per my understanding and belief. I have followed these principles and could program in multiple languages and technologies effectively
Iterator - a powerful but underappreciated design patternNitin Bhide
Iterator design pattern is described in GoF ‘Design Patterns’ book. It is used at many places (e.g. Sql Cursor is a ‘iterator’), C++ standard template library uses iterators heavily. .Net Linq interfaces are based IEnumerable (i.e. iterator). However, I don’t see projects creating/using ‘custom’ iterator classes. Many problems can be solved ‘elegantly’ by use of customized iterators. This talk is about ‘power of iterators’ and how custom iterators can solve common problems and help create modular/reusable code components.
Key Discussion Points
Typical examples of iterators in common use.
Kind of problems that can be ‘elegantly’ solved with iterators
When to use custom iterators?
How write custom iterators in C++/C#
From webinar I did on TechGig
http://www.techgig.com/expert-speak/Iterator-a-powerful-but-underappreciated-pattern-449
"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.
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.
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
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.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Let's dive deeper into the world of ODC! Ricardo Alves (OutSystems) will join us to tell all about the new Data Fabric. After that, Sezen de Bruijn (OutSystems) will get into the details on how to best design a sturdy architecture within ODC.
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/
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.
Search and Society: Reimagining Information Access for Radical FuturesBhaskar Mitra
The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
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.
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
2. What is CSS ?
What is a ‘Style Sheet’ ?
January 14
Why ‘Cascading’ ?
Commerical in Confidence (C) NItin Bhide
2
3. Structured Document
The content of Structured documents can be
reused in many contexts and presented in
various ways
A structured document is an electronic
document where some method of embedded
coding (i.e. markup) is used to give the whole,
and parts, of the document various structural
meanings according to a schema.
SGML pioneered the concept of structured
documents
January 14
Commerical in Confidence (C) NItin Bhide
3
4. Structured Documents
SGML was based on two novel concepts
1.
2.
Markup should describe a document's structure and
other attributes. It should not specify the processing
to be performed on it.
This way descriptive markup needs to be done only
once, and will suffice for future processing.
Markup should be rigorous so that the techniques
available for processing rigorously-defined objects
like programs and databases can be used for
processing documents as well.
For example, generating documents of various quality,
automatically generating titles and indices, etc.
DTD (Document Type Definition) defines the
‘schema’ (or meaning of each structural element).
January 14
Commerical in Confidence (C) NItin Bhide
4
5. Structured Documents
Most widely used structured document formats
◦ HTML, XML, SVG, XUL etc
XML
◦ The W3C XML (Extensible Markup Language) is a
profile (subset) of SGML
◦ It is designed to ease the implementation of the parser
compared to a full SGML parser,
◦ XML is primarily designed for use on the World Wide
Web
◦ Applications of XML include XHTML, XQuery, XSLT,
XForms, XPointer, JSP, SVG, RSS, Atom, XML-RPC,
Semantic Web, and SOAP.
January 14
Commerical in Confidence (C) NItin Bhide
5
6. What is a Style Sheet ?
For content in structured documents to be
presented, a set of stylistic rules must be applied.
Typical Stylistic rules describe
◦ Colors,
◦ Fonts,
◦ Layout
A collection of stylistic rules is called a style
sheet.
Different style sheets can be attached to the logical
structure to produce different presentations.
◦ For example, how content will be when printed, when
viewed on computer, in-voice, for Braile etc.
January 14
Commerical in Confidence (C) NItin Bhide
6
7. Why ‘Cascading’ ?
CSS specifies a priority scheme to
determine which style rules apply if
more than one rule matches against a
particular element.
In this so-called cascade, priorities or
weights are calculated and assigned to
rules, so that the results are predictable.
January 14
Commerical in Confidence (C) NItin Bhide
7
8. CSS – Some history
CSS Level 1 :
◦ Initial Release.
◦ 17 December 1996; 15 years ago
CSS Level 2 :
◦ Published in May 1998
◦ Superset of Level 1
CSS Level 3:
◦ CSS3 is divided into several separate
documents called "modules".
◦ The earliest CSS3 drafts published in June
1999.
January 14
Commerical in Confidence (C) NItin Bhide
8
9. CSS Structure - Rule
A style sheet consists
of a list of rules.
Each rule or rule-set
consists of one or
more selectors and a
declaration block.
January 14
Commerical in Confidence (C) NItin Bhide
9
10. CSS Structure – Declaration Block
consists of a list of
declarations in braces.
Each declaration itself
consists of a property, a
colon (:), a value.
If there are multiple
declarations in a
block, a semi-colon (;)
must be inserted to
separate each
declaration.
January 14
Commerical in Confidence (C) NItin Bhide
10
11. CSS Structure : Selectors
are used to declare which
of the markup elements a
style applies to, a kind of
match expression.
Selectors may apply to all
elements of a specific type
(e.g. class), or only those
elements that match a
certain attribute (e.g. id);
Elements may be matched
depending on how they
are placed relative to each
other in the markup
code, or on how they are
nested within the DOM.
January 14
Commerical in Confidence (C) NItin Bhide
11
12. Cascade scheme (priority scheme)
High Author styles (provided by the web page author):
◦ Inline styles, inside the HTML document, style information on a
single element, specified using the "style" attribute
◦ Embedded style, blocks of CSS information inside the HTML itself
◦ External style sheets, i.e., a separate CSS file referenced from the
document
User style:
◦ A local CSS file the user specifies with a browser option, which acts
as an override applied to all documents
User agent (browser) style:
◦ Default styles applied by the user agent, i.e., the browser's default
settings for element presentation
◦ Each browser has slightly different defaults for various elements
Low
January 14
Commerical in Confidence (C) NItin Bhide
12
13. CSS Advantages
Flexibility
Separation of content from presentation
• CSS facilitates publication of content in multiple presentation formats based on
nominal parameters. Nominal parameters include
• explicit user preferences,
• different web browsers,
• the type of device being used to view the content (a desktop computer or mobile
Internet device),
• the geographic location of the user and many other variables.
Site-wide consistency
• a global style sheet can be used to affect and style elements site-wide.
• If the situation arises that the styling of the elements should need to be changed or
adjusted, these changes can be made by editing rules in the global style sheet.
• Before CSS, this sort of maintenance was more difficult, expensive and timeconsuming.
January 14
Commerical in Confidence (C) NItin Bhide
13
14. CSS Advantages
Reduced Bandwidth
• A stylesheet specifies the style once for a range of HTML elements
selected by class, type or relationship to others.
• This is much more efficient than repeating style information inline
for each occurrence of the element.
• An external stylesheet is usually stored in the browser cache, and
can therefore be used on multiple pages without being reloaded,
further reducing data transfer over a network.
Page reformatting
• With a simple change of one line, a different style sheet can be
used for the same page.
• This has advantages for accessibility, as well as providing the ability
to tailor a page or site to different target devices.
Furthermore, devices not able to understand the styling still
display the content.
January 14
Commerical in Confidence (C) NItin Bhide
14
16. Browser Support
Features supported
◦ Feature support of various browser and
their version is documented on wikipedia
◦ Comparison of CSS Layout Engines
Different User Agent styles:
◦ Default values of various elements like
fonts, colors, layouts etc.
◦ Yahoo ‘reset.css’
January 14
Commerical in Confidence (C) NItin Bhide
16
17. ACID Tests
Testpages Developed by ‘Web Standard
Project’.
ACID 2 focuses mainly on CSS.
ACID3 tests DOM and Javascript as
well.
Mainly developed by Ian Hickson
(Google employee)
Test pages are available at
http://acidtests.org
January 14
Commerical in Confidence (C) NItin Bhide
17
18. CSS Frameworks
Pre-prepared libraries
That allow for easier, more standardscompliant styling of web pages
Minimize the browser specific variations
usually incorporated as external .css sheets
referenced in the HTML <head>
Included before ‘custom css’.
For Example
◦ Yahoo CSS Grid, reset.css
◦ BluePrint (by Googlers)
◦ 960 Grid
January 14
Commerical in Confidence (C) NItin Bhide
18
19. CSS BOX MODEL &
POSITIONING
January 14
Commerical in Confidence (C) NItin Bhide
19
20. CSS Box Model
Margin
Border
• Clears an area
around the border.
• The margin does not
have a background
color,
• it is completely
transparent
January 14
• A border that goes
around the padding
and content.
• The border is
affected by the
background color of
the box
Padding
• Clears an area
around the content.
• The padding is
affected by the
background color of
the box
Commerical in Confidence (C) NItin Bhide
Content
• The content of the
box, where text and
images appear
20
21. Positioning Schemes
CSS 2.1 defines three positioning schemes:
Normal flow
• Inline items are laid out in the same way as the letters in words in text, one after the
other across the available space until there is no more room, then starting a new line
below.
• Block items stack vertically, like paragraphs and like the items in a bulleted list.
• Normal flow also includes relative positioning of block or inline items, and run-in
boxes.
Floats
• A floated item is taken out of the normal flow and shifted to the left or right as far as
possible in the space available.
• Other content then flows alongside the floated item.
Absolute positioning
• An absolutely positioned item has no place in, and no effect on, the normal flow of
other items.
• It occupies its assigned position in its container independently of other items
January 14
Commerical in Confidence (C) NItin Bhide
21
22. Position
Static
• The default value places the item in the normal flow
Relative
• The item is placed in the normal flow, and then shifted or offset from that
position.
• Subsequent flow items are laid out as if the item had not been moved.
Absolute
• Specifies absolute positioning
Fixed
• The item is absolutely positioned in a fixed position on the screen even as the
rest of the document is scrolled
If an item is positioned in any way other than static, then the further
properties top, bottom, left, and right are used to specify offsets and
positions.
January 14
Commerical in Confidence (C) NItin Bhide
22
23. Float & Clear
Notes
• Absolutely positioned or fixed items cannot be floated.
• Other elements normally flow around floated items, unless they are
prevented from doing so by their clear property.
Float:left
• Floats to the left of the line that it would have appeared in; other items
may flow around its right side
Float:right
• Floats to the right of the line that it would have appeared in; other
items may flow around its left side
Float:none
• Removes the float property from an item
January 14
Commerical in Confidence (C) NItin Bhide
23
25. Table layouts Vs CSS Layouts
Table Layouts
• mixes presentational data
in with content.
• Needs to create separate
pages for different
‘representations’ like
print, on screen, mobile
devices, voice etc
• Hard to maintain visual
consistency across pages
• Larger page download
sizes.
January 14
Commerical in Confidence (C) NItin Bhide
CSS Layouts
• Smaller page sizes, CSS file
is shared across
• Separates presentation data
and content
• Different css defines how
page will be displayed on
various ‘representations’
like print, on screen,
mobile devices etc.
• Easy to maintain visual
consistency across pages.
• Redesigns are easier and
less expensive
25
26. Table layouts Vs CSS Layouts
Table Layout
• Looks nearly same in all
browsers
• Works well in HTML
emails
• Hence Minimize the table
use.
• Easy to get ‘correct’ fluid
layout
January 14
Commerical in Confidence (C) NItin Bhide
CSS Layout
• Needs some care to ensure
that results are same in all
browsers.
• Because of ‘casacading’
nature, difficult to find
offending css rule.
• Small change can break
multiple pages.
• Don’t work well in HTML
emails.
• Take correct to get the
correct results in ‘fluid’
layouts
26
28. Steps to Design with CSS
Identify the types of
content/information
in your site as a whole
•
•
•
•
•
•
Identify the sections
and pages of your site.
Product information
Pricing information
Company information
Investor information
Shopping cart
User forums and so on
January 14
Commerical in Confidence (C) NItin Bhide
29
29. Steps to Design with CSS
Analyze existing markup for
presentational HTML that
can be replaced with
structural markup
Breaking down your pages
with logical divisions of
content.
•
•
•
•
•
•
Main navigation
Sub navigation
Headers and footers
Content
Related information
Other
January 14
• <font> tags
• the <b> and <br> markup.
• presentational markup for
tables (bgcolor, background,
and the like).
Commerical in Confidence (C) NItin Bhide
30
30. Steps to Design With CSS
Replace presentational tags with
structural markup
• Think about the structure of
your document!
• What is the most important
header? Mark it up with an <h1>
tag.
• Mark your subheads with <h2>
tags and so on.
• Mark up paragraphs with <p>
tags.
• Mark up your navigation as
unordered lists.
• Choose a DOCTYPE and use it.
(Use XHTML transitional, if you
really want to be ‘strict’ use
XHTML strict.)
January 14
Divide your page into logical
divs
• Put your main navigation into a
div with an id of mainnav;
• put your subnav inside a div with
an id or class of subnav,
• put your footer in a <div
id="footer">,
• wrap your content inside a <div
id="content">.
• Page doesn't look like much now,
but once you start adding rules to
your style sheets, things will get
better quickly.
Commerical in Confidence (C) NItin Bhide
31
31. Steps in Designing with CSS
It’s time to start writing your CSS
• At the begining, give each div a border.
For example, div {border: 1px dotted gray; padding: .5em}
This will help you see where they begin and end, and also
whether or not you have any nesting going on.
• Write your CSS for element selectors first
(<html>, <body>, <p>, <h1>, <h2>, <ul>, <li>, etc.)
• Use contextual or descendant selectors as much as
possible.
This will keep your markup much cleaner. For example,
#subnav li {border: 1px solid black; padding: .5em; display:
inline} will only affect list items that occur within your
subnav div.
• Test in as many browsers as you can and get your friends to
test it in their browsers.
January 14
Commerical in Confidence (C) NItin Bhide
32
33. CSS Tips
Minimize use of tables.
Make sure that ids are unique.
◦ CSS just assumes Ids are unique.
◦ And incase of multiple ids, apply the rule
on first id found
Donot use external or internal style
sheets in HTML emails. Use ‘style’
attribute on individual element.
January 14
Commerical in Confidence (C) NItin Bhide
34
34. CSS Limitations
Poor controls for flexible layouts
• CSS is still at heart a styling language (for fonts, colours, borders and other
decoration), not a layout language (for blocks with
positions, sizes, margins, and so on).
• While new additions to CSS3 provide a stronger, more robust feature-set for
layout
• Still These limitations mean that creating fluid layouts generally requires handcoding of CSS.
• Hence key feature of Many CSS Framework, is ‘Grid Layouts’.
• It has held back the development of a standards-based WYSIWYG editor.
Selectors are unable to ascend
• CSS offers no way to select a parent or ancestor of an element that satisfies
certain criteria.
• An advanced selector scheme (like XPath) would enable more sophisticated
style sheets.
• The main reasons for the CSS Working Group rejecting proposals for parent
selectors are related to browser performance and incremental rendering issues.
January 14
Commerical in Confidence (C) NItin Bhide
35
35. CSS Limitations
Vertical control limitations
• Vertical placement is frequently unintuitive, convoluted, or impossible.
• Simple tasks (such as centering an element vertically or getting a footer to
be placed no higher than bottom of viewport) either require complicated
and unintuitive style rules, or simple but widely unsupported rules.
Absence of expressions
• There is currently no ability to specify property values as simple
expressions (such as margin-left: 10% - 3em + 4px;).
• This would be useful in a variety of cases, such as calculating the size of
columns subject to a constraint on the sum of all columns.
• However, a working draft with a calc() value to address this limitation has
been published by the CSS WG.
• Internet Explorer versions 5 to 7 support a proprietary expression()
statement, It statement is no longer supported from Internet Explorer 8
onwards,
January 14
Commerical in Confidence (C) NItin Bhide
36
36. CSS Limitations
Lack of column declaration
• While possible in current CSS 3 (using the column-count module)
• Layouts with multiple columns can be complex to implement in CSS2.1.
• With CSS 2.1, the process is often done using floating elements, which are often rendered
differently by different browsers, different computer screen shapes, and different screen ratios set
on standard monitors.
Cannot explicitly declare new scope independently of position
• Scoping rules for properties such as z-index look for the closest parent element with a
position:absolute or position:relative attribute.
• This odd coupling has undesired effects such as it is impossible to avoid declaring a new scope
when one is forced to adjust an element's position, preventing one from using the desired scope of
a parent element.
Pseudo-class dynamic behavior not controllable
• CSS implements pseudo-classes that allow a degree of user feedback by conditional application of
alternate styles.
• One CSS pseudo-class, ":hover", is dynamic (equivalent of javascript "onmouseover") and has
potential for abuse (e.g., implementing cursor-proximity popups),
• but CSS has no ability for a client to disable it (no "disable"-like property) or limit its effects (no
"nochange"-like values for each property).
January 14
Commerical in Confidence (C) NItin Bhide
37