CSS - External Style Sheet


CSS - External Style Sheet 

  • When a browser reads a style sheet, it will change the HTML document in accordance with styles specified in the style sheet.
  • CSS Style sheet describes the presentation of an HTML document in the browser window.

External Style Sheet

  • An external style sheet is a separate text file with .css extension. You define all the Style rules within this text file like (notepad, WordPad, Emacs).
  • Create the separate style sheet and include this style sheet in html page.
  • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section.
<head>
    <link rel="stylesheet" type="text/css" href="wikistyle.css">
</head>
Note : This is the code to include the external style sheet in html page.

Sample Code :

wikistyle.css :

h1
    {
        Color:blue;
    }
p
    {
        font-size:14px;
        font-weight:bold;
    }

Code Explanation :


    H1 is an heading tag(<h1></h1>) element used to specify the heading for a web page.

    Using color property, assigning color value as blue for h1 element.

    P is a paragraph element used in css to insert a paragraph in web page.

    And font-size property is used to set the size of the font. Here, we have given 14 pixels for the font.

    The font-width property is used to set the width of the font. Here, we have given bold style font for the paragraph text.

Sample Code :


    In html, <link> tag is used to link other files like (CSS, JavaScript and php) into html file. Here we are linking CSS file by specifying link rel =”style sheet”.
    In html, type attribute is used to specify the media type of the <style> tag 
    Here, href=”wikistyle.css” specifies the URL of the CSS page that link with html.

Output :


    The text “Welcome To wikitechy” within h1 tag appears in blue color as shown in the browser window.

    The text “Welcome To WikiCrazy” appear in browser window with font size 14 pixels and font weight bold.