HTML and CSS Cascading Style Sheets

1
HTML and CSSCascading Style Sheets
2
Cascading Style sheet(CSS)

• CSS was invented to control websites design
  (originally HTML documents)
• CSS is part of DHTML Technologies
• DHTML is a mix of technologies used within HTML
  documents
• DHTML consists of
• Cascading style Sheets (CSS)
• JavaScript
• DHTML purpose
• Creates powerful, interactive and dynamic sites
• Provides great control over site design
• Position objects in HTML documents
• Small file size

3
Advantages of Cascading style sheets (CSS)

• Consistent design for entire site
• Takes control of the appearance of your website
• Efficient site management
• No redundant design tags
• Can use one file to format entire site
• When making changes, you only need to make
  changes in one place (saves time)
• Control of document layout and object positioning
  
• Offers many creative solutions to HTML format
  limitations

4
- CSS is the standard to design HTML documents
- CSS is also used also to display and format
HTML documents

• What is CSS?
• Different types of styles used to display layout
  for XML documents
• How to use css to format text in XML
• The hierarchy of styles

5
Cascading style sheets (CSS)and HTML

• Each rule is referred to as a style that formats
  an element (tag) of an HTML document
•  CSS provides rules to format HTML tags
• color background and text color of elements
• Border border around elements
• Spacing around and within an element margins
  padding
• Formatting text font size, type, style and
  color
• Positioning elements

6
Cascading style sheets and browsers support

• CSS is a standard supported by the World Wide
  Web Consortium
• http//www.w3c.org
• Latest browsers IE, Firfox support CSS but not
  consistent and render different results of same
  page

7
General Style Sheets syntax in HTML

• Styles define a rule which consists of
• Selector an HTML tag or an arbitrary name
• Followed by
• A declaration at least one pair of an attribute
  and a value separated by a .
• Attributes and values should be enclosed within
  curly braces .
• You can add more than one attribute but you need
  to separate them with semi-colon.
• Selector attribute value
• ----------------------------------------
• Example
• H1 color red

attribute and its value
Selector
8
Using two attributes for one Simple selector

• H1, h2 color red
• Font-family Helvetica, Arial, Times

9
Using External Style sheet with HTML

• How to create an external style file
• Create a text file using a simple text editor
  (WordPad or NotePad)
• Style file should have .css as an extension
• Type all the styles information
• Save file
• Finally, in your xml document, link to the
  external style sheet as follow similar to linking
  with HTML
• ltlink relstylesheet typetext/css
  hrefexternalstyles.cssgt

10
CSSstylefile.css

• Stylefile.css
• p font-familyarial,sans-serifcolor blue
• h1 24pt font-weight boldcolor red
• h2 font-size 12pt padding-top 6pt
• tr font-size 12pt padding-top 6ptcolor
  silver

11
Inheritance -Style properties are passed
down from parent tag to children contained
within it. -Style applied to body tag for
example, will be inherited to all the elements
of the page that will occur in between
beginning of the ltbodygt and lt/bodygt
12
Positioning of elements You can
use styles to control positions elements.
Absolute This technique positions elements
according to the browser window. You can use
attributes such as "top" and "left" to place an
object in the left and top corner of the
browsers window. The top and left attributes
can have values in pixels to specify the distance
from the top left corner of the browser window
to the exact position of the object. left0 and
top0 places the object on the top and left
corner of the window browser. Element
position absolute top 20px
left10pxRelative position Positions
elements in relation to the content it is within
and other elements.Element position
relative top 10px left10px
 
13
Positioning of elements examples
(absolute) p font-familyarial,sans-serifco
lor blue position absolute top 50px left
50px
 
14
Measurements used for positioning objects

• px stands for pixels
• in inches
• mm millimeters
• cm centimeters

15
Border around elements and set thickness
h1 display block font-size 12pt border
medium dotted red Boreder location Border Border
-top Border-left Border-bottom Border-right
Border thickness Thin, medium, 10px border
style None, dotted, solid, double, dashed Other
options Border-colorred Border-leftwidth3
16
Spaces margins around elements
Margin is the amount of invisible spaces between
elements h1 font-size 12pt border medium
dotted red margin-left5px Margin
location margin-top margin-left
margin-bottom margin-right
17
Spaces padding
Padding is the amount of invisible spaces inside
border and around the content of an elements h1
font-size 12ptpadding10px Margin
location padding-top padding-left
padding-bottom padding-right
18
Element colorsText colorelement background
colors (example 6)
Text color Colorsilver or ffffff with no
quotations Background red or ffffff or
url(image.gif) P font-size 12pt
padding-top 6ptcolor whitebackgroundmaroon
borderthin solid red
19
Examples of Attributes used with styles

• CSS Attribute CSS Code Description
• 
  
• Color color"red refers to text color
• background-color background-color"yellow create
  s a background color behind content
• font-family font-family courier sans
  serif sets font type. You can have more than one
  font separated by semicolon
• font-style font-style italic defines font
  style "normal italic
• font-weight font-weight bold applies font
  formatting
• Position position absolute left200 top10
  sets element position
• text-align text-align center text alignment
  center left and right
• Displaylist-itemlist-style element will be part
  of a list list-stylecircle, square, decimal