CSS Study Notes 1: CSS Import Method

 

1. The link tag

     example:

      <link rel =" stylesheet " type =" text/css " href =" import.css " />

      <link rel =" stylesheet " type =" text/css " href =" import.css " media =" all " />

     (1) To successfully load an external style sheet, link must be placed inside the head element but may not be placed inside any other element, rather like title . example:

             <html >

                <head >

                   <title >CSS link position example</title >

                   <link rel =" stylesheet " type =" text/css " href =" import.css " media =" all " />

                </head >

 

                <body >

                    <h1 >Example caption</h1 >

                </body >

             </html >

 

     (2) Alternate style sheets. Alternate style sheets are defined by making the value of the rel attribute "alternate stylesheet" , and they are used in document presentation only if selected by the user.

        example:

        <link rel =" stylesheet " type =" text/css " href =" default.css " media =" all "  title =" default css " />

        <link rel =" alternate stylesheet " type =" text/css " href =" bigtext.css " media =" all "  title =" big text css " />

        <link rel =" alternate stylesheet " type =" text/css " href =" smalltext.css " media =" all "  title =" small text css " />

        Users could then pick the style they want to use, and the browser would switch from the first one(labeled "default css" in this case) to which ever the user picked. And in firefox, pick the item under the view-->page style.

 

     (3) When exist a number of preferred style sheets, all but one of them will be ignlored, and which one will be used is undefined(or uncertain). But the user can select any one from them throw menu (view --> page style).

        example:

        <link rel =" stylesheet " type =" text/css " href =" default.css " media =" all "  title =" default css " />

        <link rel =" stylesheet " type =" text/css " href =" bigtext.css " media =" all "  title =" big text css " />

        <link rel =" stylesheet " type =" text/css " href =" smalltext.css " media =" all "  title =" small text css " />

 

     (4) Persistent style sheet. Style sheet will be a persistent style sheet without the title attribute in link, and It's always used in the display of the document.

       example just like as the beginner of this section.

 

     (5) External style sheet can not contain any document markup. It's pure a list of rules.

 

 

2. The style element

     example:

        <style type =" text/css " media =" all ">

        <!--

          h1 { color : cyan ; }

          div, p {

                  margin : 3px ;

                  padding : 2px ;

                  border : thin dotted red ;

               }

        -->

        </style>

 

 

3.  The @import directive

        example:

        @import url ( bigtext. css );

        @import url ( particular. css ) screen, print;

     (1) @import can be used to direct the web browser to load an external style sheet and use its styles in the rendering of the HTML document.

 

     (2) @import must be placed inside the style container, before other CSS rules, otherwise it won't work at all ( except IE). Like link , can be more than one @import statement in a document., and all of them will be loaded and all of their styles will be used in the display of the document.

        example:

        <style type =" text/css " media =" all ">

        <!--

          @import url ( bigtext. css );                /* @import comes first */

          @import url ( background. css );

          @import url ( particular. css ) screen, print;

 

          h1 { color : cyan ; }

          div, p {

                  margin : 3px ;

                  padding : 2px ;

                  border : thin dotted red ;

               }

        -->

        </style>

 

     (3) Every @import is ended with a semicolon.

 

     (4) In consideration of style sheets can not contain any document markup, the link element can't be used. But @import can. It's an only way to shared external style sheets in style sheet(CSS file).

       example:

       /* file: default.css */

       @import url ( until. css );

       @import url ( particular. css ) screen, print;

       h1 { color : cyan ; }

       /* .............. */

 

 

4.  Inline Styles. Employ the HTML attribute style to set an inline style.(not recommended)

      example:

      <p style =" color: darkgray; background: lightblue; " >

       Darkgray font color and lightblue background paragraph which implementated throw inline style

      </p>

 

     Note that you can only place a declaration block, not an entire style sheet, inside an inline style attribute. Therefore, you can't put an @import into a style attribute, nor can you include any complete rules. The only thing you can put into the value of a style attribute is what might go between the curly braces of a rule.

 

 

[Note] this is the notes of study CSS(books: CSS: the definitive guide). Thanks.

 

[END]