SDC Material-Docs 25 CSS

CoreNuts Technologies Specific
Chapter – 9: Introducing CSS

Cascading Style Sheets allows you to create rules that specify how the content of an
element should appear. For example, you can specify that the background of the page is
cream, all paragraphs should appear in gray using the Arial typeface, or that all level one
headings should be in a blue, italic, Times typeface.
Once you have learned how to write a CSS rule, learning CSS mostly involves learning the
different properties you can use.
The key to understanding how CSS works is to imagine that there is an invisible box around
every HTML element.
 CSS allows you to create rules that control the way that each individual box (and the
contents of that box) is presented.
In above example, block level elements are shown with solid borders, and inline elements
have dashed borders.
The <body> element creates the first box then the <h2>, <p>, <i>, <b>, <em> elements each
create their own boxes with in it.
Using CSS, you could add a border around any of the boxes, specify its width and height, or
add a background color. You could also control text inside a box — for example, its color,
size, and the font-face used.
Sample Styles:-
 Boxes: Width and height Borders (color, width, and style) Background color and
images Position in the browser window.
 Text: Typeface Size Color Italics, bold, uppercase, lowercase, small-caps.
 Specific: There are also specific ways in which you can style certain elements such as
lists, tables, and forms.
47
CSS Associates Style rules with HTML elements
CSS works by associating rules with HTML elements. These rules govern how the content of
specified elements should be displayed. A CSS rule contains two parts: a selector and a declaration.
o This rule indicates that all <p> elements text size will be increased to 20 pixels.
o Selectors indicate which element the rule applies to. The same rule can apply to
more than one element if you separate the element names with commas.
o Declarations indicate how the elements referred to in the selector should be styled.
Declarations are split into two parts (a property and a value), and are separated by a
colon.
CSS Properties Affect How Elements Are Displayed

CSS declarations sit inside curly brackets and each is made up of two parts: a property and a
value, separated by a colon. You can specify several properties in one declaration, each separated by
a semi-colon.
o This rule indicates that all <div>, <p> and <span> elements are shown with a solid
black color border with 1 pixel strong.
o Properties indicate the aspects of the element you want to change. For example,
color, font, width, height and border.
o Values specify the settings you want to use for the chosen properties. For example,
if you want to specify a color property then the value is the color you want the text
in these elements to be.
 CSS comes in three types: In a separate file (external), At the top of a web page document
(internal), Right next to the text it decorates (inline).
48
External CSS
The <link> element can be used in an HTML document to tell the browser where to find the
CSS file used to style the page. It is an empty element (meaning it does not need a closing
tag), and it lives inside the <head> element. It should use three attributes:
o href, This attribute specifies the path to the CSS file (which is often placed in a
folder called css or styles).
o type, This attribute specifies the type of document being linked to. The value should
be text/css.
o rel, This specifies the relationship between the HTML page and the file it is linked to.
The value should be stylesheet when linking to a CSS file.
Note:- An HTML page can use more than one CSS style sheet. To do this it could have a
<link> element for every CSS file it uses. For example, some authors use one CSS file to
control the presentation (such as fonts and colors) and a second to control the layout.
Example 45:-
one.css
div{
width:40%;
}
h1 {
font-family: 'Times New Roman';
font-size: 36px;
background: #ffffff;
color: red;
text-transform: uppercase;
}
h2{
font-family: arial,verdana,sans-serif;
font-size: 20px;
color: black;
}
p{
font-size: 16px;
color: blue;
font-style: italic;
text-align: justify;
}
external-example.html
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Kalyan">
<title>An Example Web Page Using External Stylesheet</title>
<link rel="stylesheet" type="text/css" href="styles/one.css">
</head>
<body>
<div>
49
<h1>CoreNuts Services</h1>
<h2>Products</h2>
<p>An Institutional management software developed by CoreNuts
Technolgies to address the current day to day activities of
Schools, Colleges and Institutions which are done manually.</p>
<h2>Out Sourcing</h2>
<p>CoreNuts with their strategic business partner/s offers
outsourcing solutions to address the entire client’s IT
manpower requirements. Technical Manpower Outsourcing.</p>
<h2>Trainings</h2>
<p>To provide graduates adequate Niche technology skills,
business and managerial competencies so that they are prepared
to perform and excel in a global work environment.</p>
</div>
</body>
</html>
Note: In the above example the external css file one.css has been created in the subfolder “styles”.
Why use External Style Sheets?

When building a website there are several advantages to placing your CSS rules in a separate
style sheet.
 All of your web pages can share the same style sheet. This is achieved by using the
<link> element on each HTML page of your site to link to the same CSS document.
This means that the same code does not need to be repeated in every page (which
results in less code and smaller HTML pages).
 Therefore, once the user has downloaded the CSS stylesheet, the rest of the site will
load faster. If you want to make a change to how your site appears, you only need to
edit the one CSS file and all of your pages will be updated. For example, you can
50
change the style of every <h1> element by altering the one CSS style sheet, rather
than changing the CSS rules on every page.
 The HTML code will be easier to read and edit because it does not have lots of CSS
rules in the same document. It is generally considered good practice to have the
content of the site separated from the rules that determine how it appears.
Sometimes you might consider placing CSS rules in the same page as your HTML code.
 If you are just creating a single page, you might decide to put the rules in the same
file to keep everything in one place. (However, many developers would consider it
better practice to keep the CSS in a separate file.)
 If you have one page which requires a few extra rules (that are not used by the rest
of the site), you might consider using CSS in the same page. (Again, most authors
consider it better practice to keep all CSS rules in a separate file.)
 Most of the examples in this book place the CSS rules in the <head> of the document
(using the <style> element) rather than a separate document. This is simply to save
you opening two files to see how the CSS examples work.
When building a website with more than one page, you should use an external CSS style
sheet. This:
o Allows all pages to use the same style rules (rather than repeating them in each
page)
o Keeps the content separate from how the page looks.
o Means you can change the styles used across all pages by altering just one file
(rather than each individual page).
Internal CSS
You can also include CSS rules within an HTML page by placing them inside a <style>
element, which usually sits inside the <head> element of the page. And cannot be referenced by any
other Web page or document.
The <style> element optionally use the type attribute to indicate that the styles are
specified in CSS. The value should be text / css. Internal rules are best suitable for single page
websites ( where hyperlinks refers to the same page content ).
Advantages of Internal Style Sheets
o Internal style sheets affect only the page they are on.
If you are working on a large site and need to test styles before you load them on the site as
a whole, internal style sheets can be a great tool. They allow you to test the styles in the
context of the entire site without breaking any page but the one you are testing.
51
o Internal style sheets can use classes and IDs.
Unlike inline styles, internal style sheets can still take advantage of classes, IDs, siblings, and
other element relationships.
o Internal style sheets don't require that you upload multiple files.
This is especially useful when you're working with things like email or kiosks where you have
only one HTML file available to edit. I often use inline styles when I am not sure what the
URL would be of a style sheet loaded into a CMS - keeping the styles with the document
means I know what styles affect that document.
Disadvantages of Internal Style Sheets
o They affect only the page they are on.

If you want to use the same styles in several documents, you need to repeat them for every
page (or link to an external style sheet).
o Internal style sheets increase page load times.

Every page that has an internal style sheet must load and parse the style sheet
information every time the page is loaded. External style sheets are cached by browsers -
which improves load times for every page after the first is loaded.
Example – 46:-
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Kalyan">
<title>An Example Web Page Using External Stylesheet</title>
<style type=”text/css”>
div{
width:40%;
}
h1 {
font-family: 'Times New Roman';
font-size: 36px;
color: red;
}
h2{
font-size: 20px;
color: black;
}
p{
font-size: 16px;
color: blue;
font-style: italic;
}
</style>
</head>
52
<body>
<div>
<h1>CoreNuts Services</h1>
<h2>Products</h2>
Technolgies to address the current day to day activities of
<h2>Out Sourcing</h2>
outsourcing solutions to address the entire client’s IT
manpower requirements. Technical Manpower Outsourcing.</p>
<h2>Trainings</h2>
</div>
</body>
</html>
Inline Styles:-
Inline styles are CSS styles that are applied to one element, directly in the page's
HTML, using the style attribute. There are both advantages and disadvantages to this
approach. First, let's look at exactly how these styles are written:
o We write our style property to be in one line. Separate multiple properties with
a semi-colon.
”background:#ccc; color:#fff; border: solid black
1px”;
o Place that line of styles inside the style attribute of the element you want styled.
<p style=”background:#ccc; color:#fff; border: solid
black 1px”;> CoreNuts Technologies </p>
In this example, this particular paragraph would appear with a light grey
background (that is what #ccc would render), black text (from the #000
color), and with a 1-pixel solid black border around all four sides of the
paragraph.
Advantages of Inline Styles :-
 Inline styles have the highest precedence or specificity in a document.

 This means they are going to be applied no matter what else is dictated in your external
stylesheet (with the one exception being any styles that are given the “!important”
declaration to that sheet).
 Inline styles are easy and quick to add and you do not need to worry about writing the
proper CSS selector since you are adding the styles directly to the element you want to
change.
Disadvantages of Inline Styles
 Inline styles are the most specific in the cascade, they can over-ride things you didn't intend
them to. They also negate one of the most powerful aspects of CSS - the ability to style lots
53
and lots of webpages from one central CSS file to make future updates and style changes
much easier to manage.
 Inline styles must be applied to every element you want them on. So if you want all your
