Introduction to CSS

1
Introduction to CSS

• What is CSS?
• CSS Syntax
• Connecting to your CSS
• "class" attribute
• "id" attribute
• CSS Comments
• CSS Common uses
• CSS Style Guide
• Summary

2
Introduction to CSS What is CSS?

• One of the problems with HTML pages is that they
  contain the content as well as the style or
  appearance of a web page.
• For example, you frequently see ltfont
  color"red"gt or ltbgt tags in HTML code. These tend
  to appear many times in the same page.

3
Introduction to CSS What is CSS?

• In addition, HTML is not able to do certain
  things on its own, it can be very limited.
• For example, what if you wanted two different
  color links on one page? A good example of this
  is msn.com. You will see many different color
  hyperlinks on the same page!
• HTML can't do this, and this is just the start.

4
Introduction to CSS What is CSS?

• One goal of those who develop languages for the
  web is to separate the content (the words on the
  page) from the style of the page (font colors,
  etc.).
• While not a final answer to this problem,
  developers created CSS to manage the style of a
  web page so that HTML could handle the content.
• This is a very important subject to know if you
  are going to be developing in any of the other
  "MLs" XHTML, XML, etc.
• So what is CSS?

5
Introduction to CSS What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve problems
• External Style Sheets can save you a lot of work
  
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one

6
Introduction to CSS What is CSS?

• Style Sheets Can Save a Lot of Work
• Styles in regular HTML define how HTML elements
  are displayed, just like the font tag and the
  color attribute.
• Style sheets enable you to control the appearance
  and layout of all the pages in your site using
  one file. This helps you to change the whole
  site just by editing a single CSS document.
• This can save days of work for a big site!

7
Introduction to CSS What is CSS?

• Style Sheets Can Improve Performance
• Not only can you develop and re-develop web sites
  faster using CSS, but your pages may perform
  better.
• One estimate says that using CSS can reduce your
  HTML code by up to 40, which can really add up
  when loading a page.
• That is, if you don't have the ltfontgt tag over
  and over again in your page, the page can load
  faster!

8
Introduction to CSS What is CSS?

• Multiple Styles Will Cascade Into One
• Style Sheets allow style information to be
  specified in many ways.
• Styles can be listed inside a single HTML
  element, inside the ltheadgt element of an HTML
  page, or in an external CSS file.
• Even multiple external Style Sheets can be
  referenced inside a single HTML document. 
• However, all of the styles 'cascade' into each
  other your HTML page will use all of them, in a
  certain order.

9
Introduction to CSS What is CSS?

• Cascading Order
• What style will be used when there is more than
  one style specified for an HTML element?
• There are many sources of style, from external
  documents, to inline code (like ltfontgt tags),
  etc.
• All styles 'cascade' or all fall into one
  'virtual style sheet'. If there is more than one
  'style' for an element, the one closest to the
  actual HTML code will be used.

10
Introduction to CSS What is CSS?

• Cascading Order
• The styles and order that are used are as follows
  (4 is last, so it can take over any of the first
  three)
• Browser default
• External Style Sheet
• Internal Style Sheet (inside the ltheadgt tag)
• Inline Style (inside HTML element)

11
Introduction to CSS What is CSS?

• Quick Summary
• At this point, all you should be sure of is this
• There is a way to take the style out of the HTML
  code and keep it in a separate sheet.
• You can leave the style in your HTML code if you
  need to.
• Style sheets can make development faster if used
  correctly.

12
Introduction to CSS

• CSS Syntax
• The goals of this lesson
• There is so much to learn about CSS, it could be
  a whole course by itself. By the end of this
  introduction, you should be able to
• Understand the basic concept of CSS
• Be able to use CSS in a web site for all styles
• Know where to get more information about using
  CSS

13
Introduction to CSSCSS Syntax

• The CSS syntax is made up of three parts a
  selector, a property and a value
• selector property value
• The selector is normally the element/tag you wish
  to define, the property is the attribute you wish
  to change, and each property can take a value.
  The property and value are separated by a colon
  and surrounded by curly braces.

14
Introduction to CSSCSS Syntax

• Here's an example of redefining the body tag
• body color black
• The tag above would change the color of the body,
  the background, to black.
• If another color (like "red") were specified
  inside the ltbodygt tag, that color ("red") would
  be used.

15
Introduction to CSSCSS Syntax

• If  the value of a style is multiple words, put
  quotes around the value
