cascading style sheets css n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Cascading Style Sheets (CSS) PowerPoint Presentation
Download Presentation
Cascading Style Sheets (CSS)

Loading in 2 Seconds...

play fullscreen
1 / 23

Cascading Style Sheets (CSS) - PowerPoint PPT Presentation


  • 87 Views
  • Uploaded on

Cascading Style Sheets (CSS). “Styles” for short. Pg. 418. Cascading Style Sheets (CSS). Used to control how your web pages look -- font styles & sizes, colors, backgrounds, alignments etc. CSS allows individual tags to be redefined. CSS is used to:.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Cascading Style Sheets (CSS)' - terra


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cascading style sheets css

Cascading Style Sheets (CSS)

“Styles” for short.

Pg. 418

cascading style sheets css1

Cascading Style Sheets (CSS)

Used to control how your web pages look -- font styles & sizes, colors, backgrounds, alignments etc.

CSS allows individual tags to be redefined.

css is used to
CSS is used to:
  • Used to change the affect that a single tag has on text (in-line style).
  • Used to impose characteristics uniformly over an entire document (internal style).
  • Used to impose characteristics uniformly over an entire collection of documents (external style).
three types of css
Three types of CSS
  • In-line
  • Internal
  • External
in line styles
In-line Styles
  • The style affects just a particular tag.
  • The change from the in-line style is a local one.
example of an in line style
Example of an in-line style

<H1 STYLE = “color: blue; font-style: italic”>Changed text</H1>

The scope of the style covers the contents of that tag only.

<H1>This text is back to normal</H1>

general layout of an in line style
General layout of an in-line style

<TAG STYLE=“property1: value1; property2: value2>text</TAG>

Note:

  • A property and its value are separated by a colon :
  • Each set of properties and their corresponding values are separated by a semicolon ;
internal style also known as document level style sheets or embedded style sheets
Internal Style (Also known as Document Level Style Sheets or Embedded Style Sheets)
  • A list of rules are placed within the head of the document.
  • These styles affect all the same tags within that document.
  • Using the internal style, the styles can only be applied to the web page in which they are contained.
  • Exception: tags containing an in-line style attribute will override an internal style.
    • Benefit of an in-line style.
example of an internal style
Example of an Internal Style
  • Place the following within the HEAD tag

<STYLE TYPE="text/CSS">

<!--

H1 {color: red}

-->

</STYLE>

  • As a result, all text enclosed within H1 tags will be in the color red. (See CSS.htm)
note in line style overrides an internal style
Note: In-line Style overrides an Internal Style

<HTML>

<HEAD>

<TITLE>In-line override</TITLE>

<STYLE TYPE = “text/css”>

<!--

H1 {FONT-SIZE: 24pt}

-->

</STYLE>

</HEAD>

<BODY>

<H1 STYLE=“font-size: 36pt”>This uses 36 pt font.</H1>

<H1>This uses 24 pt font.</H1>

</BODY>

</HTML>

slide12
Note:
  • Purpose of the comments (<!-- -->) is to skip the contents in case a browser doesn’t handle styles. In such a case, the page will be rendered correctly just without including the styles.
  • text/CSS - type of styles you are including
  • CSS are all type text/CSS
slide13

General layout of an internal style

  • <STYLE TYPE="text/CSS">
  • <!--
  • TAG1 {property1: value1; property2: value2}
  • TAG2 {property3: value3; property4: value4}
  • TAG3 {property5: value5; property6: value6}
  • -->
  • </STYLE>
  • The tag on the left is the tag being modified.
  • Enclosed in { } is a list of properties and their values. (See Internal_Styles.htm)
external style sheets
External Style Sheets
  • These style sheets can be used in any web page.
  • Helps create a consistent layout throughout an entire web presentation.
example
Example:

Place the following:

h1 {color: blue; font-style: italic}

h2 {color: red; text-align: center}

font {font-size: 200%; font-style: italic; color: green}

in a separate file. Name the file and give it a .css extension. For example, name it styles.css

within a web page include the following in the head tag
Within a web page include the following in the HEAD tag:

<LINK REL=stylesheet TYPE="text/css"

HREF="styles.css"

TITLE="a name">

  • LINK -- creates a relationship between the two documents.
  • REL -- tells the browser that the document in the HREF attribute is a stylesheet.
  • TYPE -- tells the browser the type of style you are including.
  • TITLE -- makes it available for later reference by the browser.

See Styles.css & external_styles.htm

multiple selectors
Multiple Selectors

H1, H2, H3, H4, H5, H6 {text-align: center}

All tags separated by commas are affected by the property.

same as
Same As

H1 {text-align: center}

H2 {text-align: center}

H3 {text-align: center}

H4 {text-align: center}

H5 {text-align: center}

H6 {text-align: center}

contextual selectors
Contextual Selectors

OL LI {list-style: upper-roman}

  • style applied to a LI within one OL tag

OL OL LI {list-style: upper-alpha}

  • style applied to a LI within two nested OL tags

OL OL OL LI {list-style: decimal}

  • style applied to a LI within three nested OL tags

OL OL OL OL LI {list-style: lower-alpha}

  • etc,
contextual selectors cont
Contextual Selectors (cont)

B I {color: red}

  • style applied to an I tag nested within a B tag

B I, B H1, H2 {color: blue}

  • style applied to an I tag nested within a B tag
  • style applied to an H1 tag nested within a B tag
  • style applied to an H2 tag
pseudo elements
Pseudo-Elements

A:link {color: red}

A:active {color: green}

A:visited {color: blue}

A:hover {color: purple}

Note: no space between

A:link, A:active etc.