This chapter discusses cascading style sheets (CSS) and introduces basic CSS concepts. It covers: recognizing the benefits of CSS; building a basic style sheet with selectors and declarations; using inheritance to simplify style rules; examining selection techniques like type, class, and ID selectors; applying styles with external, internal, and inline styles; and using other CSS features like pseudo-classes and attributes. The goal is to teach the fundamentals of using CSS to control web page styling and layout.
Whatsapp Masivo.
Envío masivo de mensajes multimedia a través de Whatsapp, para campañas de comunicación interna corporativa, publicidad, difusión de contenidos, acciones de pertenencia y fidelización, promociones, etc.
Whatsapp masivo es una prestación ofrecida por Infometrika, que cuenta con más de 10 años de experiencia y desarrollo en mobile marketing.
Contacto: info@infometrika.com.ar
Presentatie die Saskia Dikmans en Reinout Wolfert gaven tijdens de eerste ROI Wednesday (12 september 2012). In de presentatie wordt ingegaan over de opbouw van de organisatie én de stappen die gemaakt worden richting personalisatie.
Whatsapp Masivo.
Envío masivo de mensajes multimedia a través de Whatsapp, para campañas de comunicación interna corporativa, publicidad, difusión de contenidos, acciones de pertenencia y fidelización, promociones, etc.
Whatsapp masivo es una prestación ofrecida por Infometrika, que cuenta con más de 10 años de experiencia y desarrollo en mobile marketing.
Contacto: info@infometrika.com.ar
Presentatie die Saskia Dikmans en Reinout Wolfert gaven tijdens de eerste ROI Wednesday (12 september 2012). In de presentatie wordt ingegaan over de opbouw van de organisatie én de stappen die gemaakt worden richting personalisatie.
Cascading Styling Sheets(CSS) simple design language intended to transform th...JebaRaj26
1.Inline CSS
2. Internal
3.External
Inline CSS: Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute.
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<p style="color:#009900; font-size:50px;
font-style:italic; text-align:center;">
Nesamony Memorial Christian College
</p>
</body>
</html>
Internal or Embedded CSS: This can be used when a single HTML document must be styled uniquely. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the <style> tag inside the head section of the HTML file.
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
}
.mca {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.nmcc {
font-style: bold;
font-size: 20px;
}
</style>
</head>
External CSS: External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc).
CSS property is written in a separate file with a .css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages.
<html>
<head>
<link rel="stylesheet" href="geeks.css" />
</head>
<body>
<div class="main">
<div class=“mca">Department of Computer Science & Applications</div>
<div id=“nmcc">
Basics of Web Design
</div>
</div>
</body>
</html>
A tale of scale & speed: How the US Navy is enabling software delivery from l...sonjaschweigert1
Rapid and secure feature delivery is a goal across every application team and every branch of the DoD. The Navy’s DevSecOps platform, Party Barge, has achieved:
- Reduction in onboarding time from 5 weeks to 1 day
- Improved developer experience and productivity through actionable findings and reduction of false positives
- Maintenance of superior security standards and inherent policy enforcement with Authorization to Operate (ATO)
Development teams can ship efficiently and ensure applications are cyber ready for Navy Authorizing Officials (AOs). In this webinar, Sigma Defense and Anchore will give attendees a look behind the scenes and demo secure pipeline automation and security artifacts that speed up application ATO and time to production.
We will cover:
- How to remove silos in DevSecOps
- How to build efficient development pipeline roles and component templates
- How to deliver security artifacts that matter for ATO’s (SBOMs, vulnerability reports, and policy evidence)
- How to streamline operations with automated policy checks on container images
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
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
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.
Generative AI Deep Dive: Advancing from Proof of Concept to ProductionAggregage
Join Maher Hanafi, VP of Engineering at Betterworks, in this new session where he'll share a practical framework to transform Gen AI prototypes into impactful products! He'll delve into the complexities of data collection and management, model selection and optimization, and ensuring security, scalability, and responsible use.
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfPaige Cruz
Monitoring and observability aren’t traditionally found in software curriculums and many of us cobble this knowledge together from whatever vendor or ecosystem we were first introduced to and whatever is a part of your current company’s observability stack.
While the dev and ops silo continues to crumble….many organizations still relegate monitoring & observability as the purview of ops, infra and SRE teams. This is a mistake - achieving a highly observable system requires collaboration up and down the stack.
I, a former op, would like to extend an invitation to all application developers to join the observability party will share these foundational concepts to build on:
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.
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.
Le nuove frontiere dell'AI nell'RPA con UiPath Autopilot™UiPathCommunity
In questo evento online gratuito, organizzato dalla Community Italiana di UiPath, potrai esplorare le nuove funzionalità di Autopilot, il tool che integra l'Intelligenza Artificiale nei processi di sviluppo e utilizzo delle Automazioni.
📕 Vedremo insieme alcuni esempi dell'utilizzo di Autopilot in diversi tool della Suite UiPath:
Autopilot per Studio Web
Autopilot per Studio
Autopilot per Apps
Clipboard AI
GenAI applicata alla Document Understanding
👨🏫👨💻 Speakers:
Stefano Negro, UiPath MVPx3, RPA Tech Lead @ BSP Consultant
Flavio Martinelli, UiPath MVP 2023, Technical Account Manager @UiPath
Andrei Tasca, RPA Solutions Team Lead @NTT Data
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.
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
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
2. Objectives
When you complete this chapter, you will be able to:
• Recognize the benefits of using CSS
• Build a basic style sheet
• Use inheritance to write simpler style rules
• Examine basic selection techniques
• Apply basic selection techniques
• Use class and id selectors
• Use the <div> and <span> elements
• Use other selectors
2Web Design Principles 5th
Ed.
4. The Evolution of CSS
• CSS was developed to standardize display
information
• CSS was slow to be supported by browsers
• Newer browsers offer more complete support
• Latest release is CSS3
• CSS3 is not yet evenly supported
Web Design Principles 5th
Ed. 4
5. CSS Style Rules
• In CSS, style rules express the style characteristics for
an HTML element
• A set of style rules is called a style sheet
• Style rules are easy to write and interpret
5Web Design Principles 5th
Ed.
6. CSS Style Rules
• Style rules are composed of two parts: a selector and a
declaration
• The selector determines the element to which the rule
is applied
• The declaration details the exact property values
6Web Design Principles 5th
Ed.
8. CSS Style Rules
• The declaration contains a property and a value
• The property is a quality or characteristic
• The precise specification of the property is contained in
the value
• CSS includes a wide variety of different properties,
each with a specific number of values
8Web Design Principles 5th
Ed.
10. Combining CSS Style Rules with
HTML
You combine CSS with HTML in three ways:
• Inline style
• Internal style sheet
• External style sheet
10Web Design Principles 5th
Ed.
12. Using External Style Sheets
• External style sheets let you specify rules for
multiple Web pages
• These are text documents that contain style rules
• External style sheets have a .css extension
12Web Design Principles 5th
Ed.
13. Linking to an External Style Sheet
• The link element lets you specify an external style
sheet
• It is used within the <head> section of a document
<head>
<title>Sample Document</title>
<link href="styles.css"
rel="stylesheet" type="text/css" />
</head>
13Web Design Principles 5th
Ed.
14. Using Internal Style Sheets
• Internal style sheets are contained within the
<style> element
• The style element is contained within the <head>
section of the document
• Style rules contained in an internal style sheet only
affect the document in which they reside
<head>
<title>Sample Document</title>
<style type="text/css">
h1 {color: red;}
</style>
</head>
14Web Design Principles 5th
Ed.
15. Using Inline Styles
• You can define styles for a single element with the
style attribute
• The style attribute can be used to override a style
that was set at a higher level
• The style attribute is useful for testing styles during
development
• This is the least used method of applying CSS
styles
• <h1 style="color: blue">Some Text</h1>
15Web Design Principles 5th
Ed.
16. Writing Clean CSS Code
• Write CSS code that is consistent and easy to read
• Correct but hard-to-read:
p {font-family: arial, helvetica, sans-serif; font-size:
85%; line-height: 110%; margin-left: 30px;}
• Better:
p {
font-family: arial, helvetica, sans-serif;
font-size: 85%;
line-height: 110%;
margin-left: 30px;
}
• Use comments in your code
16Web Design Principles 5th
Ed.
18. Using Inheritance to Write Simpler
Style Rules
• Elements in an HTML document are structured in a
hierarchy
• Parent elements contain child elements
• Elements can be both parent and child elements
• The CSS properties inherit from parent to child
• The property descriptions list whether a property is
inherited
• You can style multiple document elements with just
a few style rules using inheritance
18Web Design Principles 5th
Ed.
20. Using Inheritance to Write Simpler
Style Rules
• Specific style rules:
<style type="text/css">
h1 {color: red;}
p {color: red;}
ul {color: red;}
em {color: red;}
li {color: red;}
</style>
• Using inheritance:
<style type="text/css">
body {color: red;}
</style>
20Web Design Principles 5th
Ed.
22. Examining Basic Selection
Techniques
• In this section, you will review style rule syntax and
learn about the following basic selection
techniques:
– Using type selectors
– Grouping selectors
– Combining declarations
– Using descendant selectors
22Web Design Principles 5th
Ed.
23. Using Type Selectors
• The selector determines the element to which a
style declaration is applied
• Type selectors are the simplest form of selector
• They select every element in the document that
matches the style rule
• In the following example, all h1 elements are red
23Web Design Principles 5th
Ed.
25. Grouping Selectors
• You can group selectors to which the same rules
apply
• Specific style rules:
h1 {color: red;}
h2 {color: red;}
• Grouping selectors:
h1, h2 {color: red;}
25Web Design Principles 5th
Ed.
26. Combining Declarations
• You can state multiple property declarations for the
same selector
• Specific style rules:
p {color: blue;}
p {font-size: 125%;}
• Combining declarations:
p {
color: blue;
font-size: 125%;
}
26Web Design Principles 5th
Ed.
27. Using Descendant Selectors
• You can select elements that are descendents of
other elements
• Selecting only <em> elements that are contained
within <p> elements
p em {color: blue;}
27Web Design Principles 5th
Ed.
28. Using the Universal Selector
• Universal selector lets you select groups of
elements
• Selecting all children of the dead element:
div * {font-family: sans-serif;}
28Web Design Principles 5th
Ed.
30. Using Class and ID Selectors
• You will learn to select elements of an HTML
document using the following methods:
– The class selector
– The id selector
– The <div> and <span> elements
– The pseudo-class and pseudo-element selectors
30Web Design Principles 5th
Ed.
31. Using the Class Selector
• The class selector lets you write rules and give
them a name
• You can apply that name to any element you
choose
• The class attribute lets you apply the style rule
name to an element
• The period (.) flag character indicates the selector
is a class selector
31Web Design Principles 5th
Ed.
33. Using the Class Selector
• Style rule:
.intro {font-size: 125%; font-family:
sans-serif;}
• Applied in document:
<p class="intro">This is the first
paragraph of the document. It has a
different style based on the
"intro”class selector.</p>
33Web Design Principles 5th
Ed.
35. Using the id Attribute Selector
• The difference between id and class is that id
refers to only one instance of the id attribute value
within a document
• The ID attribute is used to identify layout sections of the
page
• The ID attribute uses a pound sign (#) flag character
35Web Design Principles 5th
Ed.
37. Using the id Attribute Selector
• Style rule:
<p id="copyright">This is the copyright information
for the page.</p>
• Applied in document:
<p class="intro">This is the first paragraph of the
document. It has a different style based on the
"intro” class selector.</p>
37Web Design Principles 5th
Ed.
39. Using the <div> and <span>
Elements
• The <div> (division) and <span> (span of words)
elements are designed to be used with CSS
• They let you specify logical divisions within a
document that have their own name and style
properties
39Web Design Principles 5th
Ed.
40. Working with <div> elements
• Use <div> with the class and ID attributes to create
logical divisions on a Web page
• A division with an id named column as the selector:
div#column {
width: 200px;
height: auto;
padding: 15px;
border: thin solid;
}
Applied in the document:
<div id="column">This division displays… </div>
40Web Design Principles 5th
Ed.
41. Working with Span Elements
• The span element lets you specify in-line elements
that have their own name and style properties
• In-line elements reside within a line of text
41Web Design Principles 5th
Ed.
42. Working with Span Elements
• Style rule:
span.logo {
color: white;
background-color: black;
}
• Applied in document:
<p>Welcome to the <span class="logo">Wonder
Software</span>Web site.</p>
42Web Design Principles 5th
Ed.
45. Using Attribute Selectors
• Attribute selectors let you select an element based
on whether the element contains an attribute
• Elements can be selected based on a specific
value the attribute contains
45Web Design Principles 5th
Ed.
46. Using Attribute Selectors
• Attribute selectors match against attributes and
their values
• To select this element:
<img src="images/home.gif" title="home"
alt="Home navigation button" />
using attribute selectors, you could use the value
that the title attribute contains, as shown:
img[title=home] {border-color: red;}
46Web Design Principles 5th
Ed.
47. Using Pseudo-Class and Pseudo-
Element Selectors
• Pseudo-classes select elements based on
characteristics other than their element name
• For example, you can change the characteristics of
hypertext links with pseudo-classes
• Pseudo-elements let you change other aspects of a
document that are not classified by standard
elements such as the first letter or line of a
paragraph
47Web Design Principles 5th
Ed.
48. 48
Using the Link Pseudo-Classes
• The link pseudo-classes let you change the style
characteristics for four different hypertext link
states
• These pseudo-classes only apply to the <a>
element with an href attribute
Web Design Principles 5th
Ed.
50. Using the Link Pseudo-Classes
• Because of the specificity of the pseudo-class
selectors, you should always place your link
pseudo-class in the following order:
1. Link
2. Visited
3. Hover
4. Active
50Web Design Principles 5th
Ed.
51. 51
Using the Link Pseudo-Classes
• The following rules change the colors of the
hypertext links:
:link {color: red;}
:visited {color: green;}
Web Design Principles 5th
Ed.
52. 52
Using the :hover Pseudo-Class
• The :hover pseudo-class lets you apply a style
that appears when the user points to an element
with a pointing device
a:hover {background-color: yellow;}
Web Design Principles 5th
Ed.
54. 54
Using the :first-letter Pseudo-
Element
• Use the :first-letter pseudo-element to apply style
rules to the first letter of any element:
p:first-letter {
font-weight: bold;
font-size: 200%;
}
Web Design Principles 5th
Ed.
56. 56
Using the :first-line Pseudo-Element
• The :first-line pseudo-element works in much the
same way as :first-letter
• It affects the first line of text in an element:
p:first-line {text-transform:
uppercase;}
Web Design Principles 5th
Ed.
58. Understanding How the Cascade
Affects Style Rules
• To cascade means that multiple style sheets and
style rules can apply to the same document
• Only one rule can apply to an element
• The CSS cascading mechanism determines which
rules apply based on three variables:
– Specificity of the selector
– Order of the rule in the style sheet
– Use of the !important keyword
58Web Design Principles 5th
Ed.
62. Summary
• CSS rules can be combined with the HTML code in
a number of ways
• CSS is easy to read and write
• CSS uses inheritance and cascading to determine
which style rules take precedence
• You can combine selectors and declarations in
multiple ways
• There are many ways to select elements
62Web Design Principles 5th
Ed.
63. Summary
• Class and ID attribute selectors are often paired
with <div> and <span> elements to create layout
elements
• The pseudo-class and pseudo-element selectors
let you change color and styling of links and other
elements of a document
63Web Design Principles 5th
Ed.