SlideShare uma empresa Scribd logo
1 de 41
Baixar para ler offline
Web Technology
(NCS-504)
Prepared By
Mr. Abhishek Kesharwani
Assistant Professor,UCER Naini,Allahabad
Colors and backgrounds
color
background-color
background-image
background-repeat
background-attachment
background-position
Background
The color property describes the foreground color of
an element.
h1 {
color: #ff0000;
}
Colors and backgrounds
• The background-color property describes the
background color of elements.
body {
background-color: #FFCC66;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Colors and backgrounds
The CSS property background-image is used to insert a
background image.
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
}
h1 {
color: #990000;
background-color: #FC9804;
}
Repeat background image
background-repeat: repeat-x
The image is repeated horizontally
background-repeat: repeat-y
The image is repeated vertically
background-repeat: repeat
The image is repeated both horizontally and
vertically
background-repeat: no-repeat
The image is not repeated
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-attachment
• The property background-attachment specifies
whether a background picture is fixed or scrolls
along with the containing element.
• A fixed background image will not move with the
text when a reader is scrolling the page, whereas
an unlocked background image will scroll along
with the text of the web page.
• Background-attachment: scroll
The image scrolls with the page - unlocked
• Background-attachment: fixed
The image is locked
background-attachment
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
h1 {
color: #990000;
background-color: #FC9804;
}
background-position
• By default, a background image will be positioned in
the top left corner of the screen. The property
background-position allows you to change this
default and position the background image
anywhere you like on the screen.
• There are numerous ways to set the values of
background-position.
• For example, the value '100px 200px' positions the
background image 100px from the left side and
200px from the top of the browser window.
• The coordinates can be indicated as percentages of
the browser window, fixed units (pixels,
centimetres, etc.) or you can use the words top,
bottom, center, left and right.
uptu web technology unit 2 Css
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
h1 {
color: #990000;
background-color: #FC9804;
}
Fonts
FONT-FAMILY
FONT-STYLE
FONT-WEIGHT
FONT-SIZE
FONT
Font family
• The property font-family is used to set a
prioritized list of fonts to be used to display a
given element or web page. If the first font on
the list is not installed on the computer used to
access the site, the next font on the list will be
tried until a suitable font is found.
An example
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Font style Font weight
• The property font-style defines the chosen font
either in normal, italic or oblique.
h2 {font-family: "Times New Roman", serif; font-
style: italic;}
• The property font-weight describes how bold or
"heavy" a font should be presented. A font can
either be normal or bold. Some browsers even
support the use of numbers between 100-900
(in hundreds) to describe the weight of a font.
td {font-family: arial, verdana, sans-serif; font-
weight: bold;}
Font size
• The size of a font is set by the property font-size.
• There are many different units (e.g. pixels and
percentages) to choose from to describe font
sizes. In this tutorial we will focus on the most
common and appropriate units.
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Font
• Using the font short hand property it is possible to cover
all the different font properties in one single property.
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
Using the short hand property, the code can be simplified:
p {
font: italic bold 30px arial, sans-serif;
}
Text
CSS gives you to add layout to text.
The following properties will be described:
text-align
text-decoration
letter-spacing
text-transform
Text alignment
• The CSS property text-align corresponds to the attribute align
used in old versions of HTML. Text can either be aligned to the
left, to the right or centred. In addition to this, the value
justify will stretch each line so that both the right and left
margins are straight.
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Text decoration
• The property text-decoration makes it is possible to add
different "decorations" or "effects" to text. For example, you
can underline the text, have a line through or above the text,
etc.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Letter space
• The spacing between text characters can be
specified using the property letter-spacing. The
value of the property is simply the desired width.
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Text transformation
• The text-transform property controls the capitalization of a
text. You can choose to capitalize, use uppercase or lowercase
regardless of how the original text is looks in the HTML code.
• There are four possible values for text-transform:
capitalize
• Capitalizes the first letter of each word. For example: "john
doe" will be "John Doe".
uppercase
• Converts all letters to uppercase. For example: "john doe" will
be "JOHN DOE".
lowercase
• Converts all letters to lowercase. For example: "JOHN DOE"
will be "john doe".
none
• No transformations - the text is presented as it appears in the
HTML code.
Links
• A link can have different states. For example, it
can be visited or not visited. You can use
pseudo-classes to assign different styles to
visited and unvisited links.
• Use a:link and a:visited for unvisited and visited
links respectively. Links that are active have the
pseudo-class a:active and a:hover is when the
cursor is on the link.
Links
a {text-decoration:none;}
a:link {color: blue;text-decoration:none;}
a:visited {color: purple;text-decoration:none;}
a:active {background-color: yellow;text-
decoration:none;}
a:hover { color:red; text-decoration:none;}
Identification of element using id
• In addition to grouping elements, you might
need to identify one unique element. This is
done by using the attribute id.
• What is special about the attribute id is that
there can not be two elements in the same
document with the same id. Each id has to be
unique.
<h2 id="c1-1">Chapter 1.1</h2>
<h2 id="c1-2">Chapter 1.2</h2>
#c1-2 {
color: red;
}
Identification of element using class
• Sometimes you want to apply a special style to a particular
element or a particular group of elements.
• Let's say that we have two lists of links of different grapes used
for white wine and red wine. The HTML code could look like
this:
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet
Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Grouping with <div>
• <div> is used to group one or more block-level
elements.
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
#democrats {
background:blue;
}
#republicans {
background:red;
}
Margin and Padding
• An element has four sides: right, left, top and bottom. The
margin is the distance from each side to the neighboring
element (or the borders of the document).
body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
body {
margin: 100px 40px 10px 70px;
}
uptu web technology unit 2 Css
Padding
• Padding can also be understood as "filling". This
makes sense as padding does not affect the
distance of the element to other elements but
only defines the inner distance between the
border and the content of the element.
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
Borders
border-width
border-color
border-style
Border-width
• The width of borders is defined by the property
border-width, which can obtain the values thin,
medium, and thick, or a numeric value, indicated
in pixels.
border-color, border-style
• The property border-color defines which color
the border has.
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
p {
border-width: 1px;
border-style: dashed;
border-color: blue;
}
Floating elements
• An element can be floated to the right or to left
by using the property float. That is to say that
the box with its contents either floats to the
right or to the left in a document.
uptu web technology unit 2 Css
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,
idciro etiam nostrarum voluntatum...</p>
#picture {
float:left;
width: 100px;
}
Positioning of elements
• With CSS positioning, you can place an element
exactly where you want it on your page.
#d1 {
left: 350px;
bottom: 150px;
}
#d2 {
left: 150px;
bottom: 500px;
}
#d3 {
left: 50px;
bottom: 700px;
}

