CSS - Specifying Style Sheets

CSS Specifying Style Sheets

CSS - Specifying Style Sheets

Now we know how to write style rules.

The next thing to learn is where to write style rules.

There are different ways of specifying style rules

Inline styling

Internal styling

External styling

Importing style sheet

Let us learn ways of specifying style rules.

Inline Styling :

An HTML element can use style attribute to specify its styles.

This way of specifying style is called inline styling.

Using inline styling only one element can be styled at a time.

This approach is not a best practice because it mixes the content and presentation hence should be used only when you want to style a particular element differently.

Internal/Embedded Styling :

Style rules can be written separately within the style tag of HTML.

This way of styling is referred to as internal/embedded styling as the styling code is embedded along with the HTML code.

The style rules are written using the internal styling effects the HTML elements of the web page in which it is written.

Internal style sheets have below disadvantage

Can affect only one web page.

Can affect the page load time.

External Styling :

Style rules can also be written in a separate file.

This file is saved with the .css extension.

This approach of writing style rules is called external styling.

The HTML files which want to use styles written in the external file need to use link tag of HTML.

External style sheets can be reused and easily maintained.

When the same style rules need to be implemented in another web page, we can link the external style sheet to the web page without repeating the styling code.

When the styling rules are changed in the external style sheet the change will be reflected in all the web pages.

Importing Style Sheets :

Sometimes multiple websites want to use the same style sheet files. This file might be available to everyone using a URL.

This is called importing style sheets.

To import style files import statement should be placed within the style tag.

The syntax of the import statement is

Syntax

@import url(“url of css file”)

Demo :

CODE/PROGRAM/EXAMPLE

<!doctype html>
<head>
    <title>Success Page</title>
    <meta charset="UTF-8"> 
</head>
<body>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="100px">
                <h2>Global Bank</h2>
            </td>
        </tr>
    </table>
    <table border="1" align="center" bordercolor="#8598CC">
        <tr>
            <td width="600px">
                <section>
                    <h3>Welcome to Global Bank Success Page !</h3><br/>
                    <p><em>Global Bank</em> is a international bank which has branches in various 
                    cities of various country.</p>
                    <br /><br/><br/><br/>
                </section>
                <div align="center">Hello User!
                    <p>Your Account Creation Was Successful!</p>
                    <p> Thanks for opening an account with our bank. Please login to continue.</p><br />
                </div>
                <p align="center"><a href="home2.html">Login</a> </p>
            </td>
        </tr>
    </table>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="30px">
                <footer>
                    <h2>&copy; Global Bank</h2>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

Activity 2: Style the signup web page using external style sheets.

All the table data should be rendered in purple color and all the paragraphs should be rendered in green color.

The web page should look as shown below after styling

CODE/PROGRAM/EXAMPLE

<!doctype html>
<html>

<head>
    <title>Login Page</title>
    <meta charset="UTF-8"> 
</head>

<body>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="162px">
                <h2>Global Bank</h2>
            </td>
        </tr><br/><br/>
    </table>
    <table align="center">
        <tr>
            <td>
                <p>New User Account Creation Form!</p>
            </td>
        </tr>
    </table><br />
    <table border="4 solid" align="center" bordercolor="#8598CC">
        <tr>
            <td>
                <h3 align="center">Account creation form</h3>
                <form name="signupForm" action="success.html" class="form_css">
                    <table cellpadding="5" align=center>
                        <tr>
                            <td align="right">First Name</td>
                            <td><input type="text" name="fname" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Last Name</td>
                            <td><input type="text" name="lname" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Address</td>
                            <td><textarea type="textarea" name="address" cols="2" rows="2" required>
                            </textarea></td>
                        </tr>
                        <tr>
                            <td align="right">Contact No</td>
                            <td><input type="number" name="contactNo" required /></td>
                        </tr>
                        <tr>
                            <td align="right">Gender </td>
                            <td><input type="radio" name="gender" value="Male" />Male
                                <input type="radio" name="gender" value="Female" />Female
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Account Type</td>
                            <td align="left">
                                <select name="accountType">
                                    <option value="#">--Select--</option>
                                    <option value="Savings">Savings</option>
                                    <option value="Current">Current</option>
                                    <option value="Fixed">Fixed</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td align="right">Minimum Balance</td>
                            <td><input type="number" min="1000" value="1000" name="balance" required />
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input type="submit" value="Submit" /></td>
                        </tr>
                    </table>
                </form>
            </td>
        </tr>
    </table>
    <table align="center">
        <tr>
            <td>
                <p>Visit Home Page after account creation</p>
            </td>
        </tr>
    </table>
    <table border="1" align="center">
        <tr>
            <td width="800px" height="30px">
                <footer>
                    <h2>&copy; Global Bank</h2>
                </footer>
            </td>
        </tr>
    </table>
</body>
</html>

#CSS_-_Specifying_Style_Sheets #css_style_sheets #cascading_style_sheets #external_css #css_stylesheet #external_style_sheet #external_css_in_html #external_css_example #inline_style_sheet #Inline_Styling #Internal/Embedded_Styling #External_Styling #Importing_Style_Sheets

(New page will open, for Comment)

Not yet commented...