Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Web Application Engineering: Shahbaz Ahmad

    Uploaded by

    Mariam Chuhdry
    The document discusses CSS (Cascading Style Sheets) which allows control over the style and layout of web pages. It covers CSS selectors to target specific elements, properties to style elements, and different ways to insert CSS including external, internal, and inline styles. Priorities are described for how styles are applied when multiple stylesheets target the same element. Common units for specifying lengths in CSS like pixels, ems, and percentages are also outlined.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Web Application Engineering: Shahbaz Ahmad

    Uploaded by

    Mariam Chuhdry
    8 views14 pages
    The document discusses CSS (Cascading Style Sheets) which allows control over the style and layout of web pages. It covers CSS selectors to target specific elements, properties to style elements, and different ways to insert CSS including external, internal, and inline styles. Priorities are described for how styles are applied when multiple stylesheets target the same element. Common units for specifying lengths in CSS like pixels, ems, and percentages are also outlined.

    Original Description:

    Original Title

    Untitled

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document discusses CSS (Cascading Style Sheets) which allows control over the style and layout of web pages. It covers CSS selectors to target specific elements, properties to style elements, and different ways to insert CSS including external, internal, and inline styles. Priorities are described for how styles are applied when multiple stylesheets target the same element. Common units for specifying lengths in CSS like pixels, ems, and percentages are also outlined.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    8 views14 pages

    Web Application Engineering: Shahbaz Ahmad

    Uploaded by

    Mariam Chuhdry
    The document discusses CSS (Cascading Style Sheets) which allows control over the style and layout of web pages. It covers CSS selectors to target specific elements, properties to style elements, and different ways to insert CSS including external, internal, and inline styles. Priorities are described for how styles are applied when multiple stylesheets target the same element. Common units for specifying lengths in CSS like pixels, ems, and percentages are also outlined.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pptx, pdf, or txt
    of 14

    Web Application

    Engineering
    Lecture 6

    Shahbaz Ahmad
    shehbazsahi@live.com

    1
    Lecture 6
    • CSS Introduction
    • CSS Selectors
    • Ways to Insert CSS
    • Multiple Style Sheets
    • Inheritance in CSS
    • Advantages of External CSS Style Sheets
    • CSS Properties Summary
    • Controlling Text
    • Text Formatting

    2
    CSS Introduction
    • Take control of the style of your pages, including the colors and size of fonts, the width and
    colors of lines, and the amount of space between items on the page.
    • Allow you to specify rules that say how the content of elements within your document
    should appear.
    • CSS rule made up of two parts:
    • The selector , which indicates which element or elements the declaration applies to (if it
    applies to more than one element, you can have a comma - separated list of several
    elements)
    • The declaration , which sets out how the elements referred to in the selector should be
    styled
    • The declaration has two parts, separated by a colon:
    • A property , which is the property of the selected element(s) that you want to affect, in this case
    the width property.
    • A value , which is a specification for this property; in this case it is that the table cells should be
    36 pixels wide.

    3
    CSS Introduction

    • HTML was NEVER intended to contain tags for formatting a


    document, it was intended to define the content of a document
    • The style definitions are normally saved in external .css files.
    • A CSS declaration always ends with a semicolon, and declaration
    groups are surrounded by curly braces:

    4
    CSS Selectors

    • CSS selectors are used to "find" (or select) HTML elements based on their id, class, type, attribute,
    and more.
    • Universal Selector
    • The universal selector is an asterisk; it is like a wildcard and matches all element types in the document e.g.
    *{ }
    • The element/Type Selector
    • Based on the element name e.g.
    p {
        text-align: center;
        color: red;
    }
    • All <p> elements will be center-aligned, with a red text color
    •The id Selector
    • Uses the id attribute of an HTML element
    • The followoing applied to the HTML element with id="para1”
    #para1 {
        text-align: center;
        color: red;
    } 

    5
    CSS Selectors
    • The class Selector
    • Selects elements with a specific class attribute
    • All HTML elements with class="center" will be center-aligned
    .center {
        text-align: center;
        color: red;
    }

    • Grouping Selectors
    • You can group the selectors, to minimize the code.
    • To group selectors, separate each selector with a comma.

    h1 { h2 { p { h1, h2, p {


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

    6
    CSS Selectors

    • The Descendant Selector


    • The descendant selector matches an element type that is a descendant of
    another specified element (or nested inside another specified element), not
    just a direct child.
    • Example:
    table b {}

    7
    Ways to Insert CSS
    There are three ways of inserting a style sheet: <head>
    • External Style Sheet <link rel="stylesheet" type=
    • Ideal when the style is applied to many pages "text/
    • The file should not contain any html tags. The style sheet file css" href="mystyle.css">
    must be saved with a .css extension.  </head>
    • Each page must include a link to the style sheet with the <link>
    tag. <head>
    <style>
    body {
    • Internal Style Sheet     background-color: linen;
    • Used when a single document has a unique style }
    • Define internal styles in the head section of an HTML page, h1 {
    inside the <style> tag     color: maroon;
        margin-left: 40px;
    • Inline Styles } 
    • Loses many of the advantages of a style sheet (by mixing </style>
    content with presentation). </head>
    • Use this method sparingly!
    • The style attribute can contain any CSS property <h1 style="color:blue;margin-
    left:30px;">This is a heading.</h1>

    8
    Multiple Style Sheets

    • If some properties have been set for the same selector in different style
    sheets, the values will be inherited from the more specific style sheet. 

    • What style will be used when there is more than one style specified for an
    HTML element?
    • Generally speaking we can say that all the styles will "cascade" into a new "virtual"
    style sheet by the following rules, where number four has the highest priority:
    1. Browser default
    2. External style sheet
    3. Internal style sheet (in the head section)
    4. Inline style (inside an HTML element)

    • If the link to the external style sheet is placed after the internal style sheet in
    HTML <head>, the external style sheet will override the internal style sheet!

    9
    CSS Properties
    Summary
    • The properties are
    grouped together
    into related
    functionality
    • for example, there
    are properties that
    allow you to control
    the presentation of
    tables, lists, and
    backgrounds

    10
    11
    Text Formatting

    12
    Lengths
    • There are three ways lengths can be specified in CSS:
    • Relative units
    • Absolute units
    • Percentages
    • Relative Units
    • There are three types of relative units:
    • pixels, which relate to the resolution of the screen
    • A pixel is the smallest unit of resolution on a screen
    • Unit of measurement can depend upon the viewing medium
    • em ’ s ex ’ s
    • An em is equivalent to the height of the current font, and because the size of fonts can vary
    throughout a document, the height of the em unit can be different in different parts of the
    document.
    • Used for measurements of elements that contain text and for controlling spacing between text
    • ex ’ s
    • The ex should be the height of a lowercase x
    • em and ex both relate to the size of fonts

    13
    Lengths

    • Absolute Units
    • absolute units are used
    far less than relative units

    • Percentages
    • Give a value in relation to another value
    • For example, if your page only contained two paragraphs, and you wanted
    each to take up half of the width of the browser, then the paragraphs might
    be given a width property with a value of 50%

    14

    You might also like