Mais conteúdo relacionado

Mais procurados (20)

HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Html and css
Html and cssHtml and css
Html and css
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5
 
HTML Lists & Llinks
HTML Lists & LlinksHTML Lists & Llinks
HTML Lists & Llinks
 
Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1Web Design Course: CSS lecture 1
Web Design Course: CSS lecture 1
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascriptWeb front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
Html cia
Html ciaHtml cia
Html cia
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
 
Css Basics
Css BasicsCss Basics
Css Basics
 
Html intro
Html introHtml intro
Html intro
 
Css.html
Css.htmlCss.html
Css.html
 
Introduction to css
Introduction to cssIntroduction to css
Introduction to css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
CSS
CSSCSS
CSS
 
Web Design Course: CSS lecture 4
Web Design Course: CSS  lecture 4Web Design Course: CSS  lecture 4
Web Design Course: CSS lecture 4
 

Destaque

HTML and Future Web Technology
HTML and Future Web TechnologyHTML and Future Web Technology
HTML and Future Web TechnologyJonathan Jeon
 
PHP Workshop Notes
PHP Workshop NotesPHP Workshop Notes
PHP Workshop NotesPamela Fox
 
Web technology html5 php_mysql
Web technology html5 php_mysqlWeb technology html5 php_mysql
Web technology html5 php_mysqldurai arasan
 
Semantic Modelling using Semantic Web Technology
Semantic Modelling using Semantic Web TechnologySemantic Modelling using Semantic Web Technology
Semantic Modelling using Semantic Web TechnologyRinke Hoekstra
 
JavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGIJavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGIAashish Jain
 
History of Web Technology
History of Web TechnologyHistory of Web Technology
History of Web TechnologyShuvo Malakar
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Jonathan Jeon
 
ASP, ASP.NET, JSP, COM/DCOM
ASP, ASP.NET, JSP, COM/DCOMASP, ASP.NET, JSP, COM/DCOM
ASP, ASP.NET, JSP, COM/DCOMAashish Jain
 
SEO in Web Technology
SEO in Web TechnologySEO in Web Technology
SEO in Web TechnologyAbdul Malick
 
