Thursday, October 25, 2012

A Short Guide to CSS

Oracle Applications allows creation of Custom Look and Feel. All these custom look and feel creates a new CSS. We also define CSS property for many UI Widgets like OraDataText etc. All the existing skins defined in the profile option Oracle Applications Look and Feel also maintain their own style and thus their own css. You can find all the CSS at $OA_HTML/cabo/styles/cache in your file server. We'll learn basics of CSS here.

CSS

  • CSS stands for Cascading Style Sheets.
  • External Style Sheets are stored in CSS files.
  • Allows to separate HTML content from it’s style. Use your HTML file to arrange the content, and CSS for all of the presentation.
  • External CSS are shared and thus allows us to change Look and Feel of entire website by modifying one CSS file. 
  • CSS improves performance because style sheet only needs to be downloaded to client machine and then it's used from cache.
  • A nested element will inherit the properties assigned to the containing element.
  • In case if same style is mentioned multiple times in same CSS/HTML file, the effect is cascaded. Following are the rules:
    • If same style is defined multiple times in a file, then the one defined at the end will take preference in case if same property is defined.
    • Inline Style - Highest Priority
    • Internal Style Sheet - High Priority
    • External Style Sheet - Normal Priority
    • Browser Default - Low Priority
  • Divisions(<div>) are a block level (X)HTML element used to define sections of an (X)HTML file.
  • Spans(<span>) are very similar to divisions except they are an inline element versus a block level element.
  • width:40% will work with <div> and not with <span>, as div is block level while span is inline.
  Sample CSS Syntax

   selector {property:value;}
    p {color:red;text-align:center;}
    /* Below is syntax in more readable form */

    p
    {
        color:red;
        text-align:center;

    }
  • P is called Selector.
  • "color:red;" and "text-align:center;" are called declaration.
  • Every declaration ends with semi colon, and contains a property and value.
  • Every declaration group is surrounded by curly brackets.
  • /* .. */ is used for comments.
  • We can combine multiple selectors together while defining CSS
    h1, h2, h3, h4, h5, h6 
    {
        color: #009900;
        font-family: Georgia, sans-serif;
    }
      Inline Style
    • Uses HTML attribute style for this. 
      • <body style="background-color: #FF0000;">
        Internal Stylesheet
      • Placing CSS code directly into the <HEAD> section.
           <head>
               <title><title>
               <style type=”text/css”>
                   // CSS Content Goes Here
                   body
                   {
                       background-color:#d0e4fe;
                   }
               </style>
           </head>
      • <style> tag is used to define style information for a HTML document.
      • <style> tag can appear multiple times in a HTML document.
        External Stylesheet
      • Created as external file and linked to the HTML document.
      • We can link to the file externally by using either <link> or <style> with @import in the <head> section. 
           <link rel=”stylesheet” type=”text/css” href=“Path To stylesheet.css” />
           
           <style type="text/css">
               @import url("import3.css");
               p { color : #f00; }
           </style>
      • <link> is intended to link together your Web page with your style sheet.
      • <link> tag defines the relationship between a document and an external resource.
      • <link> element is an empty element, it contains attributes only.
      • <link> element can appear any number of times in <HEAD> section.
      • @import allows you to import one style sheet into another.
      • @import is a way of creating a style sheet within your document, and then importing additional rules into the document.
      • @import rule must always be the first in the document. Even comments shouldn't come before this.
      • <link> element gives better performance and more readable code compared to @import.

      Selector Type

        HTML Selector
      •  To redefine the general look for an entire HTML tag.
          p
          {
              font-family:verdana;
              text-align:left;
              color:blue;
          }

        Id Selector
      •  The id selector is used to specify a style for a single, unique element.
          #book
          {
              text-align:left;
              color:blue;
          }
          <div id="book">
              This is my first book. I wis      h to write a technical book once...
          </div>

        Class Selector
      • Used to specify a style for a group of elements.
      • Can specify specific HTML elements which should be affected by a class.
          .red{color:red;} 
          p.red{color:red;}

        Context Dependent Selector or Nested Selector or  Decendant  Selector
      • Used to specify a style for a selector when its used in conjunction with another one.
           p b{color:red;font-weight:bold;}

            innerClassSelector {color:pink;}
           outerClassSelector {color:red;}
           .outerClassSelector .innerClassSelector{color:blue;}
      • When innerClassSelector is used inside outerClassSelector then this style will be applicable, else the default of innerClassSelector will be applicable.  innerClassSelector  needn't be the immediate child, but it should be in the same hierarchy.
      • Context dependent is specified by separating two classes with a space.
         Immediate Child Selector or child combinator selector
      • Similar to Context Dependent Selector but it looks for immediate child only.
      • It impacts only the first child.
          p > b{color:red;font-weight:bold;} 

          Adjacent Sibling Selector
        • It will style only the element that is immediately preceded by the former element.
             #MAN + p {color:green;}
          General Sibling Selector
        • It will style only the element that is preceded by the former element, may not be immediatly.
             #MAN ~ p {color:green;}

          Attribute Selector
        • Style HTML elements that have specific attributes.
            [title]{color:green;}

          Attribute and Value Selector
        • Below Styles all elements with title="Custom Product Branding":
            [title="Custom Product Branding"] {color:green;}
        • Below styles all elements with a title attribute that contains word "Hello":
            [title~=Hello] {color:green;}
          • It'll work for "Hello World", "World Hello" but will not work with "Hello-world".
          • [title~="Hello"] is same as [title~=Hello]
          • [title~="Hello World"] or  [title~="Hello "] will not select anything for Styling.
        • Below works if the attribute has hyphen ( - ) separated values:
            [title|=Hello] {color:green;}
          • It'll work for "Hello", "Hello-World" but will not work with "Hello World",  "World Hello" or "Hello!".
          • Mostly used for specifying languages.
        • Below works if the attribute contains word "Hello" anywhere in value:
            [title*=Hello] {color:green;}
        • Below works if the attribute begins with " http" anywhere in value:
            a[href^="http"] {color:green;}
        • Below works if the attribute ends with " .jpg" anywhere in value:
            a[href$=".jpg"] {color:green;}

        The CSS Box Model

        • Every element in web design is a rectangular box.
        • Calculate Dimensions as follows:

          Some Key Style Properties:

          text-decoration
          Set or remove decorations from text, mostly used to remove underlines from link
          h1 {text-decoration:overline;}
          h2 {text-decoration:line-through;}
          h3 {text-decoration:underline;}
          h4 {text-decoration:blink;}

          text-transform 
          To specify uppercase and lowercase letters in a text.
          p.uppercase {text-transform:uppercase;} <!-- All Upper case -->
          p.lowercase {text-transform:lowercase;} <!-- All Lower case -->
          p.capitalize {text-transform:capitalize;} <!-- Camel case -->

          text-indentation
          To specify the indentation of the first line of a text, like we have in paragraphs in book.

          list-style-image:url('listImage.gif');
          To specify image to be used for lists (instead of default square or circle etc)
          list-style-type:none;
          Will display list without any circle or square.
          display:inline; when used within the list, will display horizontal list.

           Display and Visibility
          .hide{visibility:hidden;}
          .hide{display:none;}
          visibility:hidden hides an element, but it will still take up the same space as before.
          display:none doesn't take up any space.

           :first-child Pseudo-class
          Styles a specified element that is the first child of another element.
          p:first-child{color:blue;} 

          Style the first p element
          .outerClass > .innerClass:first-child
          Styles first .innerClass element in all .outerClass elements.
          .outerClass:first-child .innerClass
          Styles all .innerClass elements in first .outerClass element.



          :first-letter and :first-line Pseudo-element
          The :first-letter selector is used to add a style to the first letter of the specified selector.
          :first-line Styles the first line of text in a block level element.
          p:first-letter, div:first-letter {font-size:medium; color:#ff0000;}
          p:first-line, div:first-line {font-size:medium; color: #00ff00;}
          p.intro:first-line, div:first-line {font-size:medium; color: #00ff00;}

          opacity
          Create a transparent images and text with CSS.
          img
          {
          opacity:0.5;
          filter:alpha(opacity=50); /* For IE8 and earlier */
          }


          @media Rule
          Media Types allow you to specify how documents will be presented in different media.
          @media screen
            {
            p {color:red;}
            }
          @media print
            {
            p {color:green;}
            }

          Tips:
          • Adding a border on hover makes images look coming out on mouse hover in Page.

          Few New Features in CSS3:

          • Border-radius
          • @font-face
          • Box-shadow 
          • 2D Transforms
          • Multi-Column Layout
          • Multiple Backgrounds
          • Opacity
          Posted by at
          Labels:

          No comments:

          Post a Comment

          Subscribe to: Post Comments (Atom)