paragraphs to have the font-family “Arial” you have to add an inline style to each <p> tag in
your document. This adds both maintenance work for the designer and download time for
the reader since you would need to change this across every page in your site to change that
font-family.
 Another drawback to inline styles is that it's impossible to style pseudo-elements and -
classes with them. For example, with external style sheets, you can style
the visited, hover, active, and link color of an anchor tag, but with an inline style all you can
style is the link itself, because that's what the style attribute is attached to.
CSS Selectors
There are many different types of CSS selector that allow you to target rules to specific
elements in an HTML document.
CSS selectors are case sensitive, so they must match element names and attribute values
exactly. In this example <h1> has attribute id and none of the elements has that id “main-heading”,
so the id attribute value must be unique over other elements. The rest of <h2> and <p> has class
attributes as same value, so class attributes value can be same for similar elements.
Example 47:-
.wrap{ /* selects the first div */
margin: 0 auto;
width: 80%;
}
#main-heading{ /* selects first <h1> element */
color: #f00;
}
.sub-heading{ /* selects all <h2> elements */
color: #00f;
}
p.content{ /* selects all <p> elements whose class name is content*/
}
p > a{ /*selects hyperlink inside of first <p> tag*/
text-decoration: none;
}
p + a{ /*selects last hyperlink which is after <p> tag */
}
<div class=”wrap”>
<h1 id=”main-heading”>CoreNuts Services</h1>
<h1>Imagination Into Reality</h1>
<h2 class=”sub-heading”>Products</h2>
<p class=”content”>An Institutional management software
developed by <a href=”corenuts.com”>CoreNuts Technolgies</a> to
address the current day to day activities of Schools, Colleges
and Institutions which are done manually.</p>
<h2 class=”sub-heading”>Out Sourcing</h2>
<p class=”content”>CoreNuts with their strategic business
partner/s offers outsourcing solutions to address the entire
54
client’s IT manpower requirements. Technical Manpower
Outsourcing.</p>
<h2 class=”sub-heading”>Trainings</h2>
<a href=”corenuts.com”>Visit us</a>
</div>
Selector Meaning Example

Universal Selector Applies to all elements in * { }
the document Targets all elements on the page
Type Selector Matches element names h1, h2, h3 { }
Targets the <h1>, <h2>, <h3>
elements.
Class Selector Matches an element .content { }
whose class attribute has Targets any element whose class
a value that matches the attribute has a value of note.
one specified after the p.content { }
period (or full stop) Targets only <p> elements whose class
symbol attribute has a value of note.
ID Selector Matches an element #main-heading {}

whose id attribute has a Targets the element whose id attribute -
value that- matches the has a value of main-heading.
one specified after the
pound or hash symbol
Child Selector Matches an element that li>a { }
is a direct child of Targets any <a> elements that are
another children of an <li> element (but not
other <a> elements in the page).
Descendant Matches an element that pa{}
Selector is a descendent of Targets any <a> elements that are sits
another specified inside of <p> element, even if there are
element (not just a direct other elements nested between them.
child of that element)
Adjacent Sibling Matches an element that h1+p { }
Selector is the next sibling of Targets the first <p> element after any
another <h1> element (but not other <p>
elements).
General Sibling Matches an element that h1~p { }
Selector is a sibling of another, If you had two <p> elements that are
although it does not have siblings of an <h1> element, this rule
to be the directly would apply to both.
preceding element
How Css Rules Cascade:-

If there are two or more rules that apply to the same element, it is important to understand which
will take precedence.
LAST RULE:- If the two selectors are identical, the latter of the two will take precedence. Here you
can see the second ‘i’ selector takes precedence over the first.
55
SPECIFICITY:- If one selector is more specific than the others, the more specific rule will take
precedence over more general ones. In this example:
h1 is more specific than *, p b is more specific than p, p#intro is more specific than p.
IMPORTANT:- You can add !important after any property value to indicate that it should be
considered more important than other rules that apply to the same element.
Example 48:-
<html>
<head>
<style>
* {
font-family: Arial, Verdana, sans-serif;
}
h1 {
font-family: "Courier New", monospace;
}
i {
color: green;
}
i {
color: red;
}
b {
color: pink;
}
p b {
color: blue !important;
}
p b {
color: violet;
}
p#intro {
font-size: 100%;
}
p {
font-size: 75%;
}
</style>
</head>
<body>
<h1>For Employers/Corporates</h1>
<p id="intro">CoreNuts Technologies prepares <b>hundred's of
Fresh graduates</b> by following our <i>Graduate Hire Program</i>.</p>
<p>CoreNutians got selected into various IT companies across
India since from our inception. </p>
</body>
</html>
56
Inheritance:-
If you specify the font-family or color properties on the <body> element, they will apply to
most child elements. This is because the value of the font-family property is inherited by child
elements. It saves you from having to apply these properties to as many elements (and results in
simpler style sheets).
You can compare this with the background-color or border properties; they are not
inherited by child elements. If these were inherited by all child elements then the page could look
quite messy.
You can force a lot of properties to inherit values from their parent elements by using
inherit for the value of the properties. In this example, the <div> element with a class called page
inherits the padding size from the CSS rule that applies to the <body> element.
Example 49:-
<html>
<head>
<style>
body {
color: #665544;
padding: 10px;
}
.page {
border: 1px solid #665544;
background-color: #efefef;
padding: inherit;
}
</style>
</head>
<body>
<div class="page">
<h1>Recruitment Outsourcing</h1>
<p> Enabling key personnel to get on with growing the business.
</p>
<p>Reduce the total fixed and variable costs associated with
recruiting. Scale recruiting capacity up or down on-demand.</p>
</div>
<br/>
<h5>© Copyrights. CoreNuts Technologies</h5>
</body>
</html>
57
Chapter – 10: CSS Color

Color can really bring your pages to life. Now we will look at:
● How to specify colors, as there are three common ways in which you can indicate your
choice of colors (plus extra ways made available in CSS3).
● Color terminology, as there are some terms that are very helpful to understand when it
comes to picking colors.
● Contrast, and ensuring that your text is readable.
● Background colors for behind either your entire page or parts of a page.
CSS “color” property (foreground color):-
The color property allows you to specify the color of text inside an element. You can specify any
color in CSS in one of three ways:
o rgb values These express colors in terms of how much red, green and blue are
used to make it up. For example: rgb(100, 100, 90)
o hex codes These are six-digit codes that represent the amount of red, green and
blue in a color, preceded by a pound or hash # sign. For example: #35ac19
o color names There are 147 predefined color names that are recognized by
browsers. For example: yellow, whitesmoke etc.,
Example - 50:-
/* color name -- (these are CSS comments)*/
h1 {
color: DarkCyan;
}
/* hex code */
h2 {
color: #ee3e80;
}
/* rgb value */
p {
color: rgb(100,100,90);
}
CSS “background-color” property:-
CSS treats each HTML element as if it appears in a box, and the background-color property sets the
color of the background for that box.
By default, most browser windows have a white background, but browser users can set a
background color for their windows, so if you want to be sure that the background is white you can
use the background-color property on the <body> element.
58
Example – 51:-
body {
background-color: rgb(200,200,200);
}
div {
background-color: DarkCyan;
}
h2 {
background-color: #ee3e80;
}
p {
background-color: white;
}
span {
background-color: whitesmoke;
}
CSS3 “opacity”, “rgba” property:-
CSS3 introduces the opacity property which allows you to specify the opacity of an element
and any of its child elements. The value is a number between 0.0 and 1.0 (so a value of 0.5 is 50%
opacity and 0.15 is 15% opacity).
The CSS3 rgba property allows you to specify a color, just like you would with an RGB value,
but adds a fourth value to indicate opacity. This value is known as an alpha value and is a number
between 0.0 and 1.0 (so a value of 0.5 is 50% opacity and 0.15 is 15% opacity). The rgba value will
only affect the element on which it is applied (not child elements).
Example – 52:-
p.one {
background-color: rgb(0,0,0); opacity: 0.5;
}
p.two {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.5);
}
59
Chapter – 11: CSS TEXT

The properties that allow you to control the appearance of text can be split into two groups:
● Those that directly affect the font and its appearance (including the typeface or font-
family, whether it is regular, bold or italic, and the size of the text).
● Those that would have the same effect on text no matter what font you were using
(including the color of text and the spacing between words and letters).
 CSS “font-family” property:-
The font-family property allows you to specify the typeface that should be used for any text
inside the element(s) to which a CSS rule applies.
The value of this property is the name of the typeface you want to use. The people who are
visiting your site need the typeface you have specified installed on their computer in order for it to
be displayed.
You can specify a list of fonts separated by commas so that, if the user does not have your
first choice of typeface installed, the browser can try to use an alternative font from the list.
It is also common to end with a generic font name for that type of font, if a font name is
made up of more than one word, it should be put in double quotes.
Example – 53:-
<!DOCTYPE html>
<html>
<head>
<title>Font Family</title>
<style type="text/css">
body {
font-family: Georgia, Times, serif;
}
h1, h2 {
}
.ceo {
font-family: "Courier New", Courier, monospace;
}
p{
font-family: "Monotype Corsiva";
}
</style>
</head>
<body>
<h1>Imagination into Reality</h1>
<p class="ceo">-- Nagesh</p>
<p>Our belief - "Imagination Creates Reality" and
Imagination shapes our minds to determine our reality.</p>
<p>Quality, Commitment & Impact are the three core
parameters which define our "Services" to Customers.</p>
<div> CoreNuts will help it's customers wish by converting
their Imagination into Reality through our sustained delivery
model with complete commitment. </div>
60
</body>
</html>
 CSS “font-size” property:-

