Module 2
CSS Introduction
Introduction
• HTML is concerned primarily with content rather than the details of how that
content is presented by browsers
• A style sheet is a syntactic mechanism for specifying style information
• Style sheets allow you to impose a standard style on a whole document, or
even a whole collection of documents
• Cascading Style Sheet (CSS) is the language we use to style an HTML
document.
• CSS describes how HTML elements should be displayed
• CSSs provide the means to control and change presentation of HTML
documents
• CSS is not technically HTML, but can be embedded in HTML documents
• The CSS1 specification was developed in 1996 by the World Wide Web
Consortium (W3C)
• CSS2 was released in 1998
• CSS3 was released in late 90’s.
Why CSS is called as Cascading style sheet?
• They can be defined at three different levels to specify the style of a document.
• Lower-level style sheets can override higher- level style sheets
Levels of Style Sheets
• There are three levels of style sheets:
1. Inline
– An inline CSS is used to apply a unique style to a single HTML element.
– Use style attribute inside HTML elements
– Inline style sheets appear in the body tag of the document
– Inline style specifications appear within the opening tag and apply only to the
content of that element
– <h1 style="color:blue;"> We use Inline CSS here</h1>
2. Document-level style sheets/Internal level style sheets
– An internal CSS is used to define a style for a single HTML page.
– Document-level style sheets appear in the head tag of the document
– Uniform style on the presentation of all the content of a single document
– <head>
<style>
body {background-color: pink;}
h1 {color: red;}
p {color: green;}
</style>
</head>
3. External style sheets
– It can be applied to any number of documents
– External style sheets are in separate files, potentially on any server on the
Internet.
– The file must not contain any HTML code, and must be saved with a .css
extension.
– Written as text files with the MIME type text/css
– The <link> tag is used to specify external style sheets
<link rel = "stylesheet" type = "text/css"
href = "http://www.cs.usc.edu/styles/wbook.css" />
• When more than one style sheet applies to a specific tag in a document, the lowest
level style sheet has precedence
• If no style sheet provides a value for a particular style property, the browser default
property value is used.
• Internal.html
• inline.html
• External.html
• Refer Slide No 13
Refer Slide No 13
• Refer Slide No 13
Selector Forms
A selector specifies the elements to which the following style information applies.
1. Simple Selector
• The selector is a tag name or a list of tag names, separated by commas
• h1, h3
– P
h1 {property-value list}
h2, h3 {property-value list}
simpleSelector.html
2. 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 a tag name
p.abc {property/value list}
p.efg {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 = “abc">
<h1> Hello</h1>
</p> Class_Selector.html
<p class = “efg">
<h2>MCA</h2>
</p>
3. 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
• Example,
.NIE {property-value list}
<h3 class = “NIE"> MCA </h3>
...
<p class = “NIE"> Generic_Selector.html
...
</p>
4. id Selectors
• An id selector allow the application of a style to one specific element
• General form:
#specific-id {property-value list}
• Example:
#Cs{font-size: 20} Id_selector.html
<h2 id = “Cs"> Hello World </h2>
5. Contextual Selector
• A contextual selector is defined as a selector which considers the context where
the style is to be applied.
• The specified style is applied to an element only if the element is in the specified
context.
• Context can be defined as a parent/child relationship or ancestor/descendant
relationship between different parts of the document.
• A contextual selector is made up of two or more simple selectors separated by
white space.
• Class, ID selector is considered as a simple selector.
• div p{color: pink;}
Contectual_Selector.html
6. Pseudo Classes
• Pseudo classes are styles that apply when something happens, rather than because
the target element simply exists
• The two pseudo classes for styling links are link and visited
• The link pseudo class is used to style a link that has not been selected
• visited is used to style a link that previously has been selected.
• hover classes apply when the mouse cursor is over the element
• focus classes apply when an element has focus
• The name of the Pseudo class begin with colon
h2:hover {property-value list}
• Pseudo_selector.html
7. The Universal Selector
The universal selector, denoted by an asterisk (*), applies its style to all elements in
a document.
• *{property-value list}
• universal_selector.html
Property Value Forms
• There are 60 different properties in 7 categories:
– Fonts
– Lists
– Alignment of text
– Margins
– Colors
– Backgrounds
– Borders
• Keywords property values are predefined - left, small, …
– Not case sensitive
• Length - numbers, maybe with decimal points
• Units:
– px - pixels
– in - inches
– cm - centimeters
– mm - millimeters
– pt - points
– pc - picas (12 points)
– em -is the value of the current font size in pixels
– ex-height
– No space is allowed between the number and the unit specification e.g., 1.5
in is illegal!
• Percentage - just a number followed immediately by a percent sign
• URL values
– url(protocol://server/pathname)
• Colors
– Color name
– rgb(n1, n2, n3)
• Numbers can be decimal or percentages
– Hex form: #XXXXXX
• Property values are inherited by all nested tags, unless overridden
fuchsia
or rgb(255, 0, 255)
or #FF00FF
Font properties
1. Font-Families
– Specify a list of font names - browser uses the first in the list it has
• Browser has a specific font for each
h2 { font-family: serif; }
2. Font Sizes
• The font-size property in CSS is used to specify the height and size of the font. It
affects the size of the text of an element.
• Its default value is medium and can be applied to every element. The values of
this property include xx-small, small, x-small, etc.
• The font-size can be relative or absolute.
Absolute-size
• It is used to set the text to a definite size. Using absolute-size, it is not possible to
change the size of the text in all browsers.
Relative-size
• It is used to set the size of the text relative to its neighboring elements. With relative-
size, it is possible to change the size of the text in browsers
<p style="font-
size:small;">
3. 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 letters.
p { font-variant: small-caps; }
4. Font Style
– italic, oblique , normal
h2 { font-style: italic; }
h3 { font-style: oblique; }
h4 { font-style: normal; }
5. Font Weight
• degrees of boldness
– bolder, lighter, bold, normal
• Could specify as a multiple of 100 (100 – 900)
<p style=“font-weight:100;”>This font is 100 weight </p>
<p style=“font-weight:bold;”>This font is bold </p>
6. Font Shorthands
• If more than one font property must be specified, the values can be stated in a list
as the value of the font property.
• font: bold 1.1em 'Times New Roman' Palatino
– Order must be: style, weight, size, name(s)
7. The text-decoration property
• Special features of text
– line-through, overline, underline, none
7. Text spacing
• The letter-spacing property controls the amount of space between the letters in
words.
• This spacing is called tracking.
• The possible values of letterspacing are normal or any length property value.
• Positive values increase the letter spacing, negative values decrease it.
• letter-spacing: 1px ->spreads the letters of words.
• Word-spacing: -1px ->squeezes the letters of words together.
• Text Attributes.html
• Refer Slide No 39
• Refer Slide No 39
Refer Slide No 39
• Refer Slide No 39
• Refer Slide No 39
Refer Slide No 39
Color properties
• The color property is used to specify the foreground color of HTML elements
• The background-color property is used to set the background color of an
element
<style type = "text/css">
p.abc {font-size: 2em; color: blue;
background-color: magenta";}
</style>
...
<p class = “abc">
Hello World
</p>
The Box Model
• Virtually all document elements can have borders with various styles, such as
color and width.
• The amount of space between the content of an element and its border, known as
padding
• The space between the border and an adjacent element, known as the margin.
• Borders – every element has a border-style property
– Controls whether the element has a border and if so, the style of the border
– border-style values: none, dotted, dashed, and double
– border-width – thin, medium (default), thick, or a length value in pixels
– Border width can be specified for any of the four borders (e.g., border-top-width)
– border-color – any color
– Border color can be specified for any of the four borders (e.g., border-top-color)
– Programs\borders.txt
Programs\borders.html
Margins and Padding
• The margin is the space between the border of an element and the element’s
neighbors.
• When there is no border, the margin plus the padding is the space between the
content of an element and its neighbors.
• When the element has a background: The background extends into the
padding, but not into the margin.
• The margin properties are named margin.
• margin-left, margin-right, margin-top, and margin-bottom.
• The padding properties are named padding
• padding-left, padding-right, padding-top, and padding-bottom.
Background Image
• The background-image property
• Repetition can be controlled
– background-repeat property
– Possible values: repeat (default), no-repeat, repeat-x, or repeat-y
– background-position property
• Possible values: top, center, bottom, left, or right
<style>
.body {
background-image: url(“flower.jpg");
background-repeat: repeat-y;
background-position: top
background-attachment: fixed;
}
</style>