• p font-family "sans serif"
• See how the quotes are around "sans serif"? This
  tag will make all text between ltpgt tags use the
  "sans serif" font.

16
Introduction to CSSCSS Syntax

• You can put more than one style in a tag. Just
  separate styles with a semi-colon. This lists
  font-family and font color styles
• p font-family "sans serif" color red
• To make it more legible, you can list the styles
  on separate lines
• p
• font-family "sans serif"
• color red

17
Introduction to CSSCSS Syntax

• You can apply a style to more than one tag by
  GROUPING the tags.
• For example, if you wanted all of the header tags
  ( h1, h2, etc.) to be the same color, you could
  do it like this in CSS
• h1, h2, h3, h4, h5, h6 color green
• This makes all the headers green at once!

18
Introduction to CSSCSS Syntax

• Activity 1
• Before we go further, let's try out the examples
  we have shown.
• Make a basic HTML page using some of the tags
  we've seen p, h1, h2, h3.
• We will then use this page in the next exercise
  to make a Cascading Style Sheet to go with it,
  then link them together!
• Save this HTML page as css1.html.

19
Introduction to CSSConnecting to your CSS

• Connecting to the style
• There are 3 ways to connect to your style
• External Style Sheet
• Internal Style Sheet (inside the ltheadgt tag)
• Inline Style (inside HTML element)
• (Remember these? The fourth was 'browser
  default', which means you didn't make a style.)

20
Introduction to CSSConnecting to your CSS

• Connecting to the style - Inline
• The first we will review is Inline Style (inside
  the HTML element). This means that the style
  goes inside the HTML tag
• ltp style"color red font-family arial"gtThis
  is some text.lt/pgt
• This can be useful, but the style is still in the
  HTML page. This is basically what you've done in
  HTML.

21
Introduction to CSSConnecting to your CSS

• Connecting to the style - Internal Style Sheet
• An internal style sheet should be used when a
  single document has a unique style.
• You define internal styles in the head section by
  using the ltstylegt tag. This is better than
• See the example on the next slide.

22
Introduction to CSSConnecting to your CSS

• Connecting to the style - Internal Style Sheet
• ltheadgt
• ltstyle type"text/css"gt
• h2 color sienna
• p color green
• lt/stylegt
• lt/headgt
• If we put this ltstylegt tag in the head of the
  HTML page, these styles can be used for all p and
  h2 tags on the page.

23
Introduction to CSSConnecting to your CSS

• Connecting to the style - External Style Sheet
• An external style sheet is ideal when the style
  is applied to many pages.
• With an external style sheet, you can change the
  look of an entire Web site by changing one file.
• Each page must link to the style sheet using the
  ltlinkgt tag.

24
Introduction to CSSConnecting to your CSS

• Connecting to the style - External Style Sheet
• The ltlinkgt tag goes inside the head section of
  your web page that uses the style sheet
• ltheadgt ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt lt/headgt
• This line is exactly the same for almost all of
  your stylesheet links, except for the name of the
  css file.

25
Introduction to CSSConnecting to your CSS

• Connecting to the style - External Style Sheet
• ltheadgt ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt lt/headgt
• The file listed above, "mystyle.css" is a
  separate CSS file. It contains all of the styles
  that you could need for an entire web site.
• If you want to change the style applied to your
  site, you can either change the original CSS file
  or link to an entirely new one!

26
Introduction to CSSConnecting to your CSS

• Connecting to the style - External Style Sheet
• How do you write an external CSS file? Simply
  open a text editor like Notepad, and type in your
  styles, nothing else
• h2 color red
• p color green font-family arial
• This is the entire contents of the CSS file,
  nothing else!

27
Introduction to CSSConnecting to your CSS

• Connecting to the style - External Style Sheet
• h2 color red
• p color green font-family arial
• After typing in this code, save it as
  "mystyle.css", put it in the same folder as your
  web page. It's very important that the CSS file
  name end with ".css".
• Next, you need to link your HTML file to your CSS
  file. Use the link tag in your HTML file, as
  shown on the next slide.

28
Introduction to CSSConnecting to your CSS

• Connecting to the style - css1.html with link to
  CSS
• lthtmlgt
• ltheadgt
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt
• lt/headgt
• ltbodygt
• ltpgtThis is some text.lt/pgt
• lth2gtThis is a title.lt/h2gt
• lt/bodygt
• lt/htmlgt

29
Introduction to CSSConnecting to your CSS

• Connecting to the style - Link summary
• ltlink rel"stylesheet" type"text/css"
  href"mystyle.css" /gt
