Scribd Logo
Upload

Welcome to Scribd!

  • CSS Fundamentals

    Uploaded by

    Anurag Jayant
    60 views30 pages
    Cascading Style Sheets (CSS) is a mechanism for adding style (e.g. Fonts, colors, layouts) to web documents. Styles provide powerful control over the presentation of web documents. External CSS is a file that contains only css code and is saved with a ".css" file extension.

    Original Description:

    Original Title

    css(final)

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Cascading Style Sheets (CSS) is a mechanism for adding style (e.g. Fonts, colors, layouts) to web documents. Styles provide powerful control over the presentation of web documents. External CSS is a file that contains only css code and is saved with a ".css" file extension.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    60 views30 pages

    CSS Fundamentals

    Uploaded by

    Anurag Jayant
    Cascading Style Sheets (CSS) is a mechanism for adding style (e.g. Fonts, colors, layouts) to web documents. Styles provide powerful control over the presentation of web documents. External CSS is a file that contains only css code and is saved with a ".css" file extension.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 30

    Cascading Style Sheets (CSS)

    What are Cascading Style Sheets?

    Created by Hakon Wium Lie of MIT in 1994 Has become the W3C standard for controlling visual presentation of web pages Separates design elements from structural logic You get control and maintain the integrity of your data

    What is CSS?

    Cascading Style Sheets (CSS): is a simple mechanism for adding style (e.g. fonts, colors, layouts) to Web documents. Styles provide powerful control over the presentation of

    Internal Style Sheet

    A style sheet consists of a set of rules. Each rule consists of one or more selectors and a declaration block. A declaration block consists of a list of declarations in curly braces ({}). Each declaration consists of a property, a colon (:), a value,

    Basic CSS Syntax

    CSS Syntax
    selector {property: value;}

    Style Sheet Syntax Explained

    Selector

    Declaration Block

    body { font-family: Tahoma, Arial, sans-serif; color: black; background: white; margin: 8px; }

    Attribute Name

    Value

    Three Flavors of CSS

    Inline
    confined to a single element (tag)

    Internal
    affect elements in an entire page

    External
    can affect multiple pages

    Precedence
    Local > Internal > External

    Inline Style Sheet If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can override styles that are defined in external or internal by using inline CSS.
    Example:

    <p style="color:#000000; margin-left:15px; font-size:14px; >This is a paragraph with Inline CSS</p>

    Internal Style Sheet

    How to create?
    Put <style> </style> tag between <head> and </head> tags of your HTML page Use type attribute to indicate the style sheet type, usually type=text/css Specify a default style sheet language for the whole document by <meta http-equiv="Content-StyleType" content="text/css" /> Put your set of style sheet rules in between <style> and </style> tags

    Internal Style Sheet

    Example: <head> <style type="text/css"> body {backgroundcolor:#000000;} P {color:#CCCCCC; fontsize:15px; font-family:Arial;} </style> </head>

    External Style Sheet

    When using External CSS it is preferable to keep the CSS separate from your HTML. External CSS is a file that contains only CSS code and is saved with a ".css" file extension. This CSS file is then referenced in your HTML using the <link> instead of <style>
    <link href=URL of CSS File" rel="stylesheet" type="text/css" />

    External CSS

    Abc.css
    body { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: black; background: white; margin: 8px; } h1 { font-size: 19px; margin-top: 15px; margin-bottom: 5px; border-bottom: 1px solid black } .shaded { background: #d0d0ff; }

    Xyz.html
    <html> <head> <link rel="stylesheet" type="text/css" href="./xyz.css" /> </head> <body> <h1>First Section Heading</h1> <p> Here is the first paragraph.</p> <div class="shaded"> <h1>Another Section heading</h1> <p> Another paragraph. </p> </div> </body></html>

    Why CSS?

    Advantages to Workflow Cost Savings You WILL Be Cooler

    Advantages of CSS

    Workflow
    Faster downloads Streamlined site maintenance Global control of design attributes Precise control (Advanced)
    Positioning

    Advantages of CSS

    Cost Savings
    Reduced Bandwidth Costs
    One style sheet called and cached

    Higher Search Engine Rankings


    Cleaner code is easier for search engines to index

    Advantages of CSS

    Faster download = better usability


    Web usability redesign can increase the sales/conversion rate by 100% (source: Jakob Nielson) CSS requires less code Tables require spacer images Entire table has to render before content CSS can control the order that elements download (content before images)

    Selector

    Grouping

    Type selectors Descendant selectors Child selectors Class selectors ID SELECTORS

    Grouping When several selectors share the same declarations, they may be grouped into a comma-separated list. Example: we condense three rules with identical declarations into one. h1 { font-family: sans-serif } h2 { font-family: sans-serif } h3 { font-family: sans-serif } is equivalent to: h1, h2, h3 { font-family: sans-serif }

    Type selectors

    A type selector matches the name of a document language element type. A type selector matches every instance of the element type in the document tree. Example: The following rule matches all H1 elements in the document tree: h1 { font-family: sans-serif }

    Descendant selectors
    Authors may want selectors to match an element that is the descendant of another element in the document tree. Descendant selectors express such a relationship in a pattern. A descendant selector is made up of two or more selectors separated by white space. A descendant selector of the form "A B" matches when an element B is an arbitrary descendant of some ancestor element A. For example, consider the following rules: h1 { color: red } em { color: red } Although the intention of these rules is to add emphasis to text by changing its color, the effect will be lost in a case such as:

    Descendant selectors We address this case by supplementing the previous rules with a rule that sets the text color to blue whenever an EM occurs anywhere within an H1: h1 { color: red } em { color: red } h1 em { color: blue } The third rule will match the EM in the following fragment: <H1>This headline is <EM>very</EM> important</H1>

    Child selectors

    A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">". Example:The following rule sets the style of all P elements that are children of BODY: body > p {color: green;}
    This rule will make green any paragraph which is a direct child of the body element. Therefore, any paragraph which is the child of some other element-- for example, a div or a

    Child selectors The following example combines descendant selectors and child selectors:
    It matches the LI element must be the child of an OL element; the OL element must be a descendant of a DIV
    <html> <head> <title>css </title> <style type="text/css"> div ol > li {color: purple; font-size: 50px;} </style> <body> <ol> <li>The text is not purple.</li> </ol> <div> <ol> <li>Look, a list:</li> </ol> </div> </body> </html>

    Class selectors

    Class selectors are used when you want to define a style that does not redefine an HTML tag entirely. When referring to a Class selector you simply add the class to an HTML tag like <b class="headline"> headline</b>

    Class selectors
    <HTML> <HEAD> <style type="text/css"> .headline {font-family:arial; font-size:14px; color:red} </style> </HEAD> <BODY> <b class="headline">This is a bold tag carrying the headline class</b> <br> <b>This is a bold tag without carrying the headline class</b> <br> <i class="headline">This is an italics tag carrying the headline class</i> </BODY> </HTML>

    ID SELECTORS

    The general syntax for an ID selector is: #IDSelector {Property:Value;}


    ID selectors are used when you want to define a style relating to an object with a unique ID. This selector is most widely used with layers since layers are always defined with a unique ID.

    <HTML> <HEAD> ID SELECTORS <style type="text/css"> #layer1 {position:absolute; left:100;top:100; z-Index:0} #layer2 {position:absolute; left:800;top:300; z-Index:1} </style> </HEAD> <BODY> <div ID="layer1"> <table border="1" bgcolor="#FFCC00"><tr><td>THIS IS LAYER 1<br>POSITIONED AT 100,100</td></tr></table> </div> <div ID="layer2"> <form method="post" action=""> User Name <input type="text" name=""><br> User name <input type="password" name=""><br><br> <input type="submit"> </form> </div> </BODY> </HTML>

    You might also like