Introduction To Web Technology
Introduction To Web TechnologyIntroduction To Web Technology
Introduction To Web TechnologyArun Kumar
 
Basic concept of computer network
Basic concept of computer networkBasic concept of computer network
Basic concept of computer networkSaahilIT
 
Computer system and network configuration
Computer system and network configurationComputer system and network configuration
Computer system and network configurationVon Alvarez
 

Destaque (20)

Java script
Java scriptJava script
Java script
 
HTML and Future Web Technology
HTML and Future Web TechnologyHTML and Future Web Technology
HTML and Future Web Technology
 
Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1 Web Technology UPTU UNIT 1
Web Technology UPTU UNIT 1
 
HTML, CSS and XML
HTML, CSS and XMLHTML, CSS and XML
HTML, CSS and XML
 
PHP Workshop Notes
PHP Workshop NotesPHP Workshop Notes
PHP Workshop Notes
 
Web technology html5 php_mysql
Web technology html5 php_mysqlWeb technology html5 php_mysql
Web technology html5 php_mysql
 
Semantic Modelling using Semantic Web Technology
Semantic Modelling using Semantic Web TechnologySemantic Modelling using Semantic Web Technology
Semantic Modelling using Semantic Web Technology
 
JavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGIJavaScript, VBScript, AJAX, CGI
JavaScript, VBScript, AJAX, CGI
 
Web technology
Web technologyWeb technology
Web technology
 
uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
History of Web Technology
History of Web TechnologyHistory of Web Technology
History of Web Technology
 
Web Generartion
Web GenerartionWeb Generartion
Web Generartion
 
Web Technology and Standards Tutorial
Web Technology and Standards Tutorial Web Technology and Standards Tutorial
Web Technology and Standards Tutorial
 
Basics of c++
Basics of c++Basics of c++
Basics of c++
 
ASP, ASP.NET, JSP, COM/DCOM
ASP, ASP.NET, JSP, COM/DCOMASP, ASP.NET, JSP, COM/DCOM
ASP, ASP.NET, JSP, COM/DCOM
 
SEO in Web Technology
SEO in Web TechnologySEO in Web Technology
SEO in Web Technology
 
Introduction To Web Technology
Introduction To Web TechnologyIntroduction To Web Technology
Introduction To Web Technology
 
Basic concept of computer network
Basic concept of computer networkBasic concept of computer network
Basic concept of computer network
 
Computer system and network configuration
Computer system and network configurationComputer system and network configuration
Computer system and network configuration
 
Web technology
Web technologyWeb technology
Web technology
 

Semelhante a uptu web technology unit 2 Css (20)

Css2
Css2Css2
Css2
 
Css2
Css2Css2
Css2
 
css-ppt.pdf
css-ppt.pdfcss-ppt.pdf
css-ppt.pdf
 
Web Typography
Web TypographyWeb Typography
Web Typography
 
Css
CssCss
Css
 
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.pptwaxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
waxaada canshuurahaiyosiyaaddaguudeexamarwaaardaydaDAALBADAN.ppt
 
css1.ppt
css1.pptcss1.ppt
css1.ppt
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
cascadingstylesheets
cascadingstylesheetscascadingstylesheets
cascadingstylesheets
 
CSS
CSSCSS
CSS
 
CSS Cascade Style Sheet
CSS Cascade Style SheetCSS Cascade Style Sheet
CSS Cascade Style Sheet
 
html-css
html-csshtml-css
html-css
 
Web technology
Web technologyWeb technology
Web technology
 
Css
CssCss
Css
 
6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt6_CasCadingStylesSheetsCSS.ppt
6_CasCadingStylesSheetsCSS.ppt
 
CSS
CSSCSS
CSS
 
Web Engineering - Introduction to CSS
Web Engineering - Introduction to CSSWeb Engineering - Introduction to CSS
Web Engineering - Introduction to CSS
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css
CssCss
Css
 

Mais de Abhishek Kesharwani (20)

uptu web technology unit 2 html
uptu web technology unit 2 htmluptu web technology unit 2 html
uptu web technology unit 2 html
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2uptu web technology unit 2 Xml2
uptu web technology unit 2 Xml2
 
Unit 1 web technology uptu slide
Unit 1 web technology uptu slideUnit 1 web technology uptu slide
Unit 1 web technology uptu slide
 
Unit1 Web Technology UPTU UNIT 1
Unit1 Web Technology UPTU UNIT 1 Unit1 Web Technology UPTU UNIT 1
Unit1 Web Technology UPTU UNIT 1
 