The font-size property enables you to specify a size for the font. There are several ways to specify
the size of a font. The most common are:
o Pixels are commonly used because they allow web designers very precise control over how
much space their text takes up. The number of pixels is followed by the letters px.
o Percentages, The default size of text in browsers is 16px. So a size of 75% would be the
equivalent of 12px, and 200% would be 32px.
o EM unit, An em is equivalent to the width of a letter m. 75% is equal to 0.75em
Example – 54:-
<!DOCTYPE html>
<html>
<head>
<title>Font size</title>
body {
font-family: "Algerian";
font-size:2em;
}
h1, h2 {
font-size: 100%;
}
p {
font-size: 14px;
}
</style>
</head>
<body>
<p class="ceo">-- Nagesh</p>
<p>Our belief - "Imagination Creates Reality" and Imagination shapes
our minds to determine our reality.</p>
<p>Quality, Commitment & Impact are the three core parameters which
define our "Services" to Customers.</p>
<div> CoreNuts will help it's customers wish by converting their
Imagination into Reality through our sustained delivery model with
complete commitment. </div>
</body>
</html>
61
 CSS “@font-face” rule:-

@font-face allows you to use a font, even if it is not installed on the computer of the person
browsing, by allowing you to specify a path to a copy of the font, which will be downloaded if it
is not on the user's machine.
Example – 55:-
<!DOCTYPE html>
<html>
<head>
<title>Font face Rule</title>
@font-face{
font-family: 'cavier';
src: url(fonts/Caviar_Dreams_Bold.ttf);
}
@font-face{
font-family: 'aargh';
src: url(fonts/Aaargh-webfont.woff);
}
body {
font-family: "Algerian";
font-size:1.1em;
}
h1, h2 {
font-size: 100%;
font-family: aargh;
}
p {
font-size: 14px;
}
.diff-text{
font-family: cavier;
62
}
#ceo{
font-family: "Monotype Corsiva";
font-size:1.5em;
}
</style>
</head>
<body>
<div class="diff-text"> Imagination into Reality. </div>
<p id="ceo">-- Nagesh</p>
<p>Imagination into Reality.</p>
<p>Imagination into Reality</p>
</body>
</html>
From the above example every element has different typefaces and here I’m introducing some
new fonts like ‘cavier’ and ‘aargh’ as they are new custom fonts imported from
www.1001freefonts.com website, the @font-face rule should have two mandate properties:-
o font-family, this is used to name the custom font that which author is going to import
from downloaded source.
o src, this property should use the CSS url() function to import the custom fonts with .ttf
and .woff also .eot, .svg extension files. The url() function holds the absolute or relative
path of font files. In last example I have downloaded custom font files in a subfolder
“fonts”.
63
 CSS “font-weight” property:-
The font-weight property allows you to create bold text. There are two values that this property
commonly takes:
o normal, This causes text to appear at a normal weight.
o bold, This causes text to appear bold.
Example – 56:-
<!DOCTYPE html>
<html>
<head>
<title>Font weight</title>
.one{
font-weight: bold;
}
</style>
</head>
<body>
<p class="one">Imagination into Reality.</p>
</body>
</html>
 CSS “font-style” property:-

If you want to create italic text, you can use the font-style property. There are three values this
property can take:
o normal This causes text to appear in a normal style (as opposed to italic or oblique).
o italic This causes text to appear italic
o oblique This causes text to appear oblique.
Example – 57:-
<!DOCTYPE html>
<html>
<head>
<title>Font style</title>
.one{
font-style: italic;
}
.two{
font-style: oblique;
}
p{
font-style: normal;
}
64
</style>
</head>
<body>
<p class="two">Imagination into Reality</p>
</body>
</html>
 CSS “text-transform” property:-

The text-decoration property allows you to specify the following values:
o uppercase, This causes the text to appear uppercase.
o lowercase, This causes the text to appear lowercase.
o capitalize, This causes the first letter of each word to appear capitalized.
Example – 58:-
<!DOCTYPE html>
<html>
<head>
<title>Font Transform</title>
.one{
}
.two{
text-transform: lowercase;
}
p{
text-transform: capitalize;
}
</style>
</head>
<body>
<p class="two">IMAGINATION INTO REALITY.</p>
<p>imagination into reality</p>
</body>
</html>
65
 CSS “text-decoration” property:-
The text-decoration property allows you to specify the following values:
o none, This removes any decoration already applied to the text.
o underline,This adds a line underneath the text.
o overline, This adds a line over the top of the text.
o line-through, This adds a line through words.
o blink, This animates the text to make it flash on and off (does not supported by major
browsers).
Example – 59:-
<!DOCTYPE html>
<html>
<head>
<title>Font Decoration</title>
#one a{
text-decoration: none;
}
#two{
text-decoration: underline;
}
#three{
text-decoration: overline;
}
#four{
text-decoration: line-through;
}
</style>
</head>
<body>
<p id="one"><a href="www.corenuts.com">Imagination into
Reality.</a></p>
<p id="two">Imagination into Reality.</p>
<p id="three">Imagination into Reality.</p>
<p id="four">Imagination into Reality.</p>
</body>
</html>
 CSS “line-height” property:-

In CSS, the line-height property sets the height of an entire line of text, so the difference
between the fontsize and the line-height is equivalent to the leading (as shown in the diagram
above). Increasing the line-height makes the vertical gap between lines of text larger.
66
Example – 60:-
<!DOCTYPE html>
<html>
<head>
<title>Line Height</title>
#one{
line-height: 30px;
}
</style>
</head>
<body>
<p id="one">This is a paragraph with line height. IL&FS Skills mission
is to train 40 lakh people by 2022 in Manufacturing, Agriculture,
Services, Engineering and Construction sectors.</p>
<p>This is a paragraph without line height. IL&FS Skills mission is to
train 40 lakh people by 2022 in Manufacturing, Agriculture, Services,
Engineering and Construction sectors.</p>
</body>
</html>
The value of the line-height property is best given in em unit, for example: font-weight: 1.6em
 CSS “letter-spacing , word-spacing” properties:-
You can control the space between each letter with the letter-spacing property. You can also
control the gap between words using the word-spacing property. When you specify a value for
these properties, it should be given in em, and it will be added on top of the default value
specified by the font.
Example – 61:-
<!DOCTYPE html>
<html>
<head>
<title>Letter & Word Spacing</title>
#one{
letter-spacing: 0.5em;
}
#two{
word-spacing: 2em;
}
</style>
</head>
<body>
<p id="one">This is a paragraph with letter-spacing. IL&FS Skills
mission is to train 40 lakh people by 2022 in Manufacturing,
Agriculture, Services, Engineering and Construction sectors.</p>
67
<p id="two">This is a paragraph with word-spacing. IL&FS Skills mission
is to train 40 lakh people by 2022 in Manufacturing, Agriculture,
Services, Engineering and Construction sectors.</p>
<p>This is a normal paragraph. IL&FS Skills mission is to train 40 lakh
people by 2022 in Manufacturing, Agriculture, Services, Engineering and
Construction sectors.</p>
</body>
</html>
 CSS “text-align” property:-

The text-align property allows you to control the alignment of text. The property can take one of
four values:
o left, This indicates that the text should be left-aligned.
o right, This indicates that the text should be right-aligned.
o center, This allows you to center text.
o justify, This indicates that every line in a paragraph, except the last line, should be set to
take up the full width of the containing box.
By default every paragraph is left-aligned.
Example – 62:-
#one{
text-align: right;
}
#two{
text-align: center;
}
#three{
}
</style>
<p id="one">IL&FS Skills mission is to train 40 lakh people by 2022
in Manufacturing, Agriculture, Services, Engineering and Construction
sectors.</p>
<p id="two">IL&FS Skills mission is to train 40 lakh people by 2022
in Manufacturing, Agriculture, Services, Engineering and Construction
sectors.</p>
<p id="three">IL&FS Skills mission is to train 40 lakh people by
2022 in Manufacturing, Agriculture, Services, Engineering and
Construction sectors.</p>
68
 CSS “vertical-align” property:-

The vertical-align property is a common source of confusion. It is not intended to allow you
to vertically align text in the middle of block level elements such as <p> and <div>, although it
does have this effect when used with table cells ( the <td> and <th> elements ).
It is more commonly used with inline elements such as <img>, <em> or <strong> elements.
When used with these elements, it performs a task very similar to the HTML align attribute used
on the <img> element.
The values it can take are: baseline, sub, super, top, text-top, middle, bottom, text-bottom.
It can also take a length (usually specified in pixels or em) or a percentage of the line height.
Example – 63:-
img{
border: 2px solid #c5c3c3;
}
#one{
vertical-align: text-top;
}
#two{
vetical-align: baseline;
}
#three{
vertical-align: middle;
}
#four{
vertical-align: super;
}
</style>
<p><img id="one" src="images/ilfs-cnt-favicon.png">IL&FS Skills &
CoreNuts Technologies</p>
<p><img id="two" src="images/ilfs-cnt-favicon.png">IL&FS Skills &
<p><img id="three" src="images/ilfs-cnt-favicon.png">IL&FS Skills &
<p><img id="four" src="images/ilfs-cnt-favicon.png">IL&FS Skills &
69
 CSS “text-indent” property:-