• External CSS is the best way to go for any web
  site that has 3 or more pages. In fact, it
  should be one of the first things that you do
  when designing a site.

30
Introduction to CSSConnecting to your CSS

• Activity 2
• Try creating 3 versions of the css1.html file,
  each using a separate style link inline,
  internal, and external. Have the styles modify
  the p and h2 tags in the 3 different methods.
• Save your 3 html files as css1inline.html,
  css1internal.html, and css1external.html. Name
  your external CSS file mystyles.css.

31
Introduction to CSS

• CSS "class" attribute
• With the class attribute you can define different
  styles for the same element. For example, look at
  MSN.com and count how many different color
  hyperlinks they use!
• For our example, suppose you would like to have
  two types of paragraphs in your document one
  right-aligned paragraph, and one center-aligned
  paragraph.

32
Introduction to CSSCSS "class" attribute

• If you want some paragraphs right-aligned, and
  some centered, you need more than one style on
  the ltpgt tag.
• Here is how you write it in your CSS file. You
  have a "right" class and a "center" class
• p.right text-align right
• p.center text-align center

33
Introduction to CSSCSS "class" attribute

• p.right text-align right
• The syntax
• p is the HTML tag
• .right is the "class" named "right" (make sure
  you have a period first)
• curly braces surround the style you want to use
  (you can use many)

34
Introduction to CSSCSS "class" attribute

• Here is how you write it in your HTML file. You
  have to use the "class" attribute in your HTML
  document
• ltbodygt
• ltp class"right"gt This paragraph will be
  right-aligned. lt/pgt 
• ltp class"center"gt This paragraph will be
  center-aligned. lt/pgt
• lt/bodygt
• Using the combination of classes in your CSS
  file, and 'calling' those classes using the
  'class' attribute in HTML, you are more powerful
  in your use of styles!

35
Introduction to CSSCSS "class" attribute

• To be even more powerful, you can also omit the
  tag name in the selector to define a style that
  can be used by many elements.
• Instead of
• p.center text-align center
• You can use the following line for any tag (p,
  h2, h3, etc.)
• .center text-align center

36
Introduction to CSSCSS "class" attribute

• You can call a class in the same way as before.
• This class would be in the CSS file
• .center text-align center
• Your HTML file could call the "center" class for
  any tag using the "class" attribute, since your
  CSS file did not associate it with a particular
  tag
• ltbodygt
• lth3 class"center"gt This header will be
  center-aligned. lt/h3gt 
• lt/bodygt

37
Introduction to CSSCSS "class" attribute

• Activity 3
• Make a CSS file that creates multiple classes for
  an ltagt tag, using different colors for each tag.
• Then call these classes in an HTML file. Make
  sure the HTML file has a few links to other
  sites, and use your "class" attributes in the ltagt
  tag of each link.
• The goal have a web page that has more than one
  link color, just like MSN! Save the web page as
  multiclasses.html, and the CSS as linkcolors.css.

38
Introduction to CSS

• CSS "id" attribute
• The "id" attribute is like the "class" attribute,
  but it is more powerful.
• It can be defined in two ways. It can be defined
  to match all elements with a particular id, or to
  match only one element with a particular id.
• Using it to uniquely identify one object on a web
  page is the most frequent use.

39
Introduction to CSSCSS "id" attribute

• The id Attribute CSS Syntax
• The syntax of the "id" attribute is very similar
  to the "class" attribute, in both the CSS and
  HTML files.
• First we will address how to create an "id" in
  the CSS file, then how to call it in our HTML
  file.

40
Introduction to CSSCSS "id" attribute

• The id Attribute CSS Syntax
• Writing an "id" attribute in your CSS file is
  fairly simple
• pintro
• font-family arial
• color red
• See the similarities to other "class"
  declarations? The difference is to use a
  instead of . (period).

41
Introduction to CSSCSS "id" attribute

• The id Attribute CSS Syntax
• You can also write a more 'global' id, by not
  associating it with a certain tag. In the
  example below, we eliminated the "p" tag
• intro
• font-family arial
• color red
• Therefore, this "id" can be used on any tag, if
  appropriate.

42
Introduction to CSSCSS "id" attribute

• The id Attribute CSS Syntax
• You call the "id" in the same way you call a
  "class". In your HTML file, simply add the "id"
  attribute to your tag
• ltp id"intro"gtBlah blah blah stufflt/pgt
• However, this is not the main use of "id"
  attributes. You will see more about them later.

