The document provides an overview of Cascading Style Sheets (CSS). CSS allows you to create rules that control the presentation of HTML elements. CSS syntax includes selectors that point to HTML elements and declaration blocks that contain properties and values to style those elements. There are different ways to insert CSS into HTML documents, including external style sheets, internal style sheets, and inline styles. CSS uses the box model to style elements, which includes properties for dimensions, padding, borders, and margins.
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.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
This is the first part (out of two) about basics of JavaScript.
01 What is Dynamic HTML?
02 What is JavaScript?
03 How to JavaScript?
04 JavaScript Syntax
05 JavaScript Basics
06 Conditional Statements
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
This is the first part (out of two) about basics of JavaScript.
01 What is Dynamic HTML?
02 What is JavaScript?
03 How to JavaScript?
04 JavaScript Syntax
05 JavaScript Basics
06 Conditional Statements
Literature, Law and Learning: Excursions from Computer ScienceClare Hooper
The slides I presented at Interdisciplinary Coups and Calamities 2014 about my accepted paper. The abstract of the paper follows:
With the goal of identifying success factors for interdisciplinary collaboration, this paper describes three such collaborations by a computer scientist with: a digital culture researcher from a literary background; an IT law professor; and an education specialist with a background in modern languages. Success factors are discussed for each collaboration and four success factors are suggested: established shared context; strong communication; closeness of relationship between disciplines; typology of collaboration.
Trust from a Human Computer Interaction perspective Sónia
Persuasion, Emotion and Trust (PET) is a design methodology that enables design more technologically engaging products. PET uses three main design values,
Persuasion – Triggers actions;
Emotion - Generate an emotional response; and
Trust – Leveraging credibility and cooperation.
This design methodology main aim is to incentives people to become more engaged and connected with a certain product or ecosystems.
Our main aim is to stress the role of trust on persuasive design.
In general, we will focus on the following aspects:
1) First we will start by creating a clear understanding on the challenges of transferring Human Computer Trust (HCT) values to influence user engagement and fostering trust-enabling interactions.
2) Then, in the second part we will learn to analyze interaction design sequences from digital products that changes human trust behaviors. As well as explore different methodologies for testing.
3) We will end by presenting and reflection on the result achieved.
For more information read my human computer trust blog https://humancomputertrust.wordpress.com
Technology in general -- and the internet and social media specifically -- have changed the way we work. And not just by shifting the mediums through which we communicate, but by changing the very nature of what we communicate. Technology is blurring the line between our personal and professional selves and changing our expectations of each other and our organizations.
Each nonprofit’s story is more than a mission statement, a website or an annual report. The story also includes the people inside and those on the front lines. It's how individuals represent the mission statement and organizational values that bring the vision to life online and out in the world. Blending individual and organizational stories is crucial to success in the digital age.
So, how can organizations and individuals work together to do this?
Nancy Lyons and Meghan Wilker of the Geek Girls Guide will speak about the intersection of technology and humanity, and the role of individuals in representing an organization.
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 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>
In this presentation of session 1, we briefly discuss the following items.
Why do we need to evaluate?
Main idea, purpose of evaluation
When and, Where we need to evaluate.
What to focus during the evaluation process?
Who shall we use?
The object of evaluation
The goal of the course is to bring particular computer and programming skills to the level required by the studies. To create opportunities for the development of Java-based applications. To introduce programming basis and object-oriented principles using Java programming language.
This course is about evaluating the User Experience. It main goal is to highlight the experiential, affective, meaningful and valuable aspects of human-computer interaction as a complement to pragmatic attributes such as utility, ease of use and efficiency of the system.
Sousa, Sonia; Lamas, David; Dias, Paulo (2012). The Implications of Trust on ...Sónia
The main goal is to present and validate a socio-technical model of trust. This model aims to depict the implications of trust on moderating learners online interactions.
This work main motivation is focused on design ways to promote a stronger acceptance sense of community
among learners, by giving emphasis to a more active learning through collaboration and social construction
understanding.
This model aims to eventually provide the means to detect potential trust violations within an online relationship,
helping educators to move towards practices of reconciliation. This socio-technical trust model takes
into account individuals trust predispositions and other five trust attributes and establishes their role on building
relationships, and in developing underlying attitudes, behaviours and beliefs of an learning community.
Workshop on measuring the user eXperience, effectiveness and efficiency and user behaviors.
This is from two perspective (1) user perspective (pragmatic aspects) and (2) designer perspective (pragmatic aspects).
Francesca Gottschalk - How can education support child empowerment.pptxEduSkills OECD
Francesca Gottschalk from the OECD’s Centre for Educational Research and Innovation presents at the Ask an Expert Webinar: How can education support child empowerment?
June 3, 2024 Anti-Semitism Letter Sent to MIT President Kornbluth and MIT Cor...Levi Shapiro
Letter from the Congress of the United States regarding Anti-Semitism sent June 3rd to MIT President Sally Kornbluth, MIT Corp Chair, Mark Gorenberg
Dear Dr. Kornbluth and Mr. Gorenberg,
The US House of Representatives is deeply concerned by ongoing and pervasive acts of antisemitic
harassment and intimidation at the Massachusetts Institute of Technology (MIT). Failing to act decisively to ensure a safe learning environment for all students would be a grave dereliction of your responsibilities as President of MIT and Chair of the MIT Corporation.
This Congress will not stand idly by and allow an environment hostile to Jewish students to persist. The House believes that your institution is in violation of Title VI of the Civil Rights Act, and the inability or
unwillingness to rectify this violation through action requires accountability.
Postsecondary education is a unique opportunity for students to learn and have their ideas and beliefs challenged. However, universities receiving hundreds of millions of federal funds annually have denied
students that opportunity and have been hijacked to become venues for the promotion of terrorism, antisemitic harassment and intimidation, unlawful encampments, and in some cases, assaults and riots.
The House of Representatives will not countenance the use of federal funds to indoctrinate students into hateful, antisemitic, anti-American supporters of terrorism. Investigations into campus antisemitism by the Committee on Education and the Workforce and the Committee on Ways and Means have been expanded into a Congress-wide probe across all relevant jurisdictions to address this national crisis. The undersigned Committees will conduct oversight into the use of federal funds at MIT and its learning environment under authorities granted to each Committee.
• The Committee on Education and the Workforce has been investigating your institution since December 7, 2023. The Committee has broad jurisdiction over postsecondary education, including its compliance with Title VI of the Civil Rights Act, campus safety concerns over disruptions to the learning environment, and the awarding of federal student aid under the Higher Education Act.
• The Committee on Oversight and Accountability is investigating the sources of funding and other support flowing to groups espousing pro-Hamas propaganda and engaged in antisemitic harassment and intimidation of students. The Committee on Oversight and Accountability is the principal oversight committee of the US House of Representatives and has broad authority to investigate “any matter” at “any time” under House Rule X.
• The Committee on Ways and Means has been investigating several universities since November 15, 2023, when the Committee held a hearing entitled From Ivory Towers to Dark Corners: Investigating the Nexus Between Antisemitism, Tax-Exempt Universities, and Terror Financing. The Committee followed the hearing with letters to those institutions on January 10, 202
Normal Labour/ Stages of Labour/ Mechanism of LabourWasim Ak
Normal labor is also termed spontaneous labor, defined as the natural physiological process through which the fetus, placenta, and membranes are expelled from the uterus through the birth canal at term (37 to 42 weeks
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.
A Strategic Approach: GenAI in EducationPeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
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.
Embracing GenAI - A Strategic ImperativePeter Windle
Artificial Intelligence (AI) technologies such as Generative AI, Image Generators and Large Language Models have had a dramatic impact on teaching, learning and assessment over the past 18 months. The most immediate threat AI posed was to Academic Integrity with Higher Education Institutes (HEIs) focusing their efforts on combating the use of GenAI in assessment. Guidelines were developed for staff and students, policies put in place too. Innovative educators have forged paths in the use of Generative AI for teaching, learning and assessments leading to pockets of transformation springing up across HEIs, often with little or no top-down guidance, support or direction.
This Gasta posits a strategic approach to integrating AI into HEIs to prepare staff, students and the curriculum for an evolving world and workplace. We will highlight the advantages of working with these technologies beyond the realm of teaching, learning and assessment by considering prompt engineering skills, industry impact, curriculum changes, and the need for staff upskilling. In contrast, not engaging strategically with Generative AI poses risks, including falling behind peers, missed opportunities and failing to ensure our graduates remain employable. The rapid evolution of AI technologies necessitates a proactive and strategic approach if we are to remain relevant.
3. Summary
• HTML pages are text documents.
• XHTML uses tags
– characters that sit inside angled brackets <p>
• Each tag has a special meaning to the browser.
– Tags are often referred to as elements.
• Tags
– Usually come in pairs.
– The opening tag >
• Represents the start of a piece of content;
– The closing tag />
– Represents the end.
5. Understanding structure
• HTML pages are
like text
documents.
• It is very similar
to a book
– Head
– headings
– subheadings
– Text, images,
videos…
• HTM L Describes
– the Structure of the
document
DOM
Establish the Order of things
6. Assuming that
• You understand HTML
– Let’s start learning CSS
• What is CSS?
– Is Cascading Style Sheets
• What it does?
– With HTML you
• Structured the page content
– With CSS you
• Create rules to control HTML elements
7. CSS - Cascading Style Sheets
• With Cascading Style Sheets
– We no longer use HTML tags to format a
document
• Allows you to create rules to control
– Your HTML elements
• How they are formatted/displayed
• CSS saves lot of work
8. CSS Syntax
• Include 2 distinct parts
– the selector and the declaration
• A selector
– Points to the HTML element
• A declaration block
– Contains one or more declarations separated by a
semicolons
9. CSS Syntax
• looks like this…
p {
color: red;
}
selector declaration
property value
Element = selector Starts { }
Each declarations ends ;
10. CSS Selectors
• A selector allow you to
– Select and manipulate manipulate HTML elements.
– CSS selectors are used to ”select" HTML elements
• They do that selection based on the element name
• For instance
– p selector “finds” all <p> tags in HTML and formats it
as you declared in CSS
p {
color: red;
text-align: center;
}
11. CSS style
• Selectors
– Indicate which
element the rule
applies to
• Declarations
– Indicate how the
elements should be
styled.
• Associate style rules to
• HTML elements
p {
color: red;
}
selector declaration
property value
13. Comments in CSS
• Comments in CSS
/* This is a single-line comment */
/* This is
a multi-line
comment */
• Comment in HTML
<!-- HTML comment -->
14. CSS Selectors
Universal *{} applies to all elements in the
document
Type selector h1, h2, h3 {} applies to every <h1> and <h2>
element in the page
class selector .note{} applies to elements who indicate
class=“note”
p.note} Target <p> elements who are inside
a class=“note” element
ID selector #xpto{} applies to elements who indicate
id=“xpto”
#xpto ul li {} applies to <ul> <li> when they are
inside id=“xpto” element
child selector li>a{} Target only <a> elements who are
children of an <li>
descendent
selector
p a{} Target only <a> elements who are
inside<p>
CSS selectors are case sensitive
15. A element selector
• Is selected based on the element named in HTML
– All <p> elements
– All <h1>
– All <body>
• How to change the font size of a element selector
h1, h2, h3, h4, h5, h6 {
font-size: 1.2em;
}
16. ID attribute in HTML
• In HTML is a unique identifier
– Used to distinguish one element from another
– For instance
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry.</p>
<p id=”notes” >Lorem Ipsum is simply dummy text of the
printing and typesetting industry .</p>
<p>Lorem Ipsum is simply dummy text of the printing
and typesetting industry. </p>
• The identifier named notes
– Appears just once in a single web page
17. This is useful…
• When using CSS styles
– To assign a particular style to a HTML element
– You identify that particular element with an id
attribute
<p id=”notes” > text </p>
• id attribute
– is also use in JavaScript
• to allow the script to work with that particular element.
18. id attribute
HTML code
<p id=”note"> Change style of this paragraph
</p>
CSS code
#note{
text-align: center;
color: red;
}
You only change the style
of the paragraph with the
id selector called “note”
19. Class attribute
• Is not an unique attribute
– You can use it more than once in the same web page
• Used to identify
– 2 or more similar elements in the same page
• A class attribute
– Is a value that describe the class that a particular element
belongs to
<p class=”quote” >Lorem Ipsum is simply dummy text of the printing
and typesetting industry.</p>
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry .</p>
<p class=”quote” >Lorem Ipsum is simply dummy text of the printing
and typesetting industry. </p>
20. This is useful…
• When you use styles
– For example,
• To assign similar behaviors to a HTML element
• How
– You assign a class attribute name as “quote”.
• Every time you wont the use “quote” attitude
• you add it to the tag element
– <p class=”quote” > </p>
21. The class Selector
HTML code
<p class=”center” >all HTML elements with
class="center” will have this characteristics </p>
<h1 class="center”> this one as well </p>
CSS code
.center {
text-align: center;
color: red;
}
22. Grouping Selectors
• Multiple selectors can be grouped
h1 {color: blue; font-weight: bold;}
h2 {color: blue; font-weight: bold;}
h3 {color: blue; font-weight: bold;}
h1, h2, h3 {color: blue; font-weight: bold;}
• Multiple rules can be applied to the same
selector
h1, h2, h3 {color: blue; font-weight: bold;}
h3 {font-style: italic;}
NOTE
Be sure to put a
comma after
each selector
except the last.
23. Type of styles
CSS Selectors
• Element Selectors:
p { color: blue; }
• Class Selectors:
.box { background-color: #CFC;}
• ID Selectors:
#content {width:960px;}
• Descendant Selectors:
p em { color: red;}
HTML generic Tags
• Inline
<span>
• Block Level
<div>
<div Class=“box”>
<div id=“content”>
24. Block and inline elements
• Block elements represent
– Separate blocks of text for instance
• will start on a new line
– Example of block element
• <div> element, <p>, <li>
• Inline elements are elements that
– follow the flow of the text
• <b>, <i>, <img>, <a> or <em>
25. <div> element in HTML
• Is used as an aggregator of elements in a block
– the <div> element will start on a new line
<div id=“pageTop”>Dummy text title </div>
<div class=”content”>Lorem Ipsum is simply dummy text of the
printing and typesetting industry . Lorem Ipsum is simply
dummy text of the printing and typesetting industry. </div>
• It is used for example together with
– Id and class attributes to indicate the space a block
can occupy in the screen
• Used as a replacement of tables
– To control and hold the elements of a web page
26. <span> element
• Inline element
– It aggregates for instance text and other elements
inline
– Has the same behavior as <div> but
• Group elements in a line not a block
<p>Lorem Ipsum is simply dummy text of the printing and
typesetting industry.<br/>Lorem Ipsum <span class=”quote” > is
simply dummy </span> text of the printing and typesetting
industry . Lorem Ipsum is simply dummy text of the printing and
typesetting industry. </p>
27. Insert CSS in HTML
• Three ways
– External style sheet
• linked from a separate CSS style sheet.
• <link> indicate where to find CSS style sheet
– Internal style sheet
– Inline style
28. External Style Sheet
• CSS is in a separate document from HTML
– Advantage
• You can change the look of an entire website by
changing just one file
– One style to multiple XHTML pages
• Just link the CSS file to each pages
– Truly separates HTML from CSS
– Designing and editing to become easier
– Modifying the CSS style is easier
29. <head>
<title>linked Styles Example</title>
<link href=“my_style_sheet.css” media=“screen”
rel=“stylesheet” type=“text/css” />
</head>
External Style Sheet
• How to?
– Each HTML file must include a reference to the
external style sheet file
• This is done using the <link> element
• The <link> element goes inside the head section
Path for CSS file
Type of document
linked to
Relation from HTML
to liked file
30. External Style Sheet
• Rules
– Use text editor
– Save with extension .css
• For example “myStyle_yourname.css”
– The file should not contain any html tags
31. Internal Style Sheet
• The style is embed directly in the HTML
markup
– Apply CSS style to one single page
• Advantage
– Allows all pages to use the same style rules
• Problem
– not efficient the code is not portable
– hard to edit the markup
32. Internal Style Sheet
• How to?
– Start a <style> element
– Inside HTML head section
– Add the CSS style
<head>
<title>Embedded Styles Example</title>
<style type="text/css”>
body {
background-color: linen;}
h1 { font-size: 16pt; }
p { color: blue; }
</style>
</head>
CSS syntax
33. CSS syntax
Inline Style Sheet
• Apply CSS style to one single element
– It has a similarity with internal way
• you are not truly separating the styles from the
content;
– they are still in the same document
– Plus… this way
• style loses many of the advantages of a style sheet
<h1 style="color:blue;margin-left:30px;">This is a formatted
heading.</h1>
34. Multiple Style Sheets
• Some properties have been defined in
different style sheets
– for the same selector
• For instance
– External style sheet
• Has declared properties for the <h1> element
– Internal style sheet
• Has as well a property for the <h1> element
• External overlaps the internal
35. Cascading order
• How CSS rules cascade
– Highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
– Last rule
• If two selectors are identical, the latter of the two will take
precedence
– Specific
H1{} is more specific than *{}
– !important;
• Indicates that previous assign property is more important then
other rule assigned to the same element
36. Inheritance
• If you applied to a body element
– <body> properties like
• font-family:
• color:
– They are assumed by the child elements
• Example
– Save time for you apply general properties to
many elements
38. Using Internal Style Sheet
• Go to your index.html page
– Apply CSS styles to the existing elements in the main
page
• Selectors:
p {color: blue; font-style: normal; font-family: sans-serif;
}
a {color: #66CC00;}
Body {width: 960px; border: 1px solid black;
background-color: #291A12 solid;}
H1, h2, h3, h4 {font-size: 1opx;}
ol, ul { list-style: none;}
39. How to…
• Add the blue code to your index.html
<html>
<head>
<title>My page </title>
<style>
body {
}
</style>
<body>
40. Why use External CSS
• All your web page share the same structure
– Some codes do not need to be repeated in every
page
• Resulting in less code (HTML code is easier to read)
• Easy to change the CSS rules later on
– This is particular useful when you structure your
document using
• block of elements instead of tables
• But sometimes you might need to use internal
CSS rules
41. When to use internal CSS
• When you are creating a single page
• In one page that requires few extra CSS rules
– If so place the CSS rules in the <head> of the
document
– Avoid to add it directly to the text
42. One last advice
• Before launch your website test it in different
browser
– You might find slight differences in how browsers
display the pages.
– Check in different OS as well
44. Understand CSS
• Imagine that there is an invisible box around
every HTML element
<p>Lorem Ipsum is simply dummy
text of the printing and
typesetting industry. Lorem Ipsum
text of the printing. </p>
<span class=”quote” > is simply
dummy </span>
45. Understand CSS
• CSS allows you to create rules to control
– Each individual box
• Including the contents of that box.
<p>Lorem Ipsum is simply dummy
text of the printing and
typesetting industry. Lorem Ipsum
text of the printing. </p>
<span class=”quote” > is simply
dummy </span>
block level elements
inline elements
46. CSS
• Selectors indicate
– which element the
rule applies to
• Declarations
indicate
– How the elements
referred to in the
selector should be
styled.
• Associate style rules to
• HTML elements
p {
color: red;
}
selector declaration
property value
48. Box dimensions
• By default a CSS style has a box with
– Enough size to group all elements
• To make it bigger use
– width, height properties and pixel or %, em values
height: 300px;
width: 300px;
background-color: #bbbbaa;
• Limiting the width and height
min-width: 450px; max-width: 650px;
min-height: 10px; max-height: 30px;
49. Content overflowing
• The overflow property indicates
– That the content within the box is larger than the
box
– Values
overflow: hidden;
overflow: scroll;
50. Border Margin and Padding
• A box has 3 main properties
– This will help you to adjust and control the
appearance of the box
Border-width: 1px; - visible
Margin: 0px; space outside the edge of the border
Padding: opx; space between the border and the
content
• Padding increases the readability of the text.
51. More about box
• change padding, margin, width and height
body {
padding-top: 100px;
padding-right: 50px;
padding-bottom: 75px;
padding-left: 100px;
margin-top: 10px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 20px;
height:100px;
width:100px;
border:1px black solid;
}
can be defined in px, pt, em,
body {
padding: 100px 50px 75px 100px;
margin:10px 5px 15px 20;
height:100px;
width:100px;
border:1px black solid;
}
Top right bottom left
53. More about border
• border-style:
– solid, dotted, dashed, double, groove
– hidden / none
• No border is shown
• border-color:
– Use color principles
54. Centering a box
• Set the width then
– set the left-margin and right-margin to auto
p.example {
width: 300px;
margin: 10px auto 10px auto;
}
56. CSS Background
• CSS background properties
– Define the background effects
• Properties
– background-color
– background-image
– background-repeat
– background-attachment
– background-position
Color specification
HEX value - "#ff0000”
RGB value - "rgb(255,0,0)”
color name - "red"
57. Opacity
0.0 (transparent) to 1.0 (opaque)
Background properties
• Background-color, color, opacity
body {
background-color: blue;
color: darkcyan;
opacity: 0.5;
}
Body{
background-color:#FFF0F5;
color: #ee3e80;
}
body
{
background-color: rgb(255,0,255);
color: rgb(100,100,90);
}
Transparent is the color by default
Can be add in 3 ways
HEX value - like "#ff0000”
RGB value - like "rgb(255,0,0)”
color name - like "red"
58. Background Image
• background-image property
Body { background-image: url(”img.png"); }
background-repeat: repeat-x; - horizontally repeat
background-repeat: no-repeat;
background-position: right top;
• Simplified
background: #ffffff url("img_tree.png") no-repeat right top;
59. See HTML&CSS book, page: 276
For know more about units and
type size
• text-align:
– center/left/right
• color:
– hex, color name, or rgb
• font-size
– %, small or medium, em, pt or px
• font-family:
– Sans-serif, serif, cursive, fantasy, monospace
Text and Fonts
60. Color property
• Allow you to change color of a text
– rgb values
• red, green and blue
– rgb(100,100,90)
– Hex codes
• six-digit codes
• # sign and start from 000000 until 111111
– Color names
• 147 predefined color names
61. Understand color
• A screen see color as a mix of 3
– Red, green and blue
• Those color are displayed as pixels
– Tiny squares
• The number of squares depends on the resolution
• (number of pixels per inch 1 inch = 2.5 cm)
– Black is the absence of light #000000
• http://paletton.com/
62. Contrast
• Be careful the is contrast when picking
– background-color and color
• With low contrast the text is hard to read
– Same happens when the text emits too much light
• Background black and text white
63. Opacity
• CSS3 allows you to add opacity to you
– blocked and inline elements
• Opacity value changes between
– 0.0 and 1.0
– 0.5 is 50% opacity
opacity: 0.5;
64. Understand Typeface
• Serif, sans-serif and monospace
– Serif –extra detailed
• Georgia, times, times new roman
– sans-serif letters are strait
• Arial Verdana, Helvetica
– Monospace letters have same size
• Courier, courier new
A A A
– Sans-serif fonts are clear to read on a screen
65. Size type
• Pixels
– Most commonly used
– Allow precision
• Percentages
– Default size in a browser is 16px = 100%
• EMS
– The with of the letter m
h1 24px
h2 18px
h3 14px
body 12px
66. Type of Letters
• Weight
– Affects the amount of white space and contract in
the page
• Style
– Normal, Italic and oblique
• Stretch
– Changes the space b e t w e e n characters
67. CSS3 shadow
• Text-shadow property
– It is complicated
• Takes three lengths and a color
– lengths 1 – indicate how far to the left or right the shadow
falls
– Lengths 2 - distance to the top
– Lengths 3 – optional is amount of blur
– Color – what color to add
text-shadow: 1px 1px 0px #000000;
73. Inline/block
• Transform an inline element into a block
elements or vice-versa
– using display property
li { display: inline; margin-right: 10px;}
– Make an block element act like inline element
• Em { display: block; margin-right: 10px;}
– Vice-versa
display: hidden; display: visible;
– Hide/show an element from the page
76. Cursor styles
• Auto, crosshair, default, pointer, move, text,
wait, help url("cursor.gif");
a { cursor: move;
See HTML&CSS book, page: 337-374
For know more about units and
type size
78. Positioning elements
• Key concept
– CSS sees HTML element as a box
• Block level
– Start on a new line <p< <h1< <ul> <li>
• Inline
– Float around the text <img> <b> <i>
79. Controlling the position
• 5 positioning schemes
– normal flow - Static
• Every block-level element
appears on a new line
• The paragraphs appear one
after the other, vertically
down the page.
position: static;
Normal flow
you do not need a CSS property to indicate that elements should
appear in normal flow,
80. Relative positioning
– Moves an element
from normal flow
position to
– Where you indicate
• top-right-bottom -
pushed down and
right from
top: 10px;
left: 100px;
• Do not affects the
position of the rest of
the text
Relative position
81. Need to know about
– Relative
Move down 30 pixels, and to the left 80 pixels
position:relative
Top:30px;
Left:80px;
But the original space of the box still belongs
to the box
83. Absolute positioning
• absolute positioning
– Take the box pout of
the normal flow
• It position is not
affected by the of
other elements
– The block moves as
the user scrolls up
and down in the
page
Absolute position
84. Position: absolute
• Position: absolute
the element is removed from the document
and placed exactly where you tell it to go.
position:absolute;
top:0;
right:0;
width:200px;
85. Fixed position
• Fixed position
– Type of absolute position
– Position the box in
relation to the browser
window
• If you scroll the page it
stay in the same position
– The surrounding
elements are not affected
by the bock
placed in the center of the page
25% from the top of the screen
Fixed position
86. Position: absolute
• Position: absolute
the element is removed from the document
and placed exactly where you tell it to go.
position: fixed;
top: 0px;
left: 50px;
87. Floating elements
• Floating elements
– Take the box out of
normal flow
– Position left or right
– Has a block behavior
around the other
elements
Floating position
88. Floating elements
• Use when
– you have 2 columns (side by side elements) with a
variable height in your box
– When you use the float property, you should also
use the width property to indicate how wide the
floated element should be.
• float: right; width: 275px;
– Then after the floating elements we can "clear"
the floats to push down the rest of the content.
– clear:both;
89. z-index property
• When you move
– any element from normal flow, boxes can overlap
• The z-index property
– allows you to control which box appears on top
• Its value is a number
– the higher the number the closer that element is
to the front.
• z-index: 10; from
• z-index: 5; back
90. Additional sources
• Keith, Jeremy. HTML5 for web designers, ISBN
978-0-9844425-0-8, 2010.
• Cederholm, Dan. CSS3 for Web Designers,
ISBN 978-0-9844425-2-2, 2010.