Scribd
Upload
27 views44 pages

Module2-WT HTML Css

This document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose in styling HTML documents and the different levels of style sheets: inline, internal, and external. It explains various selector forms, including simple, class, id, contextual, pseudo classes, and the universal selector, along with property value forms for fonts, colors, and the box model. Additionally, it covers margin, padding, and background image properties, emphasizing the importance of CSS in web design.

Uploaded by

ravishankars1969
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views44 pages

Module2-WT HTML Css

This document provides an introduction to Cascading Style Sheets (CSS), detailing its purpose in styling HTML documents and the different levels of style sheets: inline, internal, and external. It explains various selector forms, including simple, class, id, contextual, pseudo classes, and the universal selector, along with property value forms for fonts, colors, and the box model. Additionally, it covers margin, padding, and background image properties, emphasizing the importance of CSS in web design.

Uploaded by

ravishankars1969
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 44

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>

You might also like