The text-indent property allows you to indent the first line of text within an element. The
amount you want the line indented by can be specified in a number of ways but is usually given
in pixels or ems.
It can take a negative value, which means it can be used to push text off the browser window.
Example – 64:-
#one{
text-indent: -4em;
}
#two{
text-indent: 5em;
}
</style>
<p id="one">IL&FS Skills & CoreNuts Technologies has been a front
runner in providing skills and livelihood training to people from
different social groups.</p>
<p id="two">IL&FS Skills & CoreNuts Technologies has been a front
runner in providing skills and livelihood training to people from
different social groups.</p>
70
 CSS “text-shadow” property:-
The text-shadow property has become commonly used despite lacking support in all browsers.
It is used to create a drop shadow, which is a dark version of the word just behind it and
slightly offset. It can also be used to create an embossed effect by adding a shadow that is
slightly lighter than the text.
The value of this property is quite complicated because it can take three lengths and a color
(total 4 parameters) for the drop shadow:
o The first length indicates how far to the left or right the shadow should fall.
o The second value indicates the distance to the top or bottom that the shadow
should fall.
o The third value is optional and specifies the amount of blur that should be applied to
the drop shadow
o The fourth value is the color of the drop shadow.
Example – 65:-
p{
padding: 10px;
font-size: 1.6em;
}
#one{
background-color: #eeeeee;
color: #666666;
text-shadow: 3px -2px 2px #88888e;
}
#two {
background-color: #cccccc;
color: #ffffff;
text-shadow: 2px 2px 7px #111111;
}
#three {
background-color: #bbbbbb;
color: #cccccc;
text-shadow: -1px -2px #666666;
}
#four {
background-color: #aaaaaa;
color: #ffffff;
text-shadow: -1px -1px #666666;
}
</style>
<p id="one">Imagination in Reality</p>
<p id="two">Imagination in Reality</p>
<p id="three">Imagination in Reality</p>
<p id="four">Imagination in Reality</p>
71
 CSS “:first-letter, :first-line” property:-

You can specify different values for the first letter or first line of text inside an element using
:first-letter and :first-line. Technically these are not properties. They are known as pseudo-
elements.
We can specify the pseudo-element at the end of the selector, and then specify the
declarations as you would normally for any other element
Example – 66:-
#one:first-letter{
font-size:200%;
font-style:bold;
}
#two:first-line {
font-size:150%;
font-style:italic;
}
</style>
<p id="one">our programmes have yielded impact through improvement
in income and standard of living, not only for the individuals but
their families and communities.</p>
<p id="two">Our programmes have yielded impact through improvement
in income and standard of living, not only for the individuals but
their families and communities.</p>
72
 Styling HyperLinks:-
Browsers usually show links in blue with an underline by default, and they will change the
color of links that have been visited to help users know which pages they have been to.
In CSS, there are two pseudo classes that allow you to set different styles for links that have
and have not yet been visited.
o :link , This allows you to set styles for links that have not yet been visited.
o :visited , This allows you to set styles for links that have been clicked on.
They are commonly used to control colors of the links and also whether they are to appear
underlined or not.
There are three pseudo-classes that allow you to change the appearance of elements when a
user is interacting with them.
o :hover , This is applied when a user hovers over an element with a pointing device such
as a mouse. This has commonly been used to change the appearance of links and
buttons when a user places their cursor over them. Such events do not work on devices
that use touch screens (such as the iPad) because the screen is not able to tell when
someone is hovering their finger over an element.
o :active , This is applied when an element is being activated by a user; for example, when
a button is being pressed or a link being clicked. Sometimes this is used to make a
button or link feel more like it is being pressed by changing the style or position of the
element slightly.
o :focus , This is applied when an element has focus. Any element that you can interact
with, such as a link you can click on or any form control can have focus.
It is also possible to use the tab key on your keyboard to move through the interactive items
on a page. When pseudo-classes are used, they should appear in this order: :link, :visited,
:hover, :focus, :active.
Example – 67:-
a:link {
color: deeppink;
}
a:visited {
color: black;
}
a:hover {
color: deeppink;
text-decoration: underline;
}
a:active {
color: darkcyan;
}
</style>
73
<ul>
<li><a href="http://www.aims.corenuts.com/">CNTS.</a></li>
<li><a href="http://www.ilfsskills.com/">IL&FS.</a></li>
</ul>
CSS Attribute Selectors
Selector Meaning Example

Existence [] a[target]
Matches a specific attribute Targets any <a> element with an
(whatever its value) attribute called target.
Equality [=] p[class="info"]
Matches a specific attribute Targets any <p> element with an
with a specific value attribute called class whose value is
info.
Prefix [^=] p[attr^"n"]
whose value begins with a attribute whose value begins with the
specific string letter "n".
Space [~=] p[class~="footer"]
whose value appears in a space attribute called class whose value is a
separated list of words list of space-separated words, one of
which is footer.
Substring [*=] p[attr*"inf"]
whose value contains a specific attribute whose value contains the
substring letters "inf".
Suffix [$=] p[attr$"g"]
whose value ends with a attribute whose value ends with the
specific string letter "g".
Chapter – 12: CSS BOXES

At the beginning of this CSS section, you saw how CSS treats each HTML element as if it lives in its
own box. You can set several properties that affect the appearance of these boxes like:
● Control the dimensions of your boxes
● Create borders around boxes
74
● Set margins and padding for boxes
● Show and hide boxes
 CSS “width and height” properties ( Dimensions of box ):-
By default a box is sized just big enough to hold its contents. To set your own dimensions for
a box you can use the height and width properties.
The most popular ways to specify the size of a box are to use pixels, percentages, or em.
Traditionally, pixels have been the most popular method because they allow designers to
accurately control their size.
When you use percentages, the size of the box is relative to the size of the browser window
or, if the box is encased within another box, it is a percentage of the size of the containing box.
When you use em, the size of the box is based on the size of text within it. Designers have
recently started to use percentages and em more for measurements as they try to create
designs that are flexible across devices which have different-sized screens.
Example – 68:-
<style>
div{
height: 500px;
width: 500px;
background-color: #bbbbaa;
}
p {
height: 70%;
width: 70%;
background-color: #0088dd;
color:#fff;
}
</style>
<div><p>Our Software provides the facility to carry out the day to

day activities of your Institution in an easy, efficient and more
accurate manner . Our software is simple yet <i>powerful with an
integrated platform that connects all the departments</i> of your
institute.</p></div>
75
 CSS “min-width, max-width” properties:-
 These properties are limiting the width of a box.
 The min-width property specifies the smallest size a box can be displayed at when the
browser window is narrow.
 The max-width property indicates the maximum width a box can stretch to when the
browser window is wide.
 These are very helpful properties to ensure that the content of pages are legible
(especially on the smaller screens of handheld devices). For example, you can use the
max-width property to ensure that lines of text do not appear too wide within a big
browser window and you can use the min-width property to make sure that they do
not appear too narrow.
Example – 69:-
<style>
.price{
min-width:250px;
text-align:center;
}
.text{
max-width: 200px;
}
.pic{
max-width:50px;
}
.pic img{
max-width: 100%;
}
</style>
<table border="2">
<tr>
<td class="pic"><img src="images/products.jpg"/></td>
<td class="text">An Institutional management software developed by
CoreNuts Technolgies to address the current day to day activities of
Schools, Colleges and Institutions which are done manually.</td>
<td class="price">र 100000</td>
</tr>
<tr>
<td class="pic"><img src="images/out.jpg"/></td>
<td class="text">CoreNuts with their strategic business partner/s
offers outsourcing solutions to address the entire client’s IT
manpower requirements.</td>
</tr>
<tr>
<td class="pic"><img src="images/train.jpg"/></td>
<td class="text">To provide graduates adequate Niche technology
skills, business and managerial competencies so that they are
prepared to perform and excel in a global work environment.</td>
</tr>
</table>
76
 CSS “min-height, max-height” properties:-

In the same way that limiting width of a box on a page, you may also want to limit the height
of it. This is achieved using the min-height and max-height properties.
If the box is not big enough to hold the content, and the content expands outside the box it
can look very messy. To control what happens when there is not enough space for the content of a
box, you can use the overflow property in the next topic.
Example – 70:-
<style>
h2, p {
width: 400px;
font-size: 90%;
line-height: 1.4em;
}
h2 {
color: #0088dd;
border-bottom: 1px solid #0088dd;
}
p {
min-height: 10px;
max-height: 30px;
}
</style>
<h2>Products</h2>
Technolgies to address the current day to day activities of Schools,
Colleges and Institutions which are done manually.</p>
<h2>Training</h2>
<p>To provide graduates adequate Niche technology skills, business
and managerial competencies so that they are prepared to perform and
excel in a global work environment.</p>
<h2>Outsourcing</h2>
outsourcing solutions to address the entire client’s IT manpower
requirements.</p>
77
The example on above shows you what happens when the content of the box takes up more
space than the size specified for the box.
 CSS “overflow” property:-
