Cascading style sheets continued
This presentation is the property of its rightful owner.
Sponsored Links
1 / 29

Cascading Style Sheets Continued PowerPoint PPT Presentation


  • 71 Views
  • Uploaded on
  • Presentation posted in: General

Cascading Style Sheets Continued. Different kinds of selectors in a style sheet Simple- Pseudo-Class Contextual- Pseudo-Element Class Image Styles in CSS The Box Model in CSS Positioning in CSS Positioning- Clipping Overflow- Stacking.

Download Presentation

Cascading Style Sheets Continued

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 continued

Cascading Style Sheets Continued

  • Different kinds of selectors in a style sheet

    • Simple- Pseudo-Class

    • Contextual- Pseudo-Element

    • Class

  • Image Styles in CSS

  • The Box Model in CSS

  • Positioning in CSS

    • Positioning- Clipping

    • Overflow- Stacking


Selectors ways to specify which elements to apply a style

Selectors: Ways to Specify Which Elements to Apply a Style

  • Element selectors are a comma-separated list of elements:

    h1, h2, h3 {font-family: sans-serif}

  • ID selectors choose elements with the specified id:

    <p id=“summary”> To summarize,… </p>

    #summary {text-align:center}

  • Attribute selectors select an element based on the element’s attributes. For example,

    a [href] {color: blue}

    means only make anchors with the href attribute blue.

  • Contextual selectors apply a style based on the context in which an element is used. For example, to make only bolded list items blue, use

    li b {color:blue}


Elements in a document are arranged hierarchically

Elements in a Document Are Arranged Hierarchically

On a Web page, elements are nested within other elements, forming a hierarchical tree structure:


Contextual selectors

Contextual Selectors


Example using contextual selectors styles in a list

Example Using Contextual Selectors: Styles in a List


Using classes as a selector

Using Classes as a Selector

  • Classes let you mark a group of elements with a common identifier. It is specified using the attribute class.

  • A class can be referenced in a style sheet using the dot notation.


Using pseudo classes in a selector

Using Pseudo-Classes in a Selector

A pseudo-class is a classification of an element based on its current status, position, or use in the documentselector:pseudo-class {styles}


Creating rollover effects with pseudo class selectors

Creating Rollover Effects with Pseudo-Class Selectors


Using pseudo elements in a selector

Using Pseudo-Elements in a Selector

Pseudo-elements are abstracted from what we know of an element’s content, use, or position in the document:selector:pseudo-element {styles}


Image styles choosing an image format

Image Styles: Choosing an Image Format

  • GIF (Graphics Interchange Format) is the most commonly used image format on the Web.

  • GIF files are limited to displaying 256 colors – Often used for graphics requiring fewer colors, such as clip art images, line art, logos, and icons.

  • Images that require more color depth, such as photographs, can appear grainy when saved as GIF files. JPEG format is better for photographs.

  • GIF files can have a transparent color.

  • GIF files can be animated

    but require more space.


Choosing an image format continued

Choosing an Image Format (continued)

  • A new file format called PNG (Portable Network Graphics) has been created

  • PNG files use a free and open file format and can display more colors than GIFs

  • PNGs can be used for animated graphics

  • PNGs do allow transparent colors, but not all browsers support this feature


Specifying the size of the image

Specifying the Size of the Image

  • Width and height are two image attributes (not styles) expressed in pixels.

    Example:

    <imgsrc = “car.gif”

    width = “50” height = “100” />

  • Adding the width and height attributes will speed up the display of the image.


Inserting a background image

Inserting a Background Image

  • The syntax for inserting a background image is the style background-image: url(url)

  • URL is the location and filename of the graphic file you want to use for the background of the Web page

  • For example, to use an image named “bricks.gif” as a background image, you would use the tag:

    <body style = “background-image: url(bricks.gif)”>


Some background image styles

Some Background Image Styles

background-repeat: type (repeat repeat-x repeat-y no-repeat)

background-position: horizontal vertical (2 values)

background-attachment: fixed or scroll

background: color image repeat attachment position


Fixed versus fluid layouts

Fixed versus Fluid Layouts


Floating and clearing elements

Floating and Clearing Elements

  • The syntax for the float style is: float: position

    where position is none, left, orright.

  • To display an element clear of a floating element, use the style

    clear: positionwhere positionis none, left, right

    orboth.


The box model in css

The Box Model in CSS

  • In the box model each element behaves as if it is composed of four sections:

    • Margin

    • Border

    • Padding

    • Content


Margins styles in the box model

Margins Styles in the Box Model

  • Margins are controlled with the following four styles:

    • margin-top: length

    • margin-right: length

    • margin-bottom: length

    • margin-left: length

  • Margin values can also be negative- this creates an overlay effect by forcing the browser to render one element on top of another

  • You can also combine the four margin styles into a single style:

    • margin: top right bottom left


Padding styles in the box model

Padding Styles in the Box Model

  • Styles to set padding around an element are similar to styles to set margins:

    • padding-top: value

    • padding-right: value

    • padding-bottom: value

    • padding-left: value

  • Alternatively, you can just set padding:

    • padding: top right bottom left


Border styles in the box model

Border Styles in the Box Model

  • Styles to set the border around an element use styles like:

    • border-width: value

    • border-type: type

    • border-color: color

  • Alternatively, you can just set

    border: width type color

  • You can also set the style of the individual

    edges (top, bottom, left, right) of the border.

    For example:

    style = “border-top-color: green;

    border-bottom-color: red;

    border-left-color: blue;

    border-right-color: yellow”


Result of applying border styles

Result of Applying Border Styles


The display style in the box model

The Display Style in the Box Model

  • The style displayallows an element to be either inline or block.

    a {display:block; color:white}

    Note that display has many other

    permitted values (e.g., none, which

    prevents the element from being

    shown). See the text for details.


Positioning objects with css

Positioning Objects with CSS

CSS-P (CSS-Positioning) became part of the specification for CSS2, and positioning styles were some of the first CSS2 styles to be adopted by browsers.position:type; top:value; right:value;

bottom:value; left:value;

The types of positioning include absolute, relative, fixed and inherited.


Positioning objects with css1

Positioning Objects with CSS

Absolute positioning enables you to place an element at specific coordinates either on a page or within a containing elementposition: absolute; left: 100px; top: 50px

Relative positioning is used to move an element relative to its default position on the pageposition: relative; left: 100px; top: 50px

Fixed positioning fixes an element at a specific spot in the document window while the rest of the page scrolls by. Set the value of the position style to fixed

Assign the inherit position style to an element so that it inherits the position value of its parent element


Example of positioning create 3 notes using div

Example of Positioning: Create 3 Notes Using <Div>


Position the 3 notes on a page

Position the 3 Notes on a Page


Handling overflow

Handling Overflow

If you want to force an element into a specified height and width, you have to define how the browser should handle a situation where content overflows the space allotted to the object. Use the overflow style:overflow: type


Clipping content

Clipping Content

The clip style allows you to define a rectangular region through which the element’s content can be viewed:clip: rect(top, right, bottom, left)


Stacking elements the z index style

Stacking Elements: The Z-index Style

  • Positioning introduces the possibility that elements may partially or fully overlap one another. Specify stacking order with the style:

  • z-index: value

z-index: 1

z-index: 3

z-index: 2


  • Login