Unit1 2
Unit1 2 Unit1 2
Unit1 2
 
Mtech syllabus computer science uptu
Mtech syllabus computer science uptu Mtech syllabus computer science uptu
Mtech syllabus computer science uptu
 
Wi max tutorial
Wi max tutorialWi max tutorial
Wi max tutorial
 
Virtual lan
Virtual lanVirtual lan
Virtual lan
 
Virtual lan
Virtual lanVirtual lan
Virtual lan
 
Tcp traffic control and red ecn
Tcp traffic control and red ecnTcp traffic control and red ecn
Tcp traffic control and red ecn
 
Schedulling
SchedullingSchedulling
Schedulling
 
Scheduling
SchedulingScheduling
Scheduling
 
Rsa example
Rsa exampleRsa example
Rsa example
 
Routers and planes (1)
Routers and planes (1)Routers and planes (1)
Routers and planes (1)
 
Routers and planes
Routers and planesRouters and planes
Routers and planes
 
Rip ospf and bgp
Rip ospf and bgpRip ospf and bgp
Rip ospf and bgp
 
Qo s rsvp......
Qo s rsvp......Qo s rsvp......
Qo s rsvp......
 

Último

Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICESayali Powar
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationMJDuyan
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and stepobaje godwin sunday
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxEduSkills OECD
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRATanmoy Mishra
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxDr. Santhosh Kumar. N
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17Celine George
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.raviapr7
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice documentXsasf Sfdfasd
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17Celine George
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesMohammad Hassany
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptxmary850239
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptxraviapr7
 

Último (20)

Quality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICEQuality Assurance_GOOD LABORATORY PRACTICE
Quality Assurance_GOOD LABORATORY PRACTICE
 
Benefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive EducationBenefits & Challenges of Inclusive Education
Benefits & Challenges of Inclusive Education
 
General views of Histopathology and step
General views of Histopathology and stepGeneral views of Histopathology and step
General views of Histopathology and step
 
Prelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quizPrelims of Kant get Marx 2.0: a general politics quiz
Prelims of Kant get Marx 2.0: a general politics quiz
 
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptxPISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
PISA-VET launch_El Iza Mohamedou_19 March 2024.pptx
 
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRADUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
DUST OF SNOW_BY ROBERT FROST_EDITED BY_ TANMOY MISHRA
 
M-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptxM-2- General Reactions of amino acids.pptx
M-2- General Reactions of amino acids.pptx
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17How to Add Existing Field in One2Many Tree View in Odoo 17
How to Add Existing Field in One2Many Tree View in Odoo 17
 
Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.Drug Information Services- DIC and Sources.
Drug Information Services- DIC and Sources.
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
The Singapore Teaching Practice document
The Singapore Teaching Practice documentThe Singapore Teaching Practice document
The Singapore Teaching Practice document
 
How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17How to Add a many2many Relational Field in Odoo 17
How to Add a many2many Relational Field in Odoo 17
 
Finals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quizFinals of Kant get Marx 2.0 : a general politics quiz
Finals of Kant get Marx 2.0 : a general politics quiz
 
Human-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming ClassesHuman-AI Co-Creation of Worked Examples for Programming Classes
Human-AI Co-Creation of Worked Examples for Programming Classes
 
3.21.24 The Origins of Black Power.pptx
3.21.24  The Origins of Black Power.pptx3.21.24  The Origins of Black Power.pptx
3.21.24 The Origins of Black Power.pptx
 
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptxClinical Pharmacy  Introduction to Clinical Pharmacy, Concept of clinical pptx
Clinical Pharmacy Introduction to Clinical Pharmacy, Concept of clinical pptx
 

