The document discusses common CSS mistakes to avoid, including:
1) Not distinguishing between IDs and classes when selecting elements. IDs are unique and classes can be reused.
2) Including unnecessary units like "px" when a value is zero.
3) Repeating CSS properties that can be combined, like setting each border side individually.
4) Including excessive whitespace which increases file size without benefit.
5) Not grouping identical styles for multiple elements to make updates easier.
6) Confusing the difference between margins, which are outside borders, and padding, which is inside borders.
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)
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
This is part of my classroom curriculum on IBM Rational Host Access Transformation Services. More material is available from our on site classroom courseware.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
Css training tutorial css3 & css4 essentialsQA TrainingHub
Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
Visual basic asp.net programming introductionHock Leng PUAH
After starting the project and generating the code behind file, we learn a little on
OOP (Object Oriented Programming)
Class and what a Class may contain
Inheritance
Namespace
Access Levels
Variables: valid and invalid variable naming
Data types: Integer, String, Boolean, Decimal
Decision making using IF … ElseIf … Else … End If
OS X has a built-in screen sharing feature that lets you connect to another Mac on your network and display its screen on your Mac.
You can use screen sharing to access your Mac while you’re away, solve a problem on someone else’s Mac, or collaborate with others on a project such as a website or presentation.
http://support.apple.com/kb/PH14148
Integrate jQuery PHP MySQL project to JOOMLA web siteHock Leng PUAH
After completing your jQuery, PHP, MySQL project, integrating the project into an existing JOOMLA website can be done using one of its vast extension - Sourcerer.
At the end of the lesson, the student will learn to:
• Install Oracle Virtualbox VM Manager
• Install Windows 2003 Server as a VM
• Create a shared folder between the host computer and the VM
The Indian economy is classified into different sectors to simplify the analysis and understanding of economic activities. For Class 10, it's essential to grasp the sectors of the Indian economy, understand their characteristics, and recognize their importance. This guide will provide detailed notes on the Sectors of the Indian Economy Class 10, using specific long-tail keywords to enhance comprehension.
For more information, visit-www.vavaclasses.com
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
1. Using the CSS
Prepared by: Sanjay Raval | http://www.usableweb.in/
2. What is CSS?
CSS is a language that’s used to define the formatting applied to a Website, including
colors, background images, typefaces (fonts), margins, and indentation.
Let’s look at a basic example to see how this is done.
<!DOCTYPE html>
<html>
<head>
<title>A Simple Page</title>
<style type="text/css">
h1, h2 {
font-family: sans-serif; color: #3366CC;
}
</style>
</head>
<body>
<h1>First Title</h1><p>…</p>
<h2>Second Title</h2><p>…</p>
<h2>Third Title</h2><p>…</p>
</body>
</html>
3. Using CSS in HTML
lnline Styles
The simplest method of adding CSS styles to your web pages is to use inline styles.
An inline style is applied via the style attribute, like this:
<p style="font-family: sans-serif; color: #3366CC;">
Amazingly few discotheques provide jukeboxes.
</p>
Inline styles have two major disadvantages:
1) They can’t be reused. For example, if we wanted to apply the style above to another p element,
we would have to type it out again in that element’s style attribute.
2) Additionally, inline styles are located alongside the page’s markup, making the code difficult to
read and maintain.
4. Using CSS in HTML
Embedded or Internal Styles
In this approach, you can declare any number of CSS styles by placing them between the opening
and closing <style> tags, as follows:
<style type="text/css">
CSS Styles here
</style>
While it’s nice and simple, the <style>tag has one major disadvantage: if you want to use a
particular set of styles throughout your site, you’ll have to repeat those style definitions within
the style element at the top of every one of your site’s pages.
5. Using CSS in HTML
External Style Sheets
An external style sheet is a file (usually given a .css filename) that contains a web site’s CSS
styles, keeping them separate from any one web page. Multiple pages can link to the same .css
file, and any changes you make to the style definitions in that file will affect all the pages that
link to it.
To link a document to an external style sheet (say, styles.css), we simply place a link element in
the document’s header:
<link rel="stylesheet" type="text/css" href="styles.css" />
6. CSS Selectors
Every CSS style definition has two components:
A list of one or more selectors, separated by commas, define the element or elements to which the
style will be applied.
The declaration block specifies what the style actually does.
7. CSS Selectors
Type Selectors – Tag Selector
By naming a particular HTML element, you can apply a style rule to every occurrence of that
element in the document.
For example, the following style rule might be used to set the default font for a web site:
p, td, th, div, dl, ul, ol {
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
}
8. CSS Selectors
Class Selectors
CSS classes comes in when you want to assign different styles to identical elements that occur in
different places within your document.
Consider the following style, which turns all the paragraph text on a page blue:
p { color: #0000FF; }
Great! But what would happen if you had a sidebar on your page with a blue background? You
wouldn’t want the text in the sidebar to display in blue as well—then it would be invisible. What
you need to do is define a class for your sidebar text, then assign a CSS style to that class.
To create a paragraph of the sidebarclass, first add a classattribute to the opening tag:
<p class="sidebar">
This text will be white, as specified by the CSS style definition
below.
</p>
9. CSS Selectors
Class Selectors
Now we can write the style for this class:
p { color: #0000FF; }
.sidebar { color: #FFFFFF; }
This second rule uses a class selector to indicate that the style should be applied to any element
of the sidebar class. The period indicates that we’re naming a class—not an HTML element.
10. CSS Selectors
ID Selectors
In contrast with class selectors, ID selectors are used to select one particular element, rather
than a group of elements. To use an ID selector, first add an id attribute to the element you wish
to style. It’s important that the ID is unique within the document:
<p id="tagline">This paragraph is uniquely identified by the ID
"tagline".</p>
To reference this element by its ID selector, we precede the id with a hash (#). For example, the
following rule will make the above paragraph white:
#tagline { color: #FFFFFF; }
ID selectors can be used in combination with the other selector types.
#tagline .new {
font-weight: bold;
color: #FFFFFF;
}
11. CSS Selectors
Descendant or Compound Selectors
A descendant selector will select all the descendants of an element.
p { color: #0000FF; }
.sidebar p { color: #FFFFFF; }
<div class="sidebar">
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
</div>
In this case, because our page contains a div element that has a class of sidebar, the descendant
selector .sidebar p refers to all p elements inside that div.
12. CSS Selectors
Child Selectors
A descendant selector will select all the descendants of an element, a child selector only targets
the element’s immediate descendants, or “children.”
Consider the following markup:
<div class="sidebar">
<p>This paragraph will be displayed in white.</p>
<p>So will this one.</p>
<div class="tagline">
<p>If we use a descendant selector, this will be
white too. But if we use a child selector, it will be
blue.</p>
</div>
</div>
13. CSS Selectors
Child Selectors
In this example, the descendant selector we saw in the previous section would match the
paragraphs that are nested directly within div.sidebar as well as those inside div.tagline. If you
didn’t want this behavior, and you only wanted to style those paragraphs that were direct
descendants of div.sidebar, you’d use a child selector.
A child selector uses the > character to specify a direct descendant.
Here’s the new CSS, which turns only those paragraphs directly inside .sidebar (but not those
within .tagline) white:
p { color: #0000FF; }
.sidebar>p { color: #FFFFFF; }
Note: Unfortunately, Internet Explorer 6 doesn’t support the child selector.
15. ID vs. Class What
An ID refers to a unique instance in a document, or something that will only appear once on a
page. For example, common uses of IDs are containing elements such as page wrappers,
headers, and footers. On the other hand, a CLASS may be used multiple times within a document,
on multiple elements. A good use of classes would be the style definitions for links, or other types
of text that might be repeated in different areas on a page.
In a style sheet, an ID is preceded by a hash mark (#), and might look like the following:
#header { height:50px; }
#footer { height:50px; }
#sidebar { width:200px; float:left; }
#contents { width:600px; }
16. ID vs. Class What
Classes are preceded by a dot (.). An example is given below.
.error {
font-weight:bold;
color:#C00;
}
.btn{
background:#98A520;
font-weight:bold;
font-size:90%;
height:24px;
color:#fff;
}
17. Redundant Units for Zero Values
The following code doesn't need the unit specified if the value is zero.
padding:0px 0px 5px 0px;
It can be written instead like this:
padding:0 0 5px 0;
Don't waste bytes by adding units such as px, pt, em, etc, when the value is zero. The only
reason to do so is when you want to change the value quickly later on. Otherwise declaring the
unit is meaningless. Zero pixels is the same as zero points.
18. Avoid Repetition
We should avoid using several lines when just one line will do.
For example, when setting borders, some people set each side separately:
border-top:1px solid #00f;
border-right:1px solid #00f;
border-bottom:1px solid #00f;
border-left:1px solid #00f;
But why? When each border is the same! Instead it can be like:
border:1px solid #00f;
19. Excess Whitespace
Usually we have tendency to include whitespace in the code to make it readable. It'll only make
the stylesheet bigger, meaning the bandwidth usage will be higher.
Of course it's wise to leave some space in to keep it readable.
20. Grouping Identical Styles together
So when we want a same style to a couple of elements. It is good to group them together and
define the style instead of defining the style for each element separately.
h1, p, #footer, .intro {
font-family:Arial,Helvetica,sans-serif;
}
It will also make updating the style much easier.
21. Margin vs. Padding
As margins and paddings are generally be used interchangeably, it is important to know the
difference. It will give you greater control over your layouts. Margin refers to the space around
the element, outside of the border. Padding refers to the space inside of the element, within the
border.
Example: No Padding, 10px Margin
p {
border: 1px solid #0066cc;
margin:10px;
padding:0;
}
Result:
22. Margin vs. Padding
Example: No Margin, 10px Padding
p {
border: 1px solid #0066cc;
padding:10px;
margin:0;
}
Result: