Introduction CSS
1. The CSS1 specification was developed in 1996 by W3C.
2. CSS2 was released in 1998 which added many properties and values to CSS1.
3. CSS3 has been under development since the late 1990s.
4. CSSs provide the means to control and change presentation of HTML
documents.
5. CSS is not technically HTML, but can be embedded in HTML documents.
6. Cascading style sheets were introduced to provide a uniform and consistent
way to specify presentation details in XHTML documents.
7. Style sheets can be defined at three levels to specify the style of a
document .Hence called Cascading style sheets.
Style Specification Formats The format of a style specification depends on the level
of the style sheet. Inline style sheet appears as the value of the style attribute of the
tag.
The general form of which is as follows:
style =
"property_1: value_1;
property_2: value_2; …
property_n: value_n;"
Format for Document-level Document style specifications appear as the content of a
style element within the header of a document. The <style> tag must include the
type attribute, set to "text/css―(as there are other style sheets in JavaScript).
<style type = "text/css">
Comments in the rule list must have a different form use C comments (/*…*/).
<style type = "text/css">
/*
rule list(/* styles for paragraphs and other tags*/)
*/
</style>
CSS can be added to HTML elements in 3 ways:
1. Inline - by using the style attribute in HTML elements
2. Internal /Embedded- by using a <style> element in the
<head>section
3. External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element. An
inline CSS uses the style attribute of an HTML element. This example sets the
text color of the <h1> element to blue:
<h1 style="color:blue;">This is a Blue Heading</h1>
<html>
<head> <body>
<title>Page Title</title></head>
<h1 style="color:blue;">This is a Blue Heading</h1>
</body>
</html>
Internal CSS: An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a
<style> element:
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color:red;}
</style>
</head>
<body>
<h1>This is aheading</h1>
<p>This is aparagraph.</p>
</body>
</html>
External CSS:-
An external style sheet is used to define the style for many HTML pages. With an
external style sheet, you can change the look of an entire web site, by changing
one file! To use an external style sheet, add a link to it in the <head> section of
the HTML page:
An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is how the "[Link]" looks:
[Link]
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head> body { background-color:
<body> powderblue; }
<h1>This is a heading</h1> h1 { color:blue; }
<p>This is a paragraph.</p> p { color:red; }
</body>
</html>
Form of the rules: Each style in a rule list has two parts: a selector and a
declaration block., which indicates the tag or tags affected by the rules. Each
property/value pair has the
form->property: value
Selector {
property_1: value_1;
property_2: value_2:…
property_n: value_n;
}
Pairs are separated by semicolons, just as in the value of a <style> tag.
Selector Forms
Selector can have variety of forms like:
1. Simple selector form
2. Class selector
3. Generic selector
4. Id selector
5. Universal selector
6. Pseudo classes
Simple selector form is a list of style rules, as in the content of a <style> tag for
document-level style sheets. The selector is a tag name or a list of tag names,
separated by commas. Consider the following examples, in which the property
is font-size and the property value is a number of points :
h1, h3 { font-size: 24pt ;}
h2 { font-size: 20pt ;} 1. Selectors can also specify that the style should apply only to
elements in certain positions in the document .
2. This is done by listing the element hierarchy in the selector
Class Selectors Used to allow different occurrences of the same tag to use
different style specifications. A style class has a name, which is attached to the
tag‘s name with a period.
[Link] {property-value list}
[Link] {property-value list}
The class you want on a particular occurrence of a tag is specified with the
class attribute of the tag.
For example, <p class = "narrow"> Once upon a time there lived a king in the
place called Ayodhya. </p>
... <p class = "wide">
Generic Selectors A generic class can be defined if you want a style to apply to more
than one kind of tag. A generic class must be named, and the name must begin with a
period without a tag name in its name.
For Example:
<style type=“text/css”
.really-big { … } Use it as if it were a normal style class
</style>
<h1 class = "really-big"> This Tuesday is a holiday </h1>...
<p class = "really-big“> Welcome to mysore </p>
Generic selectors example
<html xmlns = "[Link]
<head>
<title> Absolute positioning </title>
<style type = "text/css">
.regtext {font-family: Times; font-size: 14pt; width: 600px}
.abstext {position: absolute; top: 25px; left: 50px; font-family: Times; font-size: 24pt;
fontstyle: italic; letter-spacing: 1em; color: rgb(102,102,102); width: 500px}
</style>
</head>
<body>
<p class = "regtext">
CSS generic type selectors example
</p><p class= abstext “>Welcome to mysore</p>
</body>
</html>
Id Selectors An id selector allow the application of a style to one specific [Link]
selector has a higher specificity than class selector. The general form of an id selector is as
follows :
#specific-id {property-value list}
Example: #section14 {font-size: 20pt} specifies a font size of 20 points to the element
<h2<html
id =“section14”‖> Alice in wonderland</h2>
xmlns = "[Link]
<head>
<title> ID Selector </title>
<style type = "text/css">
#regtext {font-family: Times; font-size: 14pt; width: 600px}
#abstext {position: absolute; top: 25px; left: 50px; font-family: Times; font-size: 24pt; fontstyle: italic; letter-spacing: 1em; color:
rgb(102,102,102); width: 500px}
</style>
</head>
<body>
<p id = "regtext">
CSS generic type selectors example
</p></body>
</html>
Universal selector
The universal selector, denoted by an asterisk(*), which applies style to all elements in
the document. For example: *{color: red;} makes all elements in the document red.
div * {
background-color: yellow;
}
Pseudo Classes
A pseudo-class is used to define a special state of an element.
it can be used to: Style an element when a user moves the mouse over it
1 2 3 4
a:link { /* selected link */ /* mouse over link */ /* visited link */
color: red; a:active { a:hover { a:visited {
} color: blue; color: hotpink; color: green;
} } }
<!DOCTYPE html> Example pseudo class
<html>
<head>
<style>
[Link]:hover {
color: #ff0000;
font-size: 22px;
}
</style>
</head>
<body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and font size:</p>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="[Link]">CSS Tutorial</a></p>
</body>
</html>
equal to the current font size
Font properties
Font-family The font-family property is used to specify a list of font name. The browser
will use the first font in the list that it supports.
For example, the following could be specified. font- family: Arial, Helvetica, Courier
Generic fonts: They can be specified as the font family value for example :serif, sans-
serif, cursive, fantasy, and monospace (defined in CSS). Browser has a specific font
defined for each generic name. If a font name that has more than one word, it should be
single-quoted
Eg: font-family: ‘Times New Roman‘
Font-size Possible values: a length number or a name, such as smaller, xx-large, medium ,
large etc. Different browsers can use different relative value for the font-size.
Font-variant The default value of the font-variant property is normal, which
specifies the usual character font. This property can be set to small-caps to
specify small capital characters. Eg : font-variant: small-caps;
Font-style The font-style property is most commonly used to specify italic, as in
the following example. Eg: font-style: italic
Font-weights The font-weight property is used to specify the degree of boldness.
For example: font- weight: bold
Font Shorthands If more than one font property is to be specified than the values
may be stated in a list as the value of the font property .
Eg: font: italic small-caps bold 12px/30px Georgia, serif;
<html xmlns = [Link]
<head>
<title> Font properties </title>
<style type = "text/css">
[Link] {font-size: 14pt; font-style: italic; font-family: 'Times New Roman'; }
[Link] {font: 10pt bold 'Courier New';}
h2 {font-family: 'Times New Roman'; font-size: 24pt; font-weight: bold}
h3 {font-family: 'Courier New'; font-size: 18pt}
</style>
</head>
<body>
<p class = "big"> Where there is will there is a way. </p>
<p class = "small"> PractCSE makes a man perfect. </p>
<h2> Chapter 1 Introduction </h2>
<h3> 1.1 The Basics of Web programming </h3>
<h4> Book by Robert Sebesta</h4>
</body>
</html>
6. Word-spacing : Adjusts the space between words in a text.
7. Text-shadow : Adds a shadow effect to the text.
8. White-space : Controls how white space and line breaks are handled.
1. Text-align
Definition: Specifies the horizontal alignment of text within an
element.
Values:
•left (default): Aligns text to the left.
•center: Centers the text.
•right: Aligns text to the right.
•justify: Stretches text to align both left and right edges.
<p style="text-align: center;">This text is centered.</p>
Text Decoration The text-decoration property is used to specify some special features
of the text. The available values are line-through, overline, underline, and none, which
is the default. Many browsers underline links.
<html xmlns = "[Link]
<head>
<title> Text decoration </title>
<style type = "text/css">
[Link] {text-decoration: line-through}
[Link] {text-decoration: overline}
[Link] {text-decoration: underline}
</style> </head>
<body>
<p class = "through"> Twinkle twinkle little star how i wonder what you are!!!!! </p>
<p class= "over"> Twinkle twinkle little star how i wonder what you are!!!!! </p>
<p class = "under"> Twinkle twinkle little star how i wonder what you are!!!!! </p>
</body>
</html>
text-transform
Definition : Modifies the case of text.
Values:
•uppercase: Converts text to uppercase.
•lowercase: Converts text to lowercase.
•capitalize: Capitalizes the first letter of each word.
<p style="text-transform: capitalize;">this text will be Capitalized.</p>
Letter-spacing – value is any length property value controls amount of space
between characters in text.
Definition: Adjusts the space between characters in text.
<!DOCTYPE> p {font-family:arial; font-size:12pt;}
<head> [Link] {font-size:12px;} [Link] {font-size:12pt;}
<title>CSS Example</title> [Link] {font-size:2pc;} [Link] {font-size:0.5in;}
<!– CSS goes here --> [Link] {font-size:1cm;}
</head> [Link] {font-size:12mm;}
<body>
<h1>Lengths</h1>
<p class="px">The length used here is 12 px</p>
<p class="pt">The length used here is 12 pt</p>
<p class="pc">The length used here is 2 pc</p>
<p class="in">The length used here is 0.5in</p>
<p class="cm">The length used here is 1cm</p>
<p class="mm">The length used here is 12mm</p>
</body>
</html>
line-height
Definition : Sets the space between lines of text.
Values: Numeric (e.g., 1.5) or length units (e.g., 20px).
<p style="line-height: 2px;">This paragraph has increased line height. This
paragraph has increased line height. This paragraph has increased line height.
This paragraph has increased line height.</p>
word-spacing
Definition : Adjusts the space between words in a text.
Value: Measured in units like px or em.
<p style="word-spacing: 5px;">This text has more space between words.</p>
text-shadow
Definition : Adds a shadow effect to the text.
Syntax : text-shadow: offsetX offsetY blur-radius color;
<p style="text-shadow: 2px 2px 4px gray;">This text has a shadow effect.</p>
white-space
Definition : Controls how white space and line breaks are handled.
Values :
•normal (default): Collapses white space.
•nowrap: Prevents wrapping.
•pre: Preserves white space and line breaks.
<p style="white-space: pre;">This is some text.</p>
Color properties The color property specifies the foreground color of XHTML
elements. For example, consider the following small table
<style type =text/css‖>
[Link] {color: red} .red {background-color: #ff000080;} /* red
[Link] {color: orange} transparency */
#orange {background-color: #00ff0080;} /*
</style> … green transparency */
<table border = "5">
<tr> <th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange"> Screwdriver </th>
</tr>
</table>
The background-color property specifies the background color of elements.
The Box Model
CSS box model is a container that contains multiple properties including borders,
margin, padding, and the content itself. It is used to create the design and layout of web
pages. The web browser renders every element as a rectangular box according to the
CSS box model. a set of rules that determine the dimensions of every element in a web
page. Box model" is used when talking about design and layout HTML Page.
TOP
LEFT RIGHT
BOTTOM
CSS Box Model gives each box four properties:
1. Content - The text, image, or other media content in the element.
2. Padding - Padding area, the space between the box’s content and its border.
3. Border - The line between the box’s padding and margin.
4. Margin - Margin area outside the border. The margin is transparent, The
space between the box and surrounding boxes.
Box Sizing Property in CSS
1. Content-Box(default property) : box-sizing: content-box;
When the user set’s the value of the box-sizing property for an element as
content-box or even if user do not set’s it ,it remains by default as content-box and
in the actual height and width of the element the dimensions of the content area
Content Area (Width) :The width of the content area is fixed at 200px.
Padding
Padding adds extra space inside the element, around the content.
Padding Left: 20px
Padding Right: 20px
Total padding width: 20px + 20px = 40px
Border
The border, being solid, has a width, but it is calculated differently from the padding.
Line Width of Border: 0.4px (the width of the line itself)
Area of Border: 1.6px (the actual space the border occupies visually)
Border width for both sides: 1.6px (left) + 1.6px (right) = 3.2px
Total Width
Total width of the element can be calculated by adding the padding and border areas to
the content area width.
Formula for Total Width = (Padding-Left + Padding-Right + Border-Area-Left + Border-
Area-Right) + Content Area Width
Total Width = (20px + 20px + 1.6px + 1.6px) + 200px = 243.2px
The total width of the element becomes 243.2px.
2. Border-Box :
Syntax= box-sizing:border-box;
When the box-sizing property is set as border-box the actual dimensions of the
element’s remains same as that of the actual dimensions set by the user.