The overflow property tells the browser what to do if the content contained within a box is
larger than the box itself. It can have one of two values:
o hidden , This property simply hides any extra content that does not fit in the box.
o scroll , This property adds a scrollbar to the box so that users can scroll to see the
missing content.
The overflow property is particularly handy because some browsers allow users to adjust
the size of the text to appear as large or as small as they want. If the text is set too large
then the page can become an unreadable mess. Hiding the overflow on such boxes helps
prevent items overlapping on the page.
Example – 71:-
<style>
p{
width: 300px;
font-size: 90%;
line-height: 1.4em;
min-height: 10px;
}
.one {
overflow: hidden;
max-height: 50px;
}
.two{
overflow: scroll;
max-height: 100px;
}
</style>
<h2>Products</h2>
<p class="one">An Institutional management software developed by
CoreNuts Technolgies to address the current day to day activities of
<h2>Training</h2>
<p class="two">To provide graduates adequate Niche technology skills,
business and managerial competencies so that they are prepared to
perform and excel in a global work environment. </p>
78
 Border, Margin & Padding

Every box has three available properties that can be adjusted to control its appearance:
o Border: Every box has a border (even if it is not visible or is specified to be 0 pixels wide).
The border separates the edge of one box from another.
o Margin: Margins sit outside the edge of the border. You can set the width of a margin to
create a gap between the borders of two adjacent boxes.
o Padding: Padding is the space between the border of a box and any content or text
contained within it. Adding padding can increase the readability of its contents.
If you specify a width for a box, then the borders, margin, and padding are added to its width
and height.
 White space & Vertical Margin
79
The padding and margin properties are very helpful in adding space between various items on
the page.
Example – 72:-
<style>
.withOutPadding_Margin {
border: 2px solid orange;
width:50%;
}
.withPadding_Margin {
border: 2px solid orange;
width:50%;
padding:15px;
margin-bottom:15px;
}
</style>
 CSS “border-width”
The border-width property is used to control the width of a border. The value of this property
can either be given in pixels or using one of the following values:
o thin
o medium
o thick
You can control the individual size of borders using four separate properties:
o border-top-width
o border-right-width
o border-bottom-width
o border-left-width
You can also specify different widths for the four border values in one property, like below:
Ex:- border-width: 2px 3px 2px 4px
The values here appear in clockwise order: top, right, bottom, left.
Example – 73:-
80
<style>
p{
border: 1px solid purple;
width: 50%;
}
p.one {
border-width: 2px;
}
p.two {
border-width: thick;
}
p.three {
border-width: 2px 5px 10px 4px;
}
p.four {
border-left-width: 15px;
}
</style>
<p class="one">Imagination into Reality</p>
<p class="two">Imagination into Reality</p>
<p class="three">Imagination into Reality</p>
<p class="four">Imagination into Reality</p>
 CSS “border-style”
You can control the style of a border using the border-style property. This property can take the
following values:
o solid , a single solid line
o dotted , a series of square dots
o dashed , a series of short lines
o double , two solid lines
o groove , appears to be carved into the page
o ridge , appears to stick out from the page
o inset , appears embedded into the page
o outset , looks like it is coming out of the screen
o hidden / none , no border is shown
You can individually change the styles of different borders using:
o border-top-style
o border-left-style
o border-right-style
o border-bottom-style
Example – 74:-
81
<style>
p{
border: 5px solid;
width: 40%;
text-align:center;
}
p.one {border-style: solid;}
p.two {border-style: dotted;}
p.three {border-style: dashed;}
p.four {border-style: double;}
p.five {border-style: groove;}
p.six {border-style: ridge;}
p.seven {border-style: inset;}
p.eight {border-style: outset;}
</style>
<div>
<p>IL&FS - CoreNuts Technologies</p>
<p class="one">IL&FS - CoreNuts Technologies</p>
<p class="two">IL&FS - CoreNuts Technologies</p>
<p class="three">IL&FS - CoreNuts Technologies</p>
<p class="four">IL&FS - CoreNuts Technologies</p>
<p class="five">IL&FS - CoreNuts Technologies</p>
<p class="six">IL&FS - CoreNuts Technologies</p>
<p class="seven">IL&FS - CoreNuts Technologies</p>
<p class="eight">IL&FS - CoreNuts Technologies</p>
</div>
 CSS “border-color”
You can specify the color of a border using either RGB values, hex codes or CSS color names
It is possible to individually control the colors of the borders on different sides of a box using:
o border-top-color
o border-right-color
o border-bottom-color
o border-left-color
It is also possible to use a shorthand to control all four border colors in the one property:
Ex:- border-color: darkcyan deeppink yellow skyblue;
The values here appear in clockwise order: top, right, bottom, left.
82
Example – 75:-
p.one {
border-color: #0088dd;
}
p.two {
border-color: #bbbbaa #111111 #ee3e80 #0088dd;
}
p.three{
border-top-color: deeppink;
}
 CSS “border” property

The border property allows you to specify the width, style and color of a border in one property
(and the values should be coded in that specific order).
div {
width: 250px;
border: 3px dotted #0088dd;
}
So far we have used the border property many times in the above topics. Please
refer to those examples.
 CSS “padding”
 The padding property allows you to specify how much space should appear between the
content of an element and its border.
 The value of this property is most often specified in pixels (although it is also possible to
use percentages or ems). If a percentage is used, the padding is a percentage of the
browser window (or of the containing box if it is inside another box).
Note:- If a width is specified for a box, padding is added onto the width of the box
 As you can see in the example below, the second paragraph here is much easier to read
because there is a space between the text and the border of the box. The box is also
wider because it has padding and the first paragraph has no padding since both of the
paragraphs have same width but they aren’t appear as same.
You can specify different values for each side of a box using:
o padding-top
o padding-right
o padding-bottom
o padding-left
Example – 76:-
<style>
p {
83
width: 175px;
border: 2px solid #0088dd;
}
p.second {
padding: 10px;
}
.third{
width: 200px;
padding-bottom:15px;
}
</style>
<div>
<p>IL&FS - CoreNuts Technologies, Imagination into Reality</p>
<p class="second">IL&FS - CoreNuts Technologies, Imagination
into Reality</p>
<div class="third">IL&FS - CoreNuts Technologies, Imagination
into Reality</div>
</div>
Or you can use a shorthand (where the values are in clockwise order: top, right, bottom, left)
like:- padding: 5px 5px 3px 1px;
Note:- The value of the padding property is not inherited by child elements in the same way
that the color value of the font-family property is, so you need to specify the padding for
every element that needs to use it.
 CSS “margin”
 The margin property controls the gap between boxes. Its value is commonly given in
pixels, although you may also use percentages or ems.
 If one box sits on top of another, margins are collapsed , which means the larger of the
two margins will be used and the smaller will be disregarded.
Note: If the width of a box is specified then the margin is added to the width of the box.
 You can specify values for each side of a box using following properties:
o margin-top
o margin-right
o margin-bottom
84
o margin-left
 You can also use the shorthand (where the values are in clockwise order: top, right,
bottom, left): like:- margin: 1px 2px 3px 4px;
 The value of the margin property is not inherited by child elements, so you need to
specify the margin for every element that needs to use it.
Example – 77:-
<style>
p{
width: 200px;
padding: 10px;
}
p.second {
margin: 20px;
}
</style>
<div>
<p class="second">IL&FS - CoreNuts Technologies, Imagination into
Reality</p>
</div>
 If you want to align block level elements to horizontally center and those acts like a
container, you can use auto value to the margin property along with width property. Like
so:-
#wrap{
margin:0 auto;
width: 600px;
}
 In this code fragment margin property has two values: 0(zero) and auto. 0(zero) means top
margin and auto means split equally spaces between left and right margins.
 Once you have specified the width of the box, setting the left and right margins to auto will
make the browser put an equal gap on each side of the box. This centers the box on the
page (or within the element that the box sits inside).
 Setting the width of a block-level element will prevent it from stretching out to the edges of
its container to the left and right. Then, you can set the left and right margins to auto to
horizontally center that element within its container. The element will take up the width you
specify, then the remaining space will be split evenly between the two margins.
Example – 78:-
85
<style>
#wrap{
margin:0 auto;
width: 600px;
}
p{
width: 200px;
padding: 10px;
}
p.second {
margin: 20px;
}
</style>
<div id=”wrap”>
<p class="second">IL&FS - CoreNuts Technologies, Imagination into
Reality</p>
</div>
 CSS “display” property

 display is CSS's most important property for controlling layout. Every element has a
default display value depending on what type of element it is. The default for most
elements is usually block or inline. A block element is often called a block-level element.
An inline element is always just called an inline element.
The display property values can be:-
o block , div is the standard block-level element. A block-level element starts on a new
line and stretches out to the left and right as far as it can. Other common block-level
elements are p and form, and new in HTML5 are header, footer, section, and more.
o inline , span is the standard inline element. An inline element can wrap some text
inside a paragraph <span> like this </span> without disrupting the flow of that
paragraph. The a element is the most common inline element, since you use them
for links.
o none , Another common display value is none. Some specialized elements such as
script use this as their default. It is commonly used with JavaScript to hide and show
elements without really deleting and recreating them.
86
This is different from visibility. Setting display: none will render the page as
though the element does not exist. visibility: hidden will hide the element, but the
element will still take up the space it would if it was fully visible.
o inline-block , This causes a block-level element to flow like an inline element, while
retaining other features of a block-level element.
o There are plenty of more exotic display values, such as list-item and table. Here is an
exhaustive list please visit the below url:
https://developer.mozilla.org/en-US/docs/Web/CSS/display
Example – 79:-
<style>
#wrap{
width: 90%;
margin: 0 auto;
}
.col-inline{
display: inline;
width:40%;
border: 1px solid;
}
.col-inlineblock{
display: inline-block;
width:40%;
border: 1px solid;
}
.visib{
visibility: hidden;
}
.hide{
display:none;
}
</style>
<div id="wrap">
<div>
<div class="col-inline">IL&FS - CoreNuts Technologies, Imagination
into Reality</div>
<p class="col-inline">IL&FS - CoreNuts Technologies, Imagination
into Reality</p>
<div> After the boxes </div>
</div>
<div>
<div class="col-inlineblock">IL&FS - CoreNuts Technologies,
Imagination into Reality</div>
<div class="col-inlineblock">IL&FS - CoreNuts Technologies,
Imagination into Reality</div>
<div> After the boxes </div>
</div>
<div class="visib"> This element will not be displayed, but it
occupies screen space</div>
<span> See a line gap above (visibility:hidden), it occupies a
space but element does not appear.</span>
<div class="hide"> This element will not be displayed</div>
</div>
87
 If you use this property, it is important to note that inline boxes are not supposed to
