This is Part 1 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.
This is Part 1 of a two-lecture series on implementing HTML. I created this lecture in an effort to keep my design students from "fearing the code" they encounter in an introductory level course to Dreamweaver and Web Site design.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
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.
Welcome to WIPAC Monthly the magazine brought to you by the LinkedIn Group Water Industry Process Automation & Control.
In this month's edition, along with this month's industry news to celebrate the 13 years since the group was created we have articles including
A case study of the used of Advanced Process Control at the Wastewater Treatment works at Lleida in Spain
A look back on an article on smart wastewater networks in order to see how the industry has measured up in the interim around the adoption of Digital Transformation in the Water Industry.
Industrial Training at Shahjalal Fertilizer Company Limited (SFCL)MdTanvirMahtab2
This presentation is about the working procedure of Shahjalal Fertilizer Company Limited (SFCL). A Govt. owned Company of Bangladesh Chemical Industries Corporation under Ministry of Industries.
Forklift Classes Overview by Intella PartsIntella Parts
Discover the different forklift classes and their specific applications. Learn how to choose the right forklift for your needs to ensure safety, efficiency, and compliance in your operations.
For more technical information, visit our website https://intellaparts.com
Event Management System Vb Net Project Report.pdfKamal Acharya
In present era, the scopes of information technology growing with a very fast .We do not see any are untouched from this industry. The scope of information technology has become wider includes: Business and industry. Household Business, Communication, Education, Entertainment, Science, Medicine, Engineering, Distance Learning, Weather Forecasting. Carrier Searching and so on.
My project named “Event Management System” is software that store and maintained all events coordinated in college. It also helpful to print related reports. My project will help to record the events coordinated by faculties with their Name, Event subject, date & details in an efficient & effective ways.
In my system we have to make a system by which a user can record all events coordinated by a particular faculty. In our proposed system some more featured are added which differs it from the existing system such as security.
Democratizing Fuzzing at Scale by Abhishek Aryaabh.arya
Presented at NUS: Fuzzing and Software Security Summer School 2024
This keynote talks about the democratization of fuzzing at scale, highlighting the collaboration between open source communities, academia, and industry to advance the field of fuzzing. It delves into the history of fuzzing, the development of scalable fuzzing platforms, and the empowerment of community-driven research. The talk will further discuss recent advancements leveraging AI/ML and offer insights into the future evolution of the fuzzing landscape.
COLLEGE BUS MANAGEMENT SYSTEM PROJECT REPORT.pdfKamal Acharya
The College Bus Management system is completely developed by Visual Basic .NET Version. The application is connect with most secured database language MS SQL Server. The application is develop by using best combination of front-end and back-end languages. The application is totally design like flat user interface. This flat user interface is more attractive user interface in 2017. The application is gives more important to the system functionality. The application is to manage the student’s details, driver’s details, bus details, bus route details, bus fees details and more. The application has only one unit for admin. The admin can manage the entire application. The admin can login into the application by using username and password of the admin. The application is develop for big and small colleges. It is more user friendly for non-computer person. Even they can easily learn how to manage the application within hours. The application is more secure by the admin. The system will give an effective output for the VB.Net and SQL Server given as input to the system. The compiled java program given as input to the system, after scanning the program will generate different reports. The application generates the report for users. The admin can view and download the report of the data. The application deliver the excel format reports. Because, excel formatted reports is very easy to understand the income and expense of the college bus. This application is mainly develop for windows operating system users. In 2017, 73% of people enterprises are using windows operating system. So the application will easily install for all the windows operating system users. The application-developed size is very low. The application consumes very low space in disk. Therefore, the user can allocate very minimum local disk space for this application.
Final project report on grocery store management system..pdfKamal Acharya
In today’s fast-changing business environment, it’s extremely important to be able to respond to client needs in the most effective and timely manner. If your customers wish to see your business online and have instant access to your products or services.
Online Grocery Store is an e-commerce website, which retails various grocery products. This project allows viewing various products available enables registered users to purchase desired products instantly using Paytm, UPI payment processor (Instant Pay) and also can place order by using Cash on Delivery (Pay Later) option. This project provides an easy access to Administrators and Managers to view orders placed using Pay Later and Instant Pay options.
In order to develop an e-commerce website, a number of Technologies must be studied and understood. These include multi-tiered architecture, server and client-side scripting techniques, implementation technologies, programming language (such as PHP, HTML, CSS, JavaScript) and MySQL relational databases. This is a project with the objective to develop a basic website where a consumer is provided with a shopping cart website and also to know about the technologies used to develop such a website.
This document will discuss each of the underlying technologies to create and implement an e- commerce website.
CFD Simulation of By-pass Flow in a HRSG module by R&R Consult.pptxR&R Consult
CFD analysis is incredibly effective at solving mysteries and improving the performance of complex systems!
Here's a great example: At a large natural gas-fired power plant, where they use waste heat to generate steam and energy, they were puzzled that their boiler wasn't producing as much steam as expected.
R&R and Tetra Engineering Group Inc. were asked to solve the issue with reduced steam production.
An inspection had shown that a significant amount of hot flue gas was bypassing the boiler tubes, where the heat was supposed to be transferred.
R&R Consult conducted a CFD analysis, which revealed that 6.3% of the flue gas was bypassing the boiler tubes without transferring heat. The analysis also showed that the flue gas was instead being directed along the sides of the boiler and between the modules that were supposed to capture the heat. This was the cause of the reduced performance.
Based on our results, Tetra Engineering installed covering plates to reduce the bypass flow. This improved the boiler's performance and increased electricity production.
It is always satisfying when we can help solve complex challenges like this. Do your systems also need a check-up or optimization? Give us a call!
Work done in cooperation with James Malloy and David Moelling from Tetra Engineering.
More examples of our work https://www.r-r-consult.dk/en/cases-en/
Cosmetic shop management system project report.pdfKamal Acharya
Buying new cosmetic products is difficult. It can even be scary for those who have sensitive skin and are prone to skin trouble. The information needed to alleviate this problem is on the back of each product, but it's thought to interpret those ingredient lists unless you have a background in chemistry.
Instead of buying and hoping for the best, we can use data science to help us predict which products may be good fits for us. It includes various function programs to do the above mentioned tasks.
Data file handling has been effectively used in the program.
The automated cosmetic shop management system should deal with the automation of general workflow and administration process of the shop. The main processes of the system focus on customer's request where the system is able to search the most appropriate products and deliver it to the customers. It should help the employees to quickly identify the list of cosmetic product that have reached the minimum quantity and also keep a track of expired date for each cosmetic product. It should help the employees to find the rack number in which the product is placed.It is also Faster and more efficient way.
Saudi Arabia stands as a titan in the global energy landscape, renowned for its abundant oil and gas resources. It's the largest exporter of petroleum and holds some of the world's most significant reserves. Let's delve into the top 10 oil and gas projects shaping Saudi Arabia's energy future in 2024.
Explore the innovative world of trenchless pipe repair with our comprehensive guide, "The Benefits and Techniques of Trenchless Pipe Repair." This document delves into the modern methods of repairing underground pipes without the need for extensive excavation, highlighting the numerous advantages and the latest techniques used in the industry.
Learn about the cost savings, reduced environmental impact, and minimal disruption associated with trenchless technology. Discover detailed explanations of popular techniques such as pipe bursting, cured-in-place pipe (CIPP) lining, and directional drilling. Understand how these methods can be applied to various types of infrastructure, from residential plumbing to large-scale municipal systems.
Ideal for homeowners, contractors, engineers, and anyone interested in modern plumbing solutions, this guide provides valuable insights into why trenchless pipe repair is becoming the preferred choice for pipe rehabilitation. Stay informed about the latest advancements and best practices in the field.
2. 1.0 Introduction to Cascading Style
Sheets
• What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a
problem
• CSS can save a lot of work
• External Style Sheets are stored in CSS files
3. • CSS Solved a Big Problem
• HTML was never intended to contain tags for formatting a document.
• HTML was intended to define the content of a document, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of
large web sites, where fonts and color information were added to every
single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created
CSS.
• In HTML 4.0, all formatting could be removed from the HTML document,
and stored in a separate CSS file.
• All browsers support CSS today.
• The key property of style sheet technology is that it can be used to
separate the presentation of information from the information content
and semantic tagging.
• Style sheets gives all the elements on a page a consistent appearance
4. 2.0 CSS Core Syntax
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a
value.
CSS Comments
Comments are used to explain your code, and may help you when you edit
the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with "/*", and ends with "*/", like this:
5. CSS Example
• A CSS declaration always ends with a
semicolon, and declaration groups are
surrounded by curly braces:
• p {color:red;text-align:center;}
• To make the CSS code more readable, you can
put one declaration on each line.
• In the following example all <p> elements will
be center-aligned, with a red text color:
8. 3.0 Cascading Style Sheet Features
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
9. External Style Sheet
• An external style sheet is ideal when the style is applied to
many pages.
• With an external style sheet, you can change the look of an
entire Web site by changing one file.
• Each page must link to the style sheet using the <link> tag.
• The <link> tag goes inside the head section:
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css“
title=“style1”/>
</head>
• An external style sheet can be written in any text editor.
• The file should not contain any html tags.
• Your style sheet should be saved with a .css extension.
10. • An example of a style sheet file is shown
below:
• hr {color:sienna;}
p {margin-left:20px;}
body {background-
image:url("images/back40.gif");}
• Do not add a space between the property
value and the unit (such as margin-left: 20 px).
The correct way is: margin-left:20px
11. Internal Style Sheet
• Internal Style Sheet
An internal style sheet should be used when a single document has a
unique style.
You define internal styles in the head section of an HTML page, by using the
<style> tag, like this:
<head>
<style>
h1 {color:blue;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
12. Inline Styles
An inline style may be used to apply a unique style
for a single element.
• An inline style loses many of the advantages of
style sheets by mixing content with presentation.
Use this method sparingly!
• To use inline styles you use the style attribute in
the relevant tag.
• The style attribute can contain any CSS property.
• The example shows how to change the color and
the left margin of a paragraph:
• <p style="color:blue;margin-left:20px">This is a
paragraph.</p>
13. Multiple Style Sheets
• If some properties have been defined for the same selector in different style sheets, the
value will be inherited from the more specific style sheet.
• For example, assume that an external style sheet has the following properties for the <h1>
element:
• h1 {
color: navy;
margin-left: 20px;
}
• then, assume that an internal style sheet also has the following property for the <h1>
element:
• h1 {
color: orange;
}
• If the page with the internal style sheet also links to the external style sheet the properties
for the <h1> element will be:
• color: orange;
margin-left: 20px;
• The left margin is inherited from the external style sheet and the color is replaced by the
internal style sheet.
•
14. Cascading order
• Browser default
• External and internal style sheets (in the head section)
• Inline style (inside an HTML element)
• So, an inline style (inside an HTML element) has the
highest priority, which means that it will override a
style defined inside the <head> tag, or in an external
style sheet, or in a browser (a default value).
• If the link to the external style sheet is placed below
the internal style sheet in HTML <head>, the external
style sheet will override the internal style sheet!
15. External style sheet types
Style sheets can be associated with documents using a list of link
elements in the head.
There are three different relationships external style sheets can have
with the document: persistent, preferred, and alternate.
Persistent
• These style sheets are always enabled (they are always “on”) and
are combined with the active style sheet.
• They can be used for shared rules common to every style sheet.
• To make a style sheet persistent, the rel attribute is set to
“stylesheet” and no title attribute is set.
• To make the style sheet paul.css persistent, the following link
element would be included in the head:
• <link rel="stylesheet" type="text/css" href="paul.css" />
16. Preferred
• These style sheets are enabled by default (they are “on” when the page is
loaded).
• They can then be disabled if the user selects an alternate style sheet.
• To make a style sheet preferred, the rel attribute is set to “stylesheet” and
the style sheet is named with the title attribute.
• Several preferred style sheets can be grouped together by giving them
identical title attributes.
• These grouped style sheets are then all enabled and disabled together.
• If more than one group of preferred style sheets are declared, the first
group takes precedence.
• To make paul.css preferred, a title attribute is added, giving the default
style a name.
• <link rel="stylesheet" type="text/css" href="paul.css" title="bog standard"
/>
17. Alternate(user selection)
• These style sheets can be selected by the visitor as alternatives to the
preferred style sheet.
• This allows the visitor to personalize a site and choose his or her favorite
scheme. They can also be used for accessibility.
• To specify an alternate style sheet, the rel attribute is set to “alternate
stylesheet” and the style sheet is named with a title attribute.
• As with preferred sheets, these style sheets can also be grouped together
by giving them identical title attributes.
• Using the previous example again; to make paul.css into an alternate style
sheet, the keyword “alternate” is added to the rel attribute.
• <link rel="alternate stylesheet" type="text/css" href="paul.css"
title="wacky" />
• Note that these relationships only apply to external style sheets which are
included using the link element.
18. External Style Sheet-Media Attribute
<link rel=“stylesheet” type=“text/css”
href=“style1.css” media=“screen,tv,projection”/>
Possible values for media attribute
Value Media type
All All types
Aural Speech synthesizer
Braille Device generating braille characters
Handheld Handheld device such as cellphone or PDA
Print Printer
Projection Projector
Screen Computer monitor
Tv television
19. 4.0 Selector Strings
• Type Selector
• Universal Selector
• ID Selector
• Class Selector
– Pseudo classes
• Descendant Selector
21. Universal Selector
• The * selector selects all elements.
• The * selector can also select all elements inside another element
<html>
<head>
<style>
*
{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<p>My best friend is Mickey.</p>
</body>
</html>
23. ID Selector
• The id Selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a "#".
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
24. Class Selector
• The class selector is used to specify a style for a group of elements. Unlike the id selector, the class
selector is most often used on several elements.
• This allows you to set a particular style for many HTML elements with the same class.
• The class selector uses the HTML class attribute, and is defined with a ".“
• <html>
• <head>
• <style>
• .center
• {
• text-align:center;
• }
• </style>
• </head>
• <body>
• <h1 class="center">Center-aligned heading</h1>
• <p class="center">Center-aligned paragraph.</p>
• </body>
• </html>
25. Pseudo classes
• CSS pseudo-classes are used to add special
effects to some selectors.
• Syntax
• The syntax of pseudo-classes:
• selector:pseudo-class {property:value;}
• CSS classes can also be used with pseudo-
classes:
• selector.class:pseudo-class {property:value;}
26. <html>
<head>
<style>
a:link {color:red;} /* unvisited link */
a:visited {color:blue;} /* visited link */
a:hover {color:green;} /* mouse over link */
a:active {color:yellow;} /* selected link */
</style>
</head>
<body> <p><b><a href="default.asp" target="_blank">This is a
link</a></b></p> <p><b>Note:</b>
a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS
definition in order to be effective.</p>
</body>
</html>
27. Descendant Selector
A selector may be specialised so that it holds
only within the content of certain element
types.
Ul span {font-variant:small-caps}
The above statement says that the text within
a span element that is in turn part of the
content of an unordered or bulleted list
should be displayed in small-cap font form.
28. Descendant Selector
Class selector can also be included in the
ancestor list.
.special span
Would apply to any span element within the
content of any element belonging to the class
special.
Ul ol li {letter-spacing:1cm}
Applies only to an li element within ol element
that is within a ul element.
29. At-Rules
The @import at-rule is a mechanism for
importing one style sheet into another. It
should be followed by a URI value and a
semicolon, but it’s possible to use a string
value instead of the URI value.
@import url(“ a.css”);
The @import rules in a style sheet must precede
all rule sets
30. 5.0 Style Inheritance
*while cascading is based on the structure of style
sheets,inheritance is based on the tree structure
of the document itself
*An element inherits a value for one of its
properties by checking to see if its parent
element in the document has a value for that
property and if so,inheriting the parents value.
*The parent may in turn inherits a property value
from its parent and so on.
31. Few points about inheritance
• The height property of an element is not inherited from it
parent
• The value contained in a style declaration for a property is
known as the specified value for the property.This property
can be either relative or absolute.An absolute value is a
value that can be understood without the need for any
context such as the value 2cm.A relative value on the other
hand cannot be understood without knowing some
context.for example the property declaration font-
size:larger uses the relative value larger to set the size of
the font of an element.
• CSS2 recommendantion allows every style property to be
given the value inherit,whether or not the property is
inherited normally.
32. 6.0 Text Properties
1)Text Color
• The color property is used to set the color of
the text.
• With CSS, a color is most often specified by:
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• a color name - like "red"
33. Text Color-Example
<html>
<head>
<style>
body {color:red;}
h1 {color:#00ff00;}
.ex {color:rgb(0,0,255);}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is red. The default text-color for
a page is defined in the body selector.</p>
<p class="ex">This is a paragraph with class="ex". This text is blue.</p>
</body>
</html>
34. Text Color contd…
Colors in CSS can be specified by the following methods:
Hexadecimal colors
RGB colors
Hexadecimal Colors
• Hexadecimal color values are supported in all major browsers.
• A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of the color. All values must be between 0 and FF.
• For example, the #0000ff value is rendered as blue, because the blue component is set to its
highest value (ff) and the others are set to 0.
RGB Colors
• RGB color values are supported in all major browsers.
• An RGB color value is specified with: rgb(red, green, blue). Each parameter (red, green, and blue)
defines the intensity of the color and can be an integer between 0 and 255 or a percentage value
(from 0% to 100%).
• For example, the rgb(0,0,255) value is rendered as blue, because the blue parameter is set to its
highest value (255) and the others are set to 0.
• Also, the following values define the same color: rgb(0,0,255) and rgb(0%,0%,100%).
35. Formats for specifying numeric color
values
Format Example
Functional,integer
arguments
Rgb(255,170,0)
Functional,percentage
arguments
Rgb(100%,66.7%,0%)
Hexadecimal #ffaa00
Abbreviated hexadecimal #fa0
Divide
170/255
36. Color names and RGB Values
Color Name RGB Value
Black #000000
Gray #808080
Silver #c0c0c0
White #ffffff
Red #ff0000
Lime #00ff00
Blue #0000ff
Yellow #fffff00
Maroon #800000
Green #008000
Acqua #00ffff
37. 2.Text Formatting
Primary CSS text properties
property
Text-decoration
Letter-spacing
Word -spacing
Text-transform
Text-indent
Text-align
White-space
38. Text-decoration
The text-decoration property specifies the
decoration added to text.
• Property Values
• none -Defines a normal text.
• Underline- Defines a line below the text
• overline -Defines a line above the text
• line-through - Defines a line through the text
• Blink - Defines a blinking text
39. Text decoration-example
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<p><b>Note:</b> The "blink" value is not supported in IE, Chrome, or Safari.</p>
</body>
</html>
40. Letter-spacing
• The letter-spacing property increases or
decreases the space between characters in a
text.
• Property Values
• Normal - No extra space between characters.
This is default
• length -Defines an extra space between
characters (negative values indicate space to
be removed)
41. Word-spacing
The word-spacing property increases or
decreases the white space between words.
• Property Values
• normal -Defines normal space between
words .
• length - Defines an extra space between
words in px, pt, cm, em, etc.
• Negative values indicate space to be removed
42. Text-transform
The text-transform property controls the
capitalization of text.
Property Values
• none - No capitalization. The text renders as it is.
This is default
• Capitalize- Transforms the first character of each
word to uppercase
• uppercase -Transforms all characters to
uppercase
• lowercase -Transforms all characters to
lowercase
43. Text-indent
The text-indent property specifies the
indentation of the first line in a text-block.
• Property Values
• length Defines a fixed indentation in px, pt,
cm, em, for box width etc.
• % Defines the indentation in % of the width of
the parent element
44. Text indent-Example
<html>
<head>
<style>
p {text-indent:50px;}
</style>
</head>
<body>
<p>In my younger and more vulnerable years my father gave me some advice
that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this
world haven't had the advantages that you've had.'</p>
</body>
</html>
45. Text-align
The text-align property specifies the horizontal
alignment of text in an element.
• Property Values
left- Aligns the text to the left
right -Aligns the text to the right
center- Centers the text
justify - Stretches the lines so that each line
has equal width (like in newspapers and
magazines)
46. White-space
The white-space property specifies how white-space inside an
element is handled.
• Property Values
• normal - Sequences of whitespace will collapse into a single
whitespace. Text will wrap when necessary. This is default
• Nowrap - Sequences of whitespace will collapse into a
single whitespace. Text will never wrap to the next line.
The text continues on the same line until a <br /> tag is
encountered
• pre - Whitespace is preserved by the browser. Text will
only wrap on line breaks Acts like the <pre> tag in HTML
47. Text Properties
• Css defines a direction property which specifies the
direction in which the text is written.
• Ltr indicate left to right language and rtl indicates right
to left.
Font Families
A font family is a collection of related fonts,and a font is a
mapping from a character to a visual representation of
the character(glyph).Each glyph is drawn relative to a
rectangular character cell.
The font family to be used for displaying text within an
HTML element is specified using the font-family style
property.
48. 3.CSS generic font families
Font family Description
Serif A serif is a short decorative line at the end
of the stroke of a letter
Sans-serif Usually proportionately spaced
Cursive Looks more like cursive handwriting and
printing
Fantasy Glyphs are still recognizable but are non
traditional
Monospace All glyphs have the same width.
49. 4.Length specification in CSS
• In css the size of the font is specified using the
font-size property.
• Some example declaration include
Font-size:0.25in
Font-size:12pt
Font-size:15px
Css length identifiers
Identi
fier
meaning
In Inch
Cm centimeter
Mm Millimeter
Pt Point:1/72 inch
Pc Pica:12 points
Px Pixel;1/96 inch
Em Em:reference font size
Ex Ex:roughly the height of
lowercase “x” character in the
reference font
50. Length specification in CSS
• Mozilla 1.4 and IE 6 maintain the relationship
1in = 2.54 cm = 25.4mm=72pt=6pc=96px both
on screen and when printing document
• Absolute units do not depend on other style
property values.(e.g) in,cm,mm
• Relative units depend on the medium
displaying the document.(e.g) px
51. Some features and quantities defined
by a font
Baseline height is the distance from the bottom
of a character cell to an imaginary line known
as the baseline.
M x
Cell height Ex height
Baseline
height
baseline
53. 5.Line Boxes
• Each line box contains one line of text. The height
of a line box is precisely the height of a character
cell .
• The height of the box will be number of line
boxes multiplied by the height of character cell.
• The browsers default setting of the height of line
boxes can be overridden by specifying a value for
the line height property
• Line-height:1.5em
Line height:150%
Line-height:1.5
54. Line boxes
T h I s I s
G
Half-Leading
Text Cell Height
Half-Leading
Line-height
55. 7.0 Some other useful style properties
1.Lists
The list-style-type specifies the type of list-item marker in a list.
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>
<body>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
56. Style Properties 2.tables
Table Borders
• To specify table borders in CSS, use the border property.
• The example below specifies a black border for table, th, and td elements:
• Example
• table, th, td
{
border: 1px solid black;
}
Collapse Borders
• The border-collapse property sets whether the table borders are collapsed into a single border or separated:
• Example
• table
{
border-collapse:collapse;
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
• Width and height of a table is defined by the width and height properties.
• The example below sets the width of the table to 100%, and the height of the th elements to 50px:
• Example
• table
{
width:100%;
}
th
{
height:50px;
}
57. Style Properties 2.tables
Table Text Alignment
• The text in a table is aligned with the text-align and vertical-align properties.
• The text-align property sets the horizontal alignment, like left, right, or center:
• Example
• td
{
text-align:right;
}
• The vertical-align property sets the vertical alignment, like top, bottom, or middle:
• Example
• td
{
height:50px;
vertical-align:bottom;
}
Table Padding
• To control the space between the border and content in a table, use the padding property on td and th elements:
• Example
• td
{
padding:15px;
}
Table Color
• The example below specifies the color of the borders, and the text and background color of th elements:
• Example
• table, td, th
{
border:1px solid green;
}
th
{
background-color:green;
color:white;
}
58. Style Properties
3.Cursor Styles
The cursor property specifies the type of cursor to be displayed when pointing on an element.
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
59. 8.0 CSS BOX MODEL
Padding-top
Padding-
right
Padding-
bottom
Padding
-left
Content
Height
Content width
Border-bottom-width
Border-top-width
Margin-top
Margin-bottom
Border
-left-
width
Margin
-left
Border-
right-
width
Margin
-right
Box width
B
o
x
h
e
i
g
h
t
60. CSS box model-basic concepts and
properties
<html>
<head>
<style>
div.ex
{
width:320px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">The picture above is 250px wide.
The total width of this element is also 250px.</div>
</body>
</html>
61. Box model shorthand properties
Property
1.padding-{top,right,bottom,left}
2.border-{top,right,bottom,left}-width
3.border-{top,right,bottom,left}-color
4.border-{top,right,bottom,left}-style
5. border-{top,right,bottom,left}
6.margin- {top,right,bottom,left}
Number of values Meaning
One Assign this value to all four asscoiated
properties{top,right,bottom,left}
Two Assign first value to associated top and bottom properties ,
second value to associated right and left position
Three Assign first value to associated top property, second value to
right and left , and third value to bottom
Four Assign first value to associated top property,second to
right,third to bottom and fourth to left
62. Box model shorthand properties-
example
Padding:30px is equivalent to four declaration
Padding-top:30px;
Padding-right:30px;
Padding-bottom:30px;
Padding-left:30px;
Margin:15px 45px 30px is equivalent to
Margin-top:15px
Margin-right:45px
Margin-left:45px
Margin-bottom:30px