CSS INTRODUCTION SLIDES WITH HTML CODE.pdf

DIV Tag in HTML
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is easily styled by using the class or id attribute.
• The HTML Content Division element (<div>) is the generic container for
flow content.
• It has no effect on the content or layout until styled in some way using
CSS)

Cascading style-sheets (CSS)
• Created by Hakon Lie of MIT in 1994
• Has become the W3C standard for controlling visual presentation of web
pages
• Cascading style-sheets are powerful mechanism to add style to web
document
• Enforce standards and uniformity
• Create dynamic effects
• Works by allowing you to specify rules

Advantages of CSS
• Saves time
• Easy to change
• Keep consistency
• Give you more control over layout
• Use styles with JavaScript
• Make it easy to create a common format for all the Web pages

Types of Style Sheets
• In-line styles
• Embedded/internal styles
• External style sheet

In-line Style Sheet
• Add styles to each tag within the HTML file
• Use it when you need to format just a single section in a web page
• Style attribute is used to add style
• Example
• <h1 style=“color:red; font-family: sans-sarif;” > This is my content </h1>

Internal Style Sheet
• A style is applied to the entire HTML file
• Use it when you need to modify all instances of particular element (e.g., h1) in a
web page
•This is define between head tag
Example
<style>
h1 {
color:red;
font-family:sans-serif;
}
</style>

External Style Sheet
• An external style sheet is a text file containing the style definition
(declaration) having extension .css
• Use it when you need to control the style for an entire web site
• Steps to create external style sheet:-
• Open a new blank document in Notepad or Notepad++
• Type style declarations, For example: h1 {color:red; font-family:calibri;}
• Do not include <style> tags
• Save the document as filename.css

External Style Sheet
• Open an HTML file
• Between <head> and </head> add
<link href=URL rel=“relation_type” type=“link_type”>
• URL is the file.css
• Relation_type=“stylesheet”
• Link_type=“text/css”
• Save this file as .html
For example if .html and the .css file are in the same directory
<link href=file.css rel=“stylesheet” type=“text/css”>

Defining CSS Rule
A rule consists of
• A selector: element or elements the declaration applies to
• Declaration: how the elements referred to in the selector should be styled
• Property: which is the property of the selected element
• Value: which is a specification for this property

Using ID’s
° Use an id to distinguish something, like a paragraph, from the others in a
document
° The id selector is used to specify a style for a single, unique element
° For example:-
° CSS file:
° #id_name
{style attributes and values}
° HTML file
° <tag ID=id_name>

Using Classes
° HTML and XHTML require each id be unique– therefore an id value can
only be used once in a document
° You can mark a group of elements with a common identifier using the class
attribute
° To create a class
• tag.class_name {style attributes} or .class_name {style attributes}
° To apply a style
• <tag CLASS=class_name>
• <h1 CLASS=FirstHeader>Content goes here….</h1>

Difference between ID’s and Classes
° You can’t have more than one tag with the same ID value
° You can apply the same Class value to multiple document tags
° Use ID's for any elements that are simply used once on a page
° OR
° Only use classes to style websites, but, when you have to use an element in
JavaScript, use an identifier

HTML File CSS File
file.css
Page.html

HTML File CSS File
file.css
Page.html
We can use more than one classes in one tag by using “space”

CSS Font properties
° font-family
° font-size
° font-weight
° font-style
° font-variant

CSS Font properties
font-family:
° Specifies the typeface or family of font that should be used
Common values:
° Arial, Courier/Courier New, Georgia, Times/Times New Roman and
Verdana
Example:
h1{
font-family:arial
}

CSS Font properties
font-size:
° Specifies the size of a font
Common values:
° In pixels (12px,20px etc.)
° Absolut size (small, medium, lage, x-large etc.)
Example:
h1{
font-size:20px
}

CSS Font properties
font-weight:
° Specifies whether the font should be bold or normal
Common values:
° Normal, bold, bolder, lighter
° 100, 200, 300, 400, 500, 600, 700, 800, 900
Example:
h1{
font-weight : bold
}

CSS Font properties
font-style:
° Specifies whether the font should be normal, italic or oblique
Common values:
° Normal, italic, oblique
Example:
h1{
font-style : italic
}

CSS Font properties
font-variant:
° Specifies whether the font should be normal or small-caps (smaller version
of upper case)
Common values:
° Normal, small-caps
Example:
h1{
font-variant : small-caps}

CSS Text properties
° color
° text-align
° vertical-align
° text-decoration
° text-transform
° word-spacing
° letter-spacing

CSS Text properties
° color:
• specifies the color of the text
• P{color : green}
° text-align:
• horizontal alignment of the text
• Left, right, center or justify
° vertical-align:
• Vertical alignment of the text
• Sub, super, top, middle, bottom

CSS Text properties
° text-decoration:
• specifies the whether the text should be underline, overline,
line-through or blinking
° text-transform:
• text should be lowercase, uppercase or capitalized
° letter-spacing:
• Specifies the space between letters
• H1{letter-spacing:3px}

CSS Text properties
° word-spacing:
• Specifies the space between words
• H1{word-spacing:4px}

CSS Background properties
° background-color:
• Specifies the background color
° background-image:
• Specifies the background image
° background-repeat:
• Specifies whether the image should repeat or not
° background-position:
• Where an image should be positioned

CSS Border properties
° border-style (solid, dashed, doted, double etc.)
° border-color
° border-bottom (solid, dashed, doted, double etc.)
°Padding-left
°Padding-right
°Padding-top
°padding-bottom
CSS Padding properties

Styling “HYPERLINKS”
° color :
• Changes the color of the links
° background-color :
• Highlights the link, as if it had been highlighted with a
highlighter pen
° text-decoration :
• Underline, strike through, over-line, blink

Styling “HYPERLINKS”
° Pseudo-classes of links:
° Link:
• Styles for links in general
° Visited:
• Styles the links which are already visited
° Hover:
• Styles when some on hovering over a link
° Active:
• Styles the links when a links is being clicked

CSS INTRODUCTION SLIDES WITH HTML CODE.pdf

More Related Content

Similar to CSS INTRODUCTION SLIDES WITH HTML CODE.pdf (20)

Recently uploaded (20)

CSS INTRODUCTION SLIDES WITH HTML CODE.pdf