create block-level elements. In this example you can see a list. Each item in the list is
usually treated as a block-level element, but the rule for the <li> elements indicates that
they should be treated as inline elements, which means they will sit alongside each
other rather than appearing on new lines.
Example – 80:-
<style>
#wrap{
width: 90%;
margin: 0 auto;
}
li {
display: inline;
margin-right: 10px;
}
</style>
<div id="wrap">
<ul>
<li>Home</li>
<li>Products</li>
<li>Trainings</li>
<li>Corporates</li>
<li>Contact</li>
</ul>
</div>
 CSS “box-shadow” property

The box-shadow property allows you to add a drop shadow around a box. It works just like the
text-shadow property. It must use at least the first of these two values as well as a color:
o Horizontal offset , Negative values position the shadow to the left of the box.
o Vertical offset , Negative values position the shadow to the top of the box.
o Blur distance , If omitted, the shadow is a solid line like a border.
o Spread of shadow , If used, a positive value will cause the shadow to expand in all
directions, and a negative value will make it contract.
o The inset keyword can also be used before these values to create an inner-shadow.
88
Example – 81:-
<style>
p.one {
-moz-box-shadow: -5px -5px #1a1919;
-webkit-box-shadow: -5px -5px #1a1919;
box-shadow: -5px -5px #1a1919;
}
p.two {
-moz-box-shadow: 5px 5px 5px #1a1919;
-webkit-box-shadow: 5px 5px 5px #1a1919;
box-shadow: 5px 5px 5px #1a1919;
}
p.three {
-moz-box-shadow: 5px 5px 5px 5px #1a1919;
-webkit-box-shadow: 5px 5px 5px 5px #1a1919;
box-shadow: 5px 5px 5px 5px #1a1919;
}
p.four {
-moz-box-shadow: 0 0 10px #1a1919;
-webkit-box-shadow: 0 0 10px #1a1919;
box-shadow: 0 0 10px #1a1919;
}
p.five {
-moz-box-shadow: inset 0 0 10px #1a1919;
-webkit-box-shadow: inset 0 0 10px #1a1919;
box-shadow: inset 0 0 10px #1a1919;
}
.col{
min-width:100px;
min-height:100px;
margin-left:20px;
border: 1px solid;
}
</style>
<div id="wrap">
<p class="col one"></p>
<p class="col two"></p>
<p class="col three"></p>
<p class="col four"></p>
<p class="col five"></p>
</div>
 CSS “border-radius” property

You can give any element "rounded corners" by applying a border-radius through CSS. You'll only
notice if there is a color change involved. For instance, if the element has a background-color or
border that is different than the element it's over. Simple examples:
#one {
89
border-radius: 10px;
background: #BADA55;
}
#two {
border: 3px solid #BADA55;
}
Since this property is not widely supported by many older browsers versions (including
mobiles and tablet device browsers as well). For the best possible browser support, you should
prefix with -webkit- and -moz-:
.round {
/* Safari 3-4, iOS 1-3.2, Android 1.6- */
-webkit-border-radius: 12px;
/* Firefox 1-3.6 */
-moz-border-radius: 12px;
/*Opera10.5, IE9, Safari5, Chrome, Firefox 4,iOS 4,Android 2.1+*/

}
The -moz-border-radius and -webkit-border-radius properties are not in the CSS
specification. However, they are used in some versions of Chrome, Firefox, and Safari to offer
early support for this style (and therefore can be used to achieve this effect in more browsers).
You can specify individual values for each corner of a box using:
o border-top-right-radius
o border-bottom-right-radius
o border-bottom-left-radius
o border-top-left-radius
You can also use a shorthand of these four properties (in clockwise order: top, right, bottom,
left). Like so-: border-radius: 15px, 11px, 15px, 11px;
To create more complex shapes, you can specify different distances for the horizontal and
the vertical parts of the rounded corners. For example, this will create a radius that is wider than
it is tall: border-radius: 80px 50px;
You can target just one corner using the individual properties for that corner: border-top-
left-radius: 80px 50px;
Example – 82:-
<style>
p{
min-width:100px;
min-height:100px;
margin-left:20px;
border: 1px solid;
}
p.one {
90
border-bottom-right-radius: 80px 50px;
-moz-border-radius-bottom-right: 80px 50px;
-webkit-border-radius-bottom-right: 80px 50px;
}
p.two {
border-radius: 1em 4em 1em 4em;
-moz-border-radius: 1em 4em 1em 4em;
-webkit-border-radius: 1em 4em 1em 4em;
}
p.three {
padding: 0px;
}
</style>
<body>
<p class="one"></p>
<p class="two"></p>
<p class="three"></p>
</body>
Chapter – 13: CSS LISTS

In this chapter you will learn how specify the type of bullet point or numbering on lists.
 CSS “list-style-type” property
 The list-style-type property allows you to control the shape or style of a bullet point (also
known as a marker).
 It can be used on rules that apply to the <ol>, <ul>, <li> elements.
 An unordered list you can use any of these values: none, disc, circle and square.
 An ordered (numbered) list you can use any of these values: decimal, decimal-leading-
zero, lower-alpha, upper-alpha, lower-roman, upper-roman.
 CSS “list-style-image” property
 You can specify an image to act as a bullet point using the list-style-image property.
 The value starts with the letters url and is followed by a pair of parentheses. Inside the
parentheses, the path to the image is given inside double quotes.
 This property can be used on rules that apply to the <ul> and <li> elements.
Example – 83:-
<style>
91
.col{
float: left;
width: 11%;
border: 2px solid;
margin-right: 28px;
}
ul{
list-style-type: circle;
}
ol{
list-style-type: lower-roman;
}
.img-bullet{
list-style-image: url("images/star-icon.png");
}
</style>
<body>
<div class="col">
<h3>Unordered</h3>
<ul>
<li>Home</li>
<li>Products</li>
<li>Trainings</li>
<li>Corporates</li>
<li>Contact</li>
</ul>
</div>
<div class="col">
<h3>Ordered</h3>
<ol>
<li>Home</li>
<li>Products</li>
<li>Trainings</li>
<li>Corporates</li>
<li>Contact</li>
</ol>
</div>
<div class="col">
<h3>Image bullets</h3>
<ul class="img-bullet">
<li>Home</li>
<li>Products</li>
<li>Trainings</li>
<li>Corporates</li>
<li>Contact</li>
</ul>
</div>
</body>
92
 CSS “list-style-position” property
Lists are indented into the page by default and the list-style position property indicates
whether the marker should appear on the inside or the outside of the box containing the main
points.
This property can take one of two values:
o outside , The marker sits to the left of the block of text. (This is the default behaviour if
this property is not used.)
o inside , The marker sits inside the box of text (which is indented).
Example – 84:-
<style>
.col{
float: left;
width: 25%;
border: 2px solid;
margin-right: 28px;
}
ul{
list-style-type: circle;
}
.first{
list-style-position: outside;
}
.second{
list-style-position: inside;
}
</style>
<body>
<div class="col">
<h3>Outside</h3>
<ul class="first">
<li>Analysis and Implementation</li>
<li>Technical Support during migrations</li>
<li>Availability of production support team – 24/7</li>
<li>Committed to delivery with less turnaround time/Cost
effective</li>
</ul>
</div>
<div class="col">
<h3>Inside</h3>
<ul class="second">
effective</li>
</ul>
</div>
</body>
93
 CSS “list-style” property

As with several of the other CSS properties, there is a property that acts as a shorthand for list
styles. It is called list-style, and it allows you to express the markers style, image and position
properties in any order.
Example – 85:-
<style>
ul{
list-style: inside circle;
width:28%;
}
li{
text-align:justify;
}
</style>
<body>
<ul>
effective</li>
</ul>
</body>
94
Chapter – 14: CSS TABLE PROPERTIES

 TABLE
