1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on a web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
that was an old PSD to XHTML session. teaching the following:
introduction to HTML
introduction to CSS
how to slice the design and export it from photoshop to be coded page.
some tools and resources.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".
Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on a web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
that was an old PSD to XHTML session. teaching the following:
introduction to HTML
introduction to CSS
how to slice the design and export it from photoshop to be coded page.
some tools and resources.
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
In this one hour tutorial Simon Collison will demonstrate why convention, order and understanding are vital to web design and development teams. He'll give insights into how Erskine approach projects and will help attendees explore ways of creating and evolving their own "Ultimate Package".
Why conventions are essential for successful web projects. How Erskine approach HTML, CSS & JavaScript in their own projects. What to consider when developing your own "Ultimate Package".
As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.
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.
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.
The sequels of steps the browser goes through to convert HTML, CSS and JavaScript into actual pixels on the screen – that’s the critical rendering path. By understanding what happens between writing the markup and looking at our websites we can optimize the performance of each page.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.
As CSS3 adds support for rich styling in standards-based web applications, style sheet markup can quickly get out of control! Many CSS effects today require repetitive rules to cover the proprietary browser CSS prefixes. LESS for CSS is an open source framework that makes modern CSS more manageable. With support for variables, mix-ins, nested CSS rules, and operations, LESS finally makes complex CSS easy to maintain. In this session, you will discover how LESS can be easily adopted in any ASP.NET project and learn about tools that make it easy to work with LESS in Visual Studio 2010.
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.
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.
The sequels of steps the browser goes through to convert HTML, CSS and JavaScript into actual pixels on the screen – that’s the critical rendering path. By understanding what happens between writing the markup and looking at our websites we can optimize the performance of each page.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.
Programming intro variables constants - arithmetic and assignment operators
part 1 Python basics
https://youtu.be/ouTXjzL2qHc
part 2 Python Data Types , Variables and arithmetic Expressions
https://youtu.be/r6bxIqkSJ8w
part 3 Python Data Types
https://youtu.be/au_xwGULCQE
part 4 Python Variables
https://youtu.be/J_aUFaOGHWc
Part 5 Python Variables in Solutions of Quadratic equation
https://youtu.be/2Hn2qtz0Y5c
part 6 Python meaning of computer Language
https://youtu.be/0bDlELqfa9A
part 7 Python using NumPy to solve a system of linear scalar equations in matrix for Kirchhoff
https://youtu.be/gF2zueHAcy4
Part 8 Python integrating Quadratic equation
https://youtu.be/Gla2DZropIc
part 9 Python integrating and or differentiating polynomial functions in math
https://youtu.be/KGKF2mHnDOA
How to use common app
Prepare for gaining international grants or scholarships out side Egypt after finishing grade 12 by knowing well how to build your common app application and how to search for a good colleges and how to apply to colleges from my following video
https://youtu.be/NCp7J_eBZ4A
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Introduction to AI for Nonprofits with Tapp NetworkTechSoup
Dive into the world of AI! Experts Jon Hill and Tareq Monaur will guide you through AI's role in enhancing nonprofit websites and basic marketing strategies, making it easy to understand and apply.
Macroeconomics- Movie Location
This will be used as part of your Personal Professional Portfolio once graded.
Objective:
Prepare a presentation or a paper using research, basic comparative analysis, data organization and application of economic information. You will make an informed assessment of an economic climate outside of the United States to accomplish an entertainment industry objective.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Biological screening of herbal drugs: Introduction and Need for
Phyto-Pharmacological Screening, New Strategies for evaluating
Natural Products, In vitro evaluation techniques for Antioxidants, Antimicrobial and Anticancer drugs. In vivo evaluation techniques
for Anti-inflammatory, Antiulcer, Anticancer, Wound healing, Antidiabetic, Hepatoprotective, Cardio protective, Diuretics and
Antifertility, Toxicity studies as per OECD guidelines
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
Chapter 3 - Islamic Banking Products and Services.pptx
Css week11 2020 2021 for g10 by eng.osama ghandour
1. Agenda
1- Warm up revision about CSS 10 min
2- ppt teacher demonstrate about CSS 15m
3- Video about CSS Selectors 5min
4- Practical work Students divided in pairs and use
notepad or Atom , explorer to create very simple web
page using CSS30m
7- Questions and answers as pretest about CSS 5 min
8-Refelection 5 min
9- Home work 5 min
CSS
2. LO CS.1.06 - Identify
and explain the
addition of a style to
web site by using
cascading style sheets
(CSS).
Lesson plan
CSS
14. To send the form to e.mail
instead of database
14
<form action="/action_page.php" method="get">
<form action="/action_page.php" method="post">
<form action ="mailto:you@yourwebsite.com">
<form action="mailto:you@yourwebsite.com">
CSS
15. CSS Syntax
CSS is composed of style rules that the
browser interprets and then applies to the
corresponding elements in your document.
A style rule has three parts: selector, property,
and value.
For example, the headline color can be defined
as:
h1 { color: orange; }
16. Styles' locations
Inline --- inside any tag in Body
Internal styles --- inside style tag in Head
External --- CSS file inside link tag in Head
16
CSS
Style sheet or style element — not both!
18. internal styles : are defined within
the <style> element, inside
the head section of an HTML page.
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head> 18
CSS
31. Grouping styles
31
p, h1, h2 {
color: green;
}
h2 {
background-color: yellow;
} CSS
This paragraph uses the above style.
output
This h2 uses the above styles.
• A style can select multiple elements separated by
commas
• The individual elements can also have their own styles
CS380
32. CSS comments /*…*/
32
/* This is a comment.
It can span many lines in the CSS file. */
p {
color: red; background-color: aqua;
} CSS
• CSS (like HTML) is usually not commented as
rigorously as programming languages such as Java
• The // single-line comment style is NOT supported in
CSS
• The <!-- ... --> HTML comment style is also NOT
supported in CSS
CS380
33. • The HTML:<p class="first">
Border width of this paragraph is set to 2px.
</p>
<p class="second">
Border width of this paragraph is set to 5px.
</p>
The CSS:
• p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}Try It Yourself 33
34. Cascading Style Sheets
• Properties of an element cascade together
in this order:
– browser's default styles
– external style sheet files (in a <link> tag)
– internal style sheets (inside a <style> tag in
the page's header)
– inline style (the style attribute of the HTML
element)
CS380 34
35. 35
How CSS Works — Matching
• Every XHTML document represents a document
tree
• The browser uses the tree to determine which rules
apply
• What about inheritance? And conflicts?
37. Inheriting styles
37
body { font-family: sans-serif; background-color: yellow;
}
p { color: red; background-color: aqua; }
a { text-decoration: underline; }
h2 { font-weight: bold; text-align: center; }
CSS
This is a heading
• A bulleted list output
• when multiple styles apply to an element, they are
inherited
• a more tightly matching rule can override a more
general inherited rule
A styled paragraph. Previous slides are available on the website.
CS380
38. Styles that conflict
38
p, h1, h2 { color: blue; font-style: italic; }
h2 { color: red; background-color: yellow; }
CSS
This paragraph uses the first style above.
output
• when two styles set conflicting values for the same
property, the latter style takes precedence
This heading uses both styles above.
CS380
43. What we learn today
1-Selectors (Type - Class
and ID).
2. External CCS file.
3. Boxes (Content –
Padding – Border - Margin)
43
CSS
44. CSS properties for fonts
property description
font-family which font will be used
font-size how large the letters will be drawn
font-style used to enable/disable italic style
font-weight used to enable/disable bold style
CS380 44
Complete list of font properties (http://www.w3schools.com/css/css_reference.asp#fo
45. CSS properties for text
property description
text-align alignment of text within its element
text-decoration decorations such as underlining
line-height,
word-spacing,
letter-spacing
gaps between the various portions of
the text
text-indent
indents the first letter of each
paragraph
CS380 45
Complete list of text properties (http://www.w3schools.com/css/css_reference.asp#te
46. Boxes (Content – Padding
– Border - Margin)
Listen to this video
Offline On line
CSS
53. • The HTML:<p class="first">
Border width of this paragraph is set to 2px.
</p>
<p class="second">
Border width of this paragraph is set to 5px.
</p>
The CSS:
• p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}Try It Yourself 53
54. 2. Change the layout of a web
page.
54
CSS
Listen to this video
Offline
On line
CSS Auto Adjusting Stretch Fit Web Site
Layout Tutorial HTML5 Template
55. 2. Change the layout of a web
page.
55
CSS
Listen to this video
Offline
On line
Window Size Responsive CSS Layout
Stylesheet Change JavaScript Tutorial
56. 3. Access Developer Tools in
your browser.
56
CSS
Listen to this video
Offline
On line
14 Firefox Developer Tools You Might Not
Know About
57. 3. Access Developer Tools in
your browser.
57
CSS
Listen to this video
Offline
On line
Debugging JavaScript - Chrome DevTools
101
60. 60
Learn and practice through on line web sites
http://www.w3schools.com/tags/tag_div.asp
http://www.quackit.com/html_5/tags/html_div_tag.cfm
https://www.sololearn.com/Course/HTML/
https://www.freecodecamp.org
CSS
62. Prepare for next week
according to student’s law
Gn=Wn % Ng
5. Selectors (Type - Class
and ID). 6. External CCS file.
7. Boxes (Content –
Padding – Border - Margin).62
CSS
63. Reflection
• What is your goal to accomplish in
next week End Using HTML and CSS?
CSS
64. Home work (s. proj.) 1
• Create /design a web page using
HTML/CSS to show a project /hoppy /skill
of your favorites following the bellow
rubric .
64
CSS
65. rubaric
65
CSS
Blue
Design a profficinal web page which contains CSS
Elements such as 1- Selectors (Type - Class and ID).
2. External CCS file.3. Boxes (Content – Padding –
Border - Margin)
Green
Design a normal web page which contains CSS
Elements suchas 1- Selectors (Type - Class and ID).
2. External CCS file.3. Boxes (Content – Padding –
Border - Margin).
Yellow missing two points of green level.
Read a web page haven't includding any CSS elemnets .
67. 67
Learn and practice through on line web sites
https://www.thewebevolved.com
https://www.123test.com/
https://www.wscubetech.com/
https://www.w3schools.com/php/php_quiz.asp
https://www.guru99.com
https://codescracker.com/exam/review.php
https://www.arealme.com/left-right-brain/en/
https://www.javatpoint.com/c-quiz
https://www.proprofs.com/
https://www.geeksforgeeks.org/
https://www.tutorialspoint.com
https://www.sololearn.com/Course/HTML
http://www.littlewebhut.com/
CSS