1. The document discusses different topics in CSS including the basics of CSS, background properties, fonts, text properties, the box model, lists, styling links, and positioning.
2. It provides examples and explanations of key CSS concepts like selectors, declarations, background images and colors, fonts, padding, borders, margins, and different positioning techniques.
3. The document is intended to teach the fundamentals of CSS through clear explanations, syntax examples, and diagrams of the box model.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
this 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 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.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
80% of the end-user response time is spent on the front-end. (YSlow Team)
By following these best practices we can have a great impact over the performance of our sites and applications.
In these slides we will go through some best practices related to performance, semantics & accessibility and patterns for better maintainability and readability which is gold when collaborating.
In the second part of the slideshow we will share some tips on how to pick the best layout available, create the slices with optimization in mind, master the basics and stay organized form the beginning with your CSS code.
this 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 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.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
CSS can be added to HTML documents in 3 ways:
Inline - by using the style attribute inside HTML elements
Internal - by using a <style> element in the <head> section
External - by using a <link> element to link to an external CSS file
CSS properties
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
The basic of css for all.
Separates structure from presentation
Provides advanced control of presentation
Easy maintenance of multiple pages
Faster Page loading
Better accessibility for disabled users
Easy to learn
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
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.
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.
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.
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.
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.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
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.
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Jeffrey Haguewood
Sidekick Solutions uses Bonterra Impact Management (fka Social Solutions Apricot) and automation solutions to integrate data for business workflows.
We believe integration and automation are essential to user experience and the promise of efficient work through technology. Automation is the critical ingredient to realizing that full vision. We develop integration products and services for Bonterra Case Management software to support the deployment of automations for a variety of use cases.
This video focuses on the notifications, alerts, and approval requests using Slack for Bonterra Impact Management. The solutions covered in this webinar can also be deployed for Microsoft Teams.
Interested in deploying notification automations for Bonterra Impact Management? Contact us at sales@sidekicksolutionsllc.com to discuss next steps.
Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered QualityInflectra
In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring.
Learn about:
• The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks.
• Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective.
• Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification.
• Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process.
Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.
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.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
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
2. Outline
1. Introduction to CSS
• What is CSS?
• Importance of CSS
2. Basics of CSS
• Basic Syntax & Structure
• Class & ID
• Types of CSS
• Multiple selector, Multilevel selector
3. Background
4. Fonts & Text
3. Outline (Cont.)
5. Box Model
• Margin, Border, Padding
6. List
• List Type, List with Image, List Position
7. Links
8. CSS Positioning
9. CSS Layers
10. CSS Floating Property
11. Introduction to CSS3
4. What is CSS?
▪ Cascading Style Sheets, referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
▪ CSS defines layout of HTML documents. For example, CSS covers
Fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things.
5. Importance of CSS
▪ CSS defines HOW HTML elements are to be displayed.
▪ 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.
▪ Advantages :
• Improves Website Presentation
• External CSS makes Updates Easier and Smoother
• External CSS helps Web Pages Load Faster
▪ Disadvantages :
• Browser Dependent
• Difficult to retrofit in old websites
6. Basic Syntax of CSS
▪ A CSS rule has two main parts: a selector, and one or more
declarations
▪ The selector can be HTML element, id or class.
▪ Each declaration consists of a property and a value.
▪ The property is the style attribute you want to change. Each
property has a value.
h1
Selector
{color:blue; font-size: 12px;}
Declaration 1 Declaration 2
property value property value
7. The “id” selector
▪ The id selector is used to specify a style for a single, unique
element.
▪ The id selector uses the id attribute of the HTML element, and is
defined with a "#“ in css.
▪ The style rule below will be applied to the element with
id="para1":
HTML
<h1 id=“para1”>
Hello Friends
</h1>
<h1>
How are you
</h1>
CSS
#para1{
color: blue;
}
Output
Hello Friends
How are you
8. The “class” selector
▪ The class selector is used to specify a style for a group of
elements.
▪ The class selector uses the HTML class attribute, and is defined
with a ".“ in css.
HTML
<h1 class=“myClass”>
Hello Friends
</h1>
<h1>
How are you
</h1>
<h1 class=“myClass”>
How are you
</h1>
CSS
.myClass{
color: blue;
}
Output
Hello Friends
How are you
How are you
11. Different ways to write CSS
▪ There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
12. 1) Inline Style
▪ It is possible to place CSS right in your HTML code, and this
method of CSS usage is referred to as inline css.
▪ Inline CSS has the highest priority out of external, internal, and
inline CSS.
▪ This means that you can override styles that are defined in
external or internal by using inline CSS.
▪ If you want to add a style inside an HTML element all you have to
do is specify the desired CSS properties with the style HTML
attribute.
▪ Example:
HTML
<p style="background: blue; color: white;"> My Inline CSS </p>
13. 2) Internal Style Sheet
▪ This type of CSS is only for Single Web Page.
▪ When using internal CSS, we must add a new tag, <style>, inside
the <head> tag.
▪ The HTML code below contains an example of <style>'s usage.
HTML
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's content!</p></body>
</html>
14. 3) External Style Sheet
▪ When using CSS it is preferable to keep the CSS separate from
your HTML.
▪ Placing CSS in a separate file allows the web designer to
completely differentiate between content (HTML) and design
(CSS).
▪ External CSS is a file that contains only CSS code and is saved with
a ".css" file extension.
▪ This CSS file is then referenced in your HTML using the <link>
instead of <style>.
15. 3) External Style Sheet (Cont.)
▪ Example :
Demo.html
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“test.css”>
</head>
<body>
<p> Hello Friends </p>
<p id=“para1”> How are you? </p>
</body>
</html>
test.css
#para1{
text-align: center;
}
p
{
color : blue;
}
Output
Hello Friends
How are you?
16. 3) External Style Sheet (Cont.)
▪ Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have, simply
have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in
a single CSS file.
17. Assign Multiple Classes
▪ We can apply different class to same html element by giving space
separated class names in the class attribute:
Demo.html
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“test.css”>
</head>
<body>
<h1 class=“class1 class2”>
How are you?
</h1>
</body>
</html>
test.css
. class1
{
color : blue;
}
. class2
{
text-align : center;
}
Output
How are you?
18. Multiple Selection
▪ We can apply same css to multiple selectors using comma
separated selector list, for example :
Demo.html
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“test.css”>
</head>
<body>
<p> Hello Friends </p>
<h1> How are you? </h1>
</body>
</html>
test.css
p, h1
{
color : blue;
}
Output
Hello Friends
How are you?
19. Multi-level Selection
▪ We can use hierarchical path to target html element by space
separated element/class/id names, for example :
Demo.html
<html>
<head>
<link rel=“stylesheet” type=“text/css”
href=“test.css”>
</head>
<body>
<h1>Hello Friends…</h1>
<div>
<h1>How are you?</h1>
</div>
</body>
</html>
test.css
div h1
{
color : blue;
}
Output
Hello Friends…
How are you?
21. Background Color
▪ The background-color property specifies the background color of
an element.
▪ The background color of a page is defined in the body selector:
▪ Below is example of CSS backgrounds
test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}
22. Background Image
▪ The background-image property specifies an image to use as the
background of an element.
▪ For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
}
23. test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
}
Background Image Repeat
▪ You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
repeat-x
repeat-y
no-repeat
24. Fixed Background Image
▪ The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
▪ For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}
25. Background Image Positioning
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;
background-position: top center;
} 30% 30%
▪ The background-position property sets the starting position of a
background image.
26. CSS Font
▪ CSS font properties define the font family, boldness, size, and the
style of a text.
1. Font Color (color)
2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
Property Name
27. CSS Font (Cont.)
▪ Font Color
• Set the text-color for different elements
▪ Font Family
• The font family of a text is set with the
font-family property.
▪ Font Size
• The font-size property sets the size of
the text.
• font-size : 120%
• font-size : 10px;
• font-size : x-large;
h4{
color : red;
}
h4{
font-family : sans-serif;
}
h4{
font-size: 120%;
font-size : 10px;
font-size : small;
font-size : smaller;
font-size : x-small;
font-size : xx-small;
font-size : large;
font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
}
28. CSS Font (Cont.)
▪ Font Style
• The font-style property is mostly used to
specify italic text.
▪ Font Weight
• The font-weight property sets how thick
or thin characters in text should be
displayed.
▪ Font Variant
• The font-variant property specifies
whether or not a text should be
displayed in a small-caps font.
• font-variant : small-caps;
h4{
font-style: italic ;
}
h4{
font-weight : 300;
font-weight : bolder;
font-weight : lighter;
}
h4{
font-variant: small-caps;
}
29. CSS Text Property
▪ While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
alignment of your text.
1. Text Decoration (text-decoration)
2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
Property Name
30. CSS Text Property (Cont.)
▪ Text Decoration
• The text-decoration property is used to
set or remove decorations from text.
• The text-decoration property is mostly
used to remove underlines from links for
design purposes.
▪ Text Indent
• The text-indentation property is used to
specify the indentation of the first line of
a text.
▪ Text Align
• The text-align property is used to set the
horizontal alignment of a text.
h4{
text-decoration : line-through;
text-decoration : overline;
text-decoration : underline;
text-decoration : none;
}
h4{
text-indent : 20px;
text-indent : 30%;
}
h4{
text-align : right;
text-align : justify;
text-align : left;
text-align : center;
}
31. CSS Text Property (Cont.)
▪ Text Transform
• The text-transform property is used to
specify uppercase and lowercase letters
in a text.
▪ White Space
• The white-space attribute allows you to
prevent text from wrapping until you
place a break <br /> into your text.
▪ Word Spacing
• With the CSS attribute word-spacing you
are able to specify the exact value of the
spacing between your words.
Word-spacing should be defined with
exact values.
h4{
text-transform : capitalize;
text-transform : uppercase;
text-transform : lowercase;
}
h4{
white-space : nowrap;
}
h4{
word-spacing : 10px;
}
32. CSS Text Property (Cont.)
▪ Letter Spacing
• With the CSS attribute letter-spacing you
are able to specify the exact value of the
spacing between your letters.
Letter-spacing should be defined with
exact values.
▪ Line Height
• The line-height attribute will set the
height of the line in the page.
h4{
letter-spacing : 3px;
}
h4{
line-height : 10px;
}
33. The Box Model
▪ All HTML elements can be considered as boxes. In CSS, the term
"box model" is used when talking about design and layout.
▪ The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
▪ The box model allows us to place a border around elements and
space elements in relation to other elements.
34. Margin
The Box Model (Cont)
▪ The image below illustrates the box model:
Border
Padding
Content
35. The Box Model (Cont)
Content
padding-top
padding-bottom
padding-right
padding-left
border-top
margin-top
border-right
margin-right
border-bottom
margin-bottom
border-left
margin-left
36. CSS Padding
▪ The CSS padding properties define
the space between the element
border and the element content.
▪ The top, right, bottom, and left
padding can be changed
independently using separate
properties.
▪ A shorthand padding property can
also be used, to change all padding
at once.
h4{
padding : 10px;
}
h4{
padding-top : 10px;
padding-right : 20px;
padding-bottom : 30 px;
padding-left : 40 px;
}
h4{
padding : 10px 20px 30px 40px;
}
37. CSS Border
▪ The CSS border properties allow you to
specify the style and color of an element's
border.
▪ Border Style Types
• The border-style property specifies what kind of
border to display.
▪ Border Width
• The border-width property is used to set the
width of the border.
▪ Border Color
• The border-color property is used to set the
color of the border.
• Border colors can be any color defined by RGB,
hexadecimal, or key terms. Below is an example
of each of these types.
▪ The top, right, bottom, and left border can
be changed independently using separate
properties.
h4{
border : 1px solid red;
}
h4{
border-style : solid;
border-style : dotted;
border-style : double;
}
h4{
border-width : 7px;
}
h4{
border-color : red;
}
h4{
border-top : 1px solid red;
}
38. CSS Margin
▪ The CSS margin properties define the
space around elements
▪ The top, right, bottom, and left
margin can be changed
independently using separate
properties.
▪ A shorthand margin property can
also be used, to change all margins at
once.
h4{
margin: 10px;
}
h4{
margin -top : 10px;
margin -right : 20px;
margin -bottom : 30 px;
margin -left : 40 px;
}
h4{
margin : 10px 20px 30px 40px;
}
39. CSS List
▪ The CSS list properties allow you to:
• Set different list item markers for
ordered & unordered lists
• Set an image as the list item marker
• Set the position of the marker
▪ CSS List Style Type
▪ CSS List with Image
▪ CSS List Position
ul{
list-style-type: circle;
list-style-type: disc;
list-style-type: square;
list-style-type: armenian;
list-style-type: cjk-ideographic;
list-style-type: decimal-leading-zero;
list-style-type: georgian;
list-style-type: hebrew;
list-style-type: katakana;
list-style-type: lower-greek;
}
ol{
list-style-image : url(‘imgPath’);
}
ol{
list-style-position : outside;
list-style-position : inside;
}
40. Styling Links
▪ Anchor/Link States
• The four links states are:
1. a:link - a normal, unvisited link
2. a:visited - a link the user has visited
3. a:hover - a link when the user
mouse over it
4. a:active - a link the moment it is
clicked
a:link{
color:#FF0000;
/*unvisited link*/
}
a:visited{
text-decoration : none;
/*visited link*/
}
a:hover{
color:#00FF00; /*mouse
over link*/
}
a:active{
color:#0000FF; /*selected
link*/
}
41. CSS Positioning
▪ Absolute Positioning
• With absolute positioning, you define the
exact pixel value where the specified HTML
element will appear.
• The point of origin is the top-left of the
browser's viewable area, so be sure you are
measuring from that point.
▪ Relative Positioning
• Relative positioning changes the position of
the HTML element relative to where it
normally appears.
▪ Fixed Positioning
• The element is positioned relative to the
browser window, in fixed position, element
will be in the same place even we scroll the
screen.
h1{
position : absolute;
left : 50px;
top : 100px;
}
h1{
position : relative;
left : 50px;
top : 100px;
}
h1{
position : fixed;
top : 50px;
left : 100px;
}
position: static|absolute|fixed|relative|sticky|initial|inherit;
42. CSS Layers
▪ CSS allows you to control which item will
appear on top with the use of layers.
▪ In CSS, each element is given a priority.
▪ If there are two overlapping CSS positioned
elements, the element with the higher
priority will appear on top of the other.
▪ To manually define a priority, set the z-index
value. The larger the value, the higher the
priority the element will have.
CSS
#division1{
position : absolute;
height : 100px;
width : 100px;
left : 100px;
top : 150px;
background-color : red;
z-index : 5;
}
#division2{
position : absolute;
height : 200px;
width : 200px;
left : 50px;
top : 100px;
background-color : blue;
z-index : 2;
}
HTML
<div id="division1">
</div>
<div id="division2">
</div>
43. CSS Float Property
▪ The CSS float property defines that an element should be taken
out of the normal flow of the document and placed along the left
or right side of its containing block.
▪ Text and inline elements will then wrap around this element.
HTML
<div id="division1">
ABC Content
</div>
<div id="division2">
XYZ Content
</div>
CSS
#division1{
background-color : red;
float : left;
width: 40%;
}
#division2{
background-color : blue;
float : right;
width: 40%;
}
float: none|left|right|initial|inherit;
44. Introduction to CSS3
▪ CSS3 is the latest standard for CSS.
▪ CSS3 is completely backwards-compatible with earlier versions of
CSS.
▪ CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In
addition, new modules are added.
▪ CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur
on :hover or :focus, to occur smoothly over a specified duration –
rather than happening instantaneously as is the normal behaviour.
▪ Transition effects can be applied to a wide variety of CSS
properties, including background-color, width, height, opacity, and
many more.
45. Introduction to CSS3 (Cont)
▪ Some of the most important CSS3 modules are:
• CSS Animations and Transitions
• Calculating Values With calc()
• Advanced Selectors
• Generated Content and Counters
• Gradients
• Webfonts
• Box Sizing
• Border Images
• Media Queries
• Multiple Backgrounds
• CSS Columns
https://www.tutorialspoint.com/css/css3_tutorial.htm
47. CSS3
CSS3 is collaboration of CSS2 specifications and new specifications, we
can called this collaboration is module. Some of the modules are shown
below −
● Selectors
● Box Model
● Backgrounds
● Image Values and Replaced Content
● Text Effects
● 2D Transformations
● 3D Transformations
● Animations
● Multiple Column Layout
● User Interface
51. 3. CSS3 Gradient
Linear and Radial
LINEAR:
1) Top to bottom
background: linear-gradient(pink,green);
2) Left to right
background: linear-gradient(to right, red , blue);
3) Diagonal
background: linear-gradient(to bottom right, red , blue);
4)multicolor
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
55. 6. Animation
t@keyframes
● animation-name
● animation-duration
● animation-delay
● animation-iteration-count
● animation-direction
● animation-timing-function
● animation-fill-mode
● animation
animation-direction:
The animation-direction property can have the following values:
● normal - The animation is played as normal (forwards). This is default
● reverse - The animation is played in reverse direction (backwards)
● alternate - The animation is played forwards first, then backwards
● alternate-reverse - The animation is played backwards first, then forwards
56. <div> and <span>
Div tag is a block-level tag. In this example, the div tag contains the entire width. It will be
displayed div tag each time on a new line, not on the same line.
57. <div> and <span>
The span tag is very similar to the div tag, but div is a block-level tag and span is an inline tag.