Cascading style sheets continued
1 / 29

Cascading Style Sheets Continued - PowerPoint PPT Presentation

  • Uploaded on

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.

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

PowerPoint Slideshow about 'Cascading Style Sheets Continued' - sidney

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

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}

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.


    <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

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


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”

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>

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