You have already met several properties that are commonly used with tables. Here we will put
them together in a single example using the following:
Example – 86:-
<style>
table {
width: 600px;
}
th, td {
padding: 7px 10px 10px 10px;
}
th {
letter-spacing: 0.1em;
font-size: 90%;
border-bottom: 2px solid #111111;
border-top: 1px solid #999;
text-align: left;
box-shadow: 0px 2px 4px 2px #807a7a;
}
tr:nth-child(even){
background-color: #333;
color: #fff;
}
tr:hover {
background-color: #c3e6e5;
}
tr td:nth-child(3) {
text-align: right;
}
</style>
<table>
<thead>
<tr>
<th> Company </th>
<th> Website </th>
<th> Head Quarters </th>
</tr>
</thead>
<tbody>
<tr>
<td> IL&FS SKills </td>
<td> www.ilfsskills.com </td>
<td class="hq"> Delhi, IN </td>
</tr>
<tr>
<td> CoreNuts Technologies</td>
<td> www.corenuts.com </td>
<td class="hq"> Hyderabad, IN </td>
</tr>
<tr>
<td> Feuji </td>
<td> www.feuji.com </td>
<td class="hq"> Texas, USA </td>
</tr>
<tr>
<td> GGK Technologies </td>
95
<td> www.ggktech.com </td>
<td class="hq"> Illinois, USA </td>
</tr>
<tr>
<td> APSSDC </td>
<td> www.apssdc.in </td>
<td class="hq"> Vijayawada, IN </td>
</tr>
<tr>
<td> AccelQ </td>
<td> www.accelq.com </td>
<td class="hq"> Hyd, IN </td>
</tr>
</tbody>
<tfoot>
<tr> <th colspan="3">© CoreNuts Technologies</th></tr>
</tfoot>
</table>
Note:- In the above example i have used a new selector “nth-child” that which allows you to
select one or more elements based on their source order in their parent element. The nth-child
selector called as a “structural pseudo class”, that means it is used to style content based on its
relationship with parent and sibling elements. If you would like to know more about these pseudo
classes please refer to this URL: https://css-tricks.com/almanac/selectors/n/
The “tr:nth-child(even)” selector in the above example is used to style all even ordered <tr>
elements from the parent element <table>. And similarly the selector “tr td:nth-child(3)” is
used to select the <td> element whose order is in 3rd position from every <tr> element. Alternatively
we can use nth-child(odd) to select odd elements in their source order, and also nth-
child(n) used to select nth element in the source order.(the “n” can be any number).
 CSS Table “empty-cell” property

If you have empty cells in your table, then you can use the empty-cells property to specify
whether or not their borders should be shown.
96
If you want to explicitly show or hide borders on any empty cells then you should use this
property.
It can take any of these following values:
o show , This shows the borders of any empty cells.
o hide , This hides the borders of any empty cells.
o inherit , If you have one table nested inside another, the inherit value instructs the
table cells to obey the rules of the containing table.
Example – 87:-
<style>
table{
empty-cells: hide;
}
td {
padding: 15px;
}
</style>
<table>
<tr>
<td> Row1,Col1 </td>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
In the above example, the diagonal cells have no borders. Because the cells Row1,Col3 and
Row2,Col2 and Row3,Col1 are empty cells.
97
 CSS Table “border-spacing, border-collapse” properties
 The border-spacing property allows you to control the distance between adjacent
cells. By default, browsers often leave a small gap between each table cell, so if you
want to increase or decrease this space then the border-spacing property allows you
to control the gap. The value of this property is usually specified in pixels. You can
specify two values if desired to specify separate numbers for horizontal and vertical
spacing.
Ex:- border-spacing: 10px 10px
 When a border has been used on table cells, where two cells meet, the width of
lines would be twice that of the outside edges. It is possible to collapse adjacent
borders to prevent this using the border-collapse property. Possible values are:
o collapse , Borders are collapsed into a single border where possible. (border-
spacing will be ignored and cells pushed together, and empty-cells
properties will be ignored.)
o separate , Borders are detached from each other. (border-spacing and
empty-cells will be obeyed.)
Example – 88:-
<style>
.wrap{
margin-bottom: 1%;
}
.col{
float: left;
width: 25%;
border: 2px solid;
margin-right: 1%;
}
table.one {
border-spacing: 5px 5px;
}
table.two {
border-collapse: separate;
}
table.three{
border-collapse: collapse;
}
td {
padding: 15px;
}
.wrap::after{
content: "";
clear: both;
display: block;
}
</style>
<div class="wrap">
<div class="col">
<table class="one">
98
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
<div class="col">
<table class="two">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</div>
<div class="wrap">
<div class="col">
<table class="three">
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
</div>
</div>
<h5>© Copyright. CoreNuts Technologies</h5>
99
Chapter – 15: CSS FORM PROPERTIES

When you come to look at a form in a few different browsers (as shown on the right), you will
see that each browser displays them differently. CSS is commonly used to control the
appearance of form elements. This is both to make them more attractive and to make them
more consistent across different browsers.
It is most common to style: Text inputs and text areas, Submit buttons, Labels on forms, to
get the form controls to align nicely.
 Styling Text Inputs
 font-size sets the size of the text entered by the user.
 color sets the text color, and background-color sets the background color of the
input.
 border adds a border around the edge of the input box, and border-radius can be
used to create rounded corners (for browsers that support this property).
 The :focus pseudo-class is used to change the background color of the text input
when it is being used, and the :hover pseudo-class applies the same styles when the
user hovers over them.
 background-image adds a background image to the box.
Example – 89:-
<style>
.wrap{
margin-left:100px;
width: 50%;
}
input {
font-size: 100%;
color: #5a5854;
background-color: #f2f2f2;
border: 1px solid #bdbdbd;
border-radius: 5px;
padding: 5px 57px 5px 50px;
100
background-repeat: no-repeat;
background-position: 6px 6px;
display: block;
margin-bottom: 10px;
}
input:focus {
background-color: #ffffff;
border: 2px groove #000;
}
input#email {
background-image: url("images/inbox-icon.png");
}
input#price {
background-image: url("images/rupee-icon.png");
}
input#web {
background-image: url("images/globe-icon.png");
}
</style>
<div class="wrap">
<form>
<p><input type="text" id="web" placeholder="enter your website
address"/></p>
<p><input type="text" id="price" placeholder="enter price in
INR"/></p>
<p><input type="text" id="email" placeholder="enter your mail
id"/></p>
</form>
</div>
 Styling Buttons
The following CSS properties can be used to style buttons:-
 color is used to change the color of the text on the button.
 box-shadow can give a 3D look to the box in browsers that support this property.
 border-radius has been used to make the rounded border of the button.
 background-color can make the submit button stand out from other items around it.
Here are some more other properties that can be used to style buttons. Let’s see an
example:
Example – 90:-
<style>
/* <>>>>FIRST STYLE THE BUTTON<<<<> */
input#gobutton{
/*forces the cursor to change to a hand when the button is hovered*/
cursor:pointer;
101
/*add some padding to the inside of the button*/
padding:5px 25px;
/*the colour of the button*/
background:#35b128;
/*required or the default border for the browser will appear*/
border:1px solid #33842a;
/*give the button curved corners, alter the size as required*/
/*give the button a drop shadow*/
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
/*style the text*/
color:#f3f3f3;
font-size:1.1em;
}
/* <>>>>NOW STYLE THE BUTTON'S HOVER AND FOCUS STATES<<<<> */
input#gobutton:hover, input#gobutton:focus{
/*make the background a little darker*/
background-color :#399630;
/*reduce the drop shadow size to give a pushed button effect*/
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
}
</style>
<input id="gobutton" type="submit" value="Go!" /> 
 Styling Fieldsets and Legends

Fieldsets are particularly helpful in determining the edges of a form. In a long form they can
help group together related information within it. The legend is used to indicate what
information is required in the fieldset.
Let us see the properties what we can use for fieldset and legend properties with an
example.
102
Example – 91:-
<style>
fieldset {
width: 350px;
border: 2px solid #3a2f2;
padding: 20px;
text-align: right;
}
legend {
background-color: #efefef;
border: 1px solid #dcdcdc;
padding: 10px 20px;
text-align: left;
}
</style>
<fieldset>
<legend>Leave your details</legend>
<label>Email:<br />
<input type="text" name="email" /></label><br />
<label>Mobile:<br />
<input type="text" name="mobile" /></label><br />
<label>City:<br />
<input type="text" name="city" /></label>
</fieldset>
 Aligning Form Controls

Labels for form elements are often different lengths, which means that the form controls
will not appear in a straight line. This is demonstrated in the example below (without CSS
applied to the form controls).
Example – 92:-
<form action="registerUser.php" method="post">
<div>
<label for="name" class="title">Name:</label>
<input type="text" id="name" name="name" />
</div>
<div>
<label for="email" class="title">Email:</label>
<input type="email" id="email" name="email" />
</div>
<div>
103
<span class="title">Gender:</span>
<input type="radio" name="gender" id="male" value="M" />
<label for="male">Male</label>
<input type="radio" name="gender" id="female" value="F" />
<label for="female">Female</label><br />
</div>
<div>
<input type="submit" value="Register" id="submit" />
</div>
</form>
Each row of the form has a title telling users what they need to enter. For the text inputs,
the title is in the <label> element. For the radio buttons, the title is in a <span>element. Both
have a class attribute with a value of title.
The following example demonstrates how to controls form alignment using CSS. Let’s style
the same form above using CSS.
Example – 93:-
<style>
.wrap{
margin-left:100px;
width: 70%;
}
div {
margin: 10px;
padding-bottom: 10px;
width: 300px;
}
.title {
float: left;
width: 100px;
text-align: right;
padding-right: 10px;
}
.radio-buttons label {
float: none;
}
.submit {
text-align: right;
}
</style>
104
Chapter – 16: CSS LAYOUTS