43
Introduction to CSS

• CSS Comments
• You can insert comments in your CSS file to
  explain your code, which can help you when you
  edit the source code at a later date, or if you
  have to share code and work as a team.
• A comment will be ignored by the browser.
• A CSS comment begins with "/", and ends with
  "/", like this
• / This is a comment /

44
Introduction to CSSCSS Comments

• One way to use comments well is to identify your
  CSS code for others to read, like this example
• / This is my menu link class. /
• a.menulink color "red"
• / This is my main area link class /
• a.main color "green"

45
Introduction to CSS

• Common CSS Uses
• CSS is almost unlimited, and should be considered
  whenever style is an issue. Remember, style is
  everything except the content (words, images,
  etc.).
• While there are too many uses of CSS to learn all
  of them in a short period of time, some of the
  most common will be demonstrated here.

46
Introduction to CSSCommon CSS Uses

• Common CSS Uses - CSS Text
• Text properties allow you to control the
  appearance of text.
• It is possible to change the color of a text,
  increase or decrease the space between characters
  in a text, align a text, decorate a text, indent
  the first line in a text, and more.

47
Introduction to CSSCommon CSS Uses

• Common CSS Uses - CSS Text
• Color - Sets the color of a text
• text-align - Aligns the text in an element
• text-decoration - Adds decoration to text
• Ex p color red text-align center
  text-decoration underline

48
Introduction to CSSCommon CSS Uses

• Common CSS Uses - CSS Font
• Font properties deal with the general shape and
  appearance of the lettering to be used.
• This is not the color or alignment, but the
  shapes and sizes of the letters that you start
  with before coloring and aligning.

49
Introduction to CSSCommon CSS Uses

• Common CSS Uses - CSS Font
• font-family - Chooses the look of the
  fontfont-weight - Sets the weight of the
  fontfont-size - Sets the size of the
  fontfont-style - Sets additional style of a font
• Ex p font-family arial font-weight bold
  font-size 12pt font-style italic

50
Introduction to CSSCommon CSS Uses

• Common CSS Uses - CSS Font Shortcut
• The "font" keyword in CSS allows you to set many
  font characteristics in shorter form, all in one
  statement
• Ex p font arial bold 12pt italic
• Just write them all with no other punctuation in
  one tag.

51
Introduction to CSSCommon CSS Uses

• Common CSS Uses - Others
• Use CSS for backgrounds, borders, padding and
  spacing, and other styles.
• Common uses are for multiple link styles,
  different styles for table cells. Advanced uses
  are to use object positioning with JavaScript for
  DHTML (Dynamic HTML).

52
Introduction to CSSCommon CSS Uses

• Activity 4
• Your activity is to create an HTML page that
  demonstrates your own research into CSS, showing
  a use of CSS not given here. One example might
  be a page that contains a table with multiple
  colored cells!
• Save your page as CSSdemo.html, and your CSS file
  as demoStyles.css
• For some tips and examples, go here
  http//www.w3schools.com/css/default.asp

53
Introduction to CSS

• CSS Organization
• Implementing CSS - A Style Guide
• As mentioned before, you should develop a demo
  page to decide on styles for fonts, colors,
  links, etc.
• It is usually helpful to develop the page by
  section (menu, main area, header, footer), and
  create CSS sections for each as well. Using the
  "class" attribute will be helpful!
• Be sure to use comments in your CSS for better
  reference.

54
Introduction to CSSCSS Organization

• Implementing CSS - A Style Guide
• Your CSS file might look something like this
• / Menu styles /
• a.menu font-family arial colorred
• / Main area styles /
• a.main font-family times colorgreen

55
Introduction to CSSCSS Organization

• Implementing CSS - A Style Guide
• Your HTML file might look something like this
• ltbodygt
• lta href"cnn.com" class"menu"gtCNNlt/agt
• lta href"home.html" class"main"gtHome pagelt/agt
• lt/bodygt

56
Introduction to CSSCSS Organization

• Implementing CSS - A Style Guide
• If you're working with a team of developers, it
  may be beneficial to actually write a short paper
  listing the styles that you're using.
• Frequently a team has one CSS writer, and that
  writer tells everyone else the names of the
  "class" attributes to use in this short paper
  called a style guide.

57
Introduction to CSS

• Summary
• CSS can be done in many ways.
• CSS can be very powerful if used correctly.
• When a site is more than 3 pages, CSS should be
  used.
• If working in a team, share the CSS file,
  possibly in a short style guide document.