uptu web technology unit 2 Css

  • 1. Web Technology (NCS-504) Prepared By Mr. Abhishek Kesharwani Assistant Professor,UCER Naini,Allahabad
  • 3. Colors and backgrounds • The background-color property describes the background color of elements. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
  • 4. Colors and backgrounds The CSS property background-image is used to insert a background image. body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
  • 5. Repeat background image background-repeat: repeat-x The image is repeated horizontally background-repeat: repeat-y The image is repeated vertically background-repeat: repeat The image is repeated both horizontally and vertically background-repeat: no-repeat The image is not repeated
  • 6. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
  • 7. background-attachment • The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. • A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page. • Background-attachment: scroll The image scrolls with the page - unlocked • Background-attachment: fixed The image is locked
  • 8. background-attachment body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
  • 9. background-position • By default, a background image will be positioned in the top left corner of the screen. The property background-position allows you to change this default and position the background image anywhere you like on the screen. • There are numerous ways to set the values of background-position. • For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window. • The coordinates can be indicated as percentages of the browser window, fixed units (pixels, centimetres, etc.) or you can use the words top, bottom, center, left and right.
  • 11. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
  • 13. Font family • The property font-family is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found. An example h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}
  • 14. Font style Font weight • The property font-style defines the chosen font either in normal, italic or oblique. h2 {font-family: "Times New Roman", serif; font- style: italic;} • The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font. td {font-family: arial, verdana, sans-serif; font- weight: bold;}
  • 15. Font size • The size of a font is set by the property font-size. • There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
  • 16. Font • Using the font short hand property it is possible to cover all the different font properties in one single property. p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Using the short hand property, the code can be simplified: p { font: italic bold 30px arial, sans-serif; }
  • 17. Text CSS gives you to add layout to text. The following properties will be described: text-align text-decoration letter-spacing text-transform
  • 18. Text alignment • The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred. In addition to this, the value justify will stretch each line so that both the right and left margins are straight. th { text-align: right; } td { text-align: center; } p { text-align: justify; }
  • 19. Text decoration • The property text-decoration makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
  • 20. Letter space • The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }
  • 21. Text transformation • The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. • There are four possible values for text-transform: capitalize • Capitalizes the first letter of each word. For example: "john doe" will be "John Doe". uppercase • Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE". lowercase • Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe". none • No transformations - the text is presented as it appears in the HTML code.
  • 22. Links • A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links. • Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link.
  • 23. Links a {text-decoration:none;} a:link {color: blue;text-decoration:none;} a:visited {color: purple;text-decoration:none;} a:active {background-color: yellow;text- decoration:none;} a:hover { color:red; text-decoration:none;}
  • 24. Identification of element using id • In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id. • What is special about the attribute id is that there can not be two elements in the same document with the same id. Each id has to be unique. <h2 id="c1-1">Chapter 1.1</h2> <h2 id="c1-2">Chapter 1.2</h2> #c1-2 { color: red; }
  • 25. Identification of element using class • Sometimes you want to apply a special style to a particular element or a particular group of elements. • Let's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this: <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs.htm">Cabernet Sauvignon</a></li> <li><a href="me.htm">Merlot</a></li> <li><a href="pn.htm">Pinot Noir</a></li> </ul>
  • 26. <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm" class="whitewine">Riesling</a></li> <li><a href="ch.htm" class="whitewine">Chardonnay</a></li> <li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p> <ul> <li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li> <li><a href="me.htm" class="redwine">Merlot</a></li> <li><a href="pn.htm" class="redwine">Pinot Noir</a></li> </ul>
  • 28. Grouping with <div> • <div> is used to group one or more block-level elements. <div id="democrats"> <ul> <li>Franklin D. Roosevelt</li> <li>Harry S. Truman</li> <li>John F. Kennedy</li> <li>Lyndon B. Johnson</li> <li>Jimmy Carter</li> <li>Bill Clinton</li> </ul> </div> <div id="republicans"> <ul> <li>Dwight D. Eisenhower</li> <li>Richard Nixon</li> <li>Gerald Ford</li> <li>Ronald Reagan</li> <li>George Bush</li> <li>George W. Bush</li> </ul> </div>
  • 30. Margin and Padding • An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document). body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } body { margin: 100px 40px 10px 70px; }
  • 32. Padding • Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. h1 { background: yellow; padding: 20px 20px 20px 80px; }
  • 34. Border-width • The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels.
  • 35. border-color, border-style • The property border-color defines which color the border has.
  • 36. h1 { border-width: thick; border-style: dotted; border-color: gold; } h2 { border-width: 20px; border-style: outset; border-color: red; } p { border-width: 1px; border-style: dashed; border-color: blue; }
  • 37. Floating elements • An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document.
  • 39. <div id="picture"> <img src="bill.jpg" alt="Bill Gates"> </div> <p>causas naturales et antecedentes, idciro etiam nostrarum voluntatum...</p> #picture { float:left; width: 100px; }
  • 40. Positioning of elements • With CSS positioning, you can place an element exactly where you want it on your page.
  • 41. #d1 { left: 350px; bottom: 150px; } #d2 { left: 150px; bottom: 500px; } #d3 { left: 50px; bottom: 700px; }