Yes guys, I can say it is the heart to web designing / UI designing let’s focus on this section very
clearly. Here’s what we are going to do in this section:-
 Controlling the position of elements
 Creating site layouts
 Examples on blogs layout, home page layout, grid layout.
We will explore different ways to position elements using normal flow, relative positioning, absolute
positioning and floats. Also will find out how designers use grids to make their page designs look
more professional.
 Having no layout whatsover is almost ok if all you want is one big column of content.
However, if a user makes the browser window really wide, it is difficult to read: after each
line your eyes have a long distance to travel right-to-left to the next line. Try resizing your
browser for the previous examples where the content will cross over right border, then
vertical scrolling would be annoyed.
Key points in positioning elements
 display is CSS's most important property for controlling layout. So you should be very
confident on display property please refer to the display stuff under CSS Boxes chapter.
 Block-level boxes & Inline-Boxes: Block-level boxes start on a new line and act as the main
building blocks of any layout, while inline boxes flow between surrounding text. You can
control how much space each box takes up by setting the width of the boxes (and
sometimes the height, too). To separate boxes, you can use borders, margins, padding, and
background colors.
 If one block-level element sits inside another block-level element then the outer box is
known as the containing or parent element.
It is common to group a number of elements together inside a <div> (or other block-
level) element. For example, you might group together all of the elements that form the
105
header of a site (such as the logo and the main navigation). The <div> element that contains
this group of elements is then referred to as the containing element.
 The CSS offset properties like top, right, bottom, left are the important
properties that we need to use along with position property to move elements towards
right, top, bottom and left sides.
 Controlling Elements Positions:
CSS has the following positioning elements that allow you to control the layout of a page:
normal flow, relative positioning, and absolute positioning. You can specify the elements
position using the position property in CSS. You can also float elements using the float
property.
1. Normal flow: Every block-level element appears on a new line, causing each item to
appear lower down the page than the previous one. Even if you specify the width of
the boxes and there is space for two elements to sit side-byside, they will not appear
next to each other. This is the default behavior (unless you tell the browser to do
something else).
2. Relative Position: This moves an element from the position it would be in normal
flow, shifting it to the top, right, bottom, or left of where it would have been placed.
This does not affect the position of surrounding elements; they stay in the position
they would be in normal flow.
3. Absolute position: This positions the element in relation to its containing element. It
is taken out of normal flow, meaning that it does not affect the position of any
surrounding elements (as they simply ignore the space it would have taken up).
Absolutely positioned elements move as users scroll up and down the page.
4. Fixed Position: This is a form of absolute positioning that positions the element in
relation to the browser window, as opposed to the containing element. Elements
with fixed positioning do not affect the position of surrounding elements and they
do not move when the user scrolls up or down the page.
5. Floating Position: One way to position elements on a page is with
the float property. The float property is pretty versatile and can be used in a
number of different ways. Essentially, the float property allows us to take an
element, remove it from the normal flow of a page, and position it to the left or right
of its parent element.
Please refer to the below URL to see the screencast of all position elements
http://www.barelyfitz.com/screencast/html-training/css/positioning/
106
 Normal Flow – position:static
In normal flow, each block-level element sits on top of the next one. Since this is the default
way in which browsers treat HTML elements, you do not need a CSS property to indicate that
elements should appear in normal flow, but the syntax would be: position: static;
An element with position: static; is not positioned in any special way. A static
element is said to be not positioned and an element with its position set to anything else is said
to be positioned.
Example – 94:-
<style>
h2{
padding: 5px;
}
.pos{
position: static;
top: 100px;
left: 500px;
}
.wrap{
margin: 0 auto;
width: 400px;
background: #eff;
}
</style>
<div class="wrap">
<h2>CoreNuts- Academic Institution Software</h2>
<p class="pos">AIS Uses a Client-Server architecture and developed
by using the <b>Java/J2EE, Struts, Spring, Hybernate, JQuery,
JASPER Reports & My SQL Technologies</b>. The Software is
<em>available over the Cloud</em> and it can be deployed in your
local environment based on the user interest.</p>
</div>
From the above example you cannot see any position changes because of the static position.
107
 Relative Flow – position:relative
Relative positioning moves an element in relation to where it would have been in normal flow. It
really means is “it is relative to it’s parent”. if you use some other positioning attribute, say, top:
10px;, it will shift it's position 10 pixels DOWN from where it would NORMALLY be in it’s parent.
Example – 95:-
<style>
h2{
padding: 5px;
}
.pos{
position: relative;
top: 100px;
left: 100px;
}
.wrap{
margin-left: 100px;
width: 400px;
background: #eff;
border:1px solid;
}
</style>
From the above example, you can see that the <p class=”pos”> element has been moved to right
side and down side (Actually crossed over borders) by 100px left and 100px top away from it’s
normal position in respective of parent (<div class=”wrap”> ) element’s position.
 Absolute Position – position:absolute
When the position property is given a value of absolute, the box is taken out of normal flow and
no longer affects the position of other elements on the page. (They act like it is not there.). This
is a very powerful type of positioning that allows you to literally place any page element exactly
where you want it.
An element with this type of positioning is not affected by other elements and it doesn't
affect other elements. This is a serious thing to consider every time you use absolute positioning.
It's overuse or improper use can limit the flexibility of your site.
108
Example – 96:-
<style>
h2{
padding: 5px;
}
.pos{
position: absolute;
top: 30px;
left: 100px;
background: #fee;
}
.wrap{
margin-left: 100px;
width: 400px;
background: #eff;
border:1px solid;
}
</style>
From the above example, The <p class=”pos”> element was positioned in respective of browser
window by calculating offsets top and left and <p class=”pos”> element is irrespective of it’s parent
(<div class=”wrap”>) offsets.
 Fixed Position – position:fixed
Fixed positioning is a type of absolute positioning that requires the position property to have a
value of fixed.
It positions the element in relation to the browser window. A fixed position element is
positioned relative to the viewport, or the browser window itself. The viewport doesn't change
when the window is scrolled, so a fixed positioned element will stay right where it is when the
page is scrolled.
Example – 97:-
<style>
*{
box-sizing: border-box;
}
.wrap{
margin: -20px -8px auto -8px;
}
109
h2{
padding: 5px;
}
.pos{
background: #fee;
}
header{
width: 100%;
position: fixed;
background: #333;
box-shadow: 0 0 1px 0 #333;
padding: 5px;
text-align:center;
}
h2,p{
padding: 10px;
}
article{
margin:auto;
width:80%;
}
footer{
background: #333;
padding: 5px;
position: fixed;
bottom:0;
width:100%;
height:50px;
}
footer p{
text-align:right;
padding: 0px;
color:#fff;
}
</style>
<div class="wrap">
<header>
<div class="logo"><img src="images/cnt-logo.png"></div>
</header>
<article>
<div class="row">
<h2>CoreNuts- Academic Institution Software</h2>
<p class="pos">
AIS Uses a Client-Server architecture and developed
by using the <b>Java/J2EE, Struts, Spring, Hybernate, JQuery, JASPER
Reports & My SQL Technologies</b>. The Software is <em>available over
the Cloud</em> and it can be deployed in your local environment based
on the user interest.
</p>
</div>
. . . . .(repeat <div class=”row”> for ‘n’ times as you need, to get
page scroll). . . .
</article>
<footer>
<p>© CoreNuts Technologies</p>
</footer>
</div>
110
From the above example, the <header> and <footer> elements are fixed elements, so these
elements will never get scroll up and scroll down. The <div> rows in the <article> element only gets
scrolled in between <header> and <footer>.
OVERLAPPING ELEMENTS:-
111

SDC Material-Docs 25 CSS

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

SDC Material-Docs 25 CSS

Uploaded by

Copyright:

Available Formats

CoreNuts Technologies Specific

Chapter – 9: Introducing CSS

CSS Properties Affect How Elements Are Displayed

Why use External Style Sheets?

Disadvantages of Internal Style Sheets

o They affect only the page they are on.

o Internal style sheets increase page load times.

 Inline styles have the highest precedence or specificity in a document.

Disadvantages of Inline Styles

Selector Meaning Example

ID Selector Matches an element #main-heading {}

How Css Rules Cascade:-

Chapter – 10: CSS Color

Chapter – 11: CSS TEXT

 CSS “font-size” property:-

 CSS “@font-face” rule:-

 CSS “font-style” property:-

 CSS “text-transform” property:-

 CSS “line-height” property:-

 CSS “text-align” property:-

 CSS “vertical-align” property:-

 CSS “text-indent” property:-

 CSS “:first-letter, :first-line” property:-

CSS Attribute Selectors

Selector Meaning Example

Chapter – 12: CSS BOXES

<div><p>Our Software provides the facility to carry out the day to

 CSS “min-height, max-height” properties:-

 Border, Margin & Padding

 White space & Vertical Margin

 CSS “border” property

 CSS “display” property

 CSS “box-shadow” property

 CSS “border-radius” property

/*Opera10.5, IE9, Safari5, Chrome, Firefox 4,iOS 4,Android 2.1+*/

Chapter – 13: CSS LISTS

 CSS “list-style” property

Chapter – 14: CSS TABLE PROPERTIES

 CSS Table “empty-cell” property

Chapter – 15: CSS FORM PROPERTIES

 Styling Fieldsets and Legends

 Aligning Form Controls

Chapter – 16: CSS LAYOUTS

You might also like

/Opera10.5, IE9, Safari5, Chrome, Firefox 4,iOS 4,Android 2.1+/