CSS (1)

1
CSS
SUNRAYS Technologies PUNE INDORE VADODARA
RAIPUR Email hrd_at_sunrays.co.in URL
www.sunrays.co.in, www.sunraystechnologies.com
2
Our Books www.sunilbooks.com
3
Cascading Style Sheets

• CSS stands for Cascading Style Sheets.
• CSS defines the look and feel of HTML elements.
• Styles were added to HTML 4.0 to solve a problem.
• External Style Sheets are stored in CSS files.
• It is a way to define themes of your HTML Web
  Site.

4
Declaration of CSS

• Each declaration of CSS consist of Property
  Value pair
• Properties are separated from their values by
  colons ( )
• Pairs are separated from each other by semicolon
  ( )
• color red
• font-size 20px

5
Simple Example

• lthtmlgt
• ltheadgt
• ltstylegt
• p
• color red
• font-size 20px
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgtThis is a paragraphlt/pgt
• lt/bodygt
• lt/htmlgt
• Output
• This is a paragraph

6
Selector

• Selectors are used to apply style to a particular
  markup.
• Selectors are normally the HTML element.
• Selector never starts with a number.
• Selector never contains space.
• Three types of Selector
• Tag Selector
• ID Selector
• Class Selector

7
Tag Selectors

• Tag Selector
• p paragraph
• h heading
• a hyperlink
• ID Selector
• param
• wrapper
• Class Selector
• .menu
• .title
• .subtitle

8
Tag Selector

• Tag selector is used to redefine existing HTML
  tags.
• Selector is used when you want to change the
  formatting of existing tags.
• Such as
• lth1gt (heading 1) tag
• ltulgt (unordered list) tag.
• ltpgt(paragraph) tag.
• ltagt(hyperlink) tag.

9
ID Selector

• ID selector is used to specify a single, unique
  element.
• ID selector uses the id attribute of the HTML
  element .
• ID selector defines with .
• Do not start an ID name with a number.
• ltstylegt
• param
• test-align center
• font-size 20px
• lt/stylegt
• ltdiv idparamgtlt/divgt

10
Class Selector

• Class selector is used to specify a style for
  group of elements.
• Set a particular style for many HTML elements
  with the same class.
• Class selector defines with .
• ltstylegt
• .title
• color red
• font-size 30px
• lt/stylegt
• ltp classtitlegtlt/pgt

11
Style Sheets

• There are three ways to insert a style sheet
• Inline Style
• Internal Style Sheet
• External Style Sheet

12
Inline Style

• CSS is applied in every HTML tag by Inline style
• For using Inline style, style attribute is used
  in relevant tag.
• Style attribute can contain any CSS property.
• For example
• ltp style"background blue color white"gtA
  new background and font color with inline CSSlt/pgt

13
Internal Style Sheet

• Internal is the basic easy way to insert style
  in HTML
• In Internal style, ltstylegtlt/stylegt tag is
  added in the ltheadgtlt/headgt tag of HTML
  document.
• Internal Style Sheet should be used when a single
  document has a unique style.

14
Internal Style sheet

• lthtmlgt
• ltheadgt
• ltstyle type"text/css"gt
• p
• color red
• body
• background-color yellow
• lt/stylegt
• lt/headgt
• ltbodygt
• ltpgtParagraph showing Internal style sheetlt/pgt
• lt/bodygt
• lt/htmlgt

15
External Style Sheet

• External CSS is a file that contains only CSS
  code and is saved with a ".css" file extension.
• This CSS file is then referenced in HTML using
  the ltlinkgt  tag instead of ltstylegt tag.
• External style sheet is applied to many pages.
• External style sheet can change the entire look
  of website by changing only one file.
• External style sheet keeps the design content
  separate.
• We can reuse the CSS code.

16
External Style Sheet

• lthtmlgt
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"test.css" /gt
• lt/headgt
• ltbodygt
• lth3gt A White Header lt/h3gt
• ltpgt This paragraph has a blue font. The
  background color of this page is gray because we
  changed it with CSS! lt/pgt
• lt/bodygt
• lt/htmlgt

17
Example Source Code
https//github.com/sunilbooks/SelfLearnJava
18
Thank You

• If you have any questions feel free to contact us
  

Email hrd_at_sunrays.co.in URL www.sunrays.co.in
Next topic JDBC