HTML 5 TutorialsIntroduction to CSS

Introduction to CSS

Hello friends,
Today I have come up with an interesting topic that we had discussed to learn in some previous chapters.

Yes, this session is about CSS (Cascading Style Sheets).

We know full form of CSS very well now. But what is it and what is its requirement in web development?

Let’s find answers for these questions.

  • What are Cascading Style Sheets?
    • CSS is a”stylesheet” language that is used to describe the presentation semantics of a document that is written in a “markup” language such as HTML.
    • Remember CSS is a “stylesheet” language, not a “markup” or “programming” language. It is used only to design a document for presentation and not to write the content.
    • CSS was created to separate the formatting and design from the markup or content of the document.
    • The CSS specifications alike HTML are maintained by the World Wide Web Consortium (W3C).
    • There are two reasons behind using CSS files.
      • It is always good to separate the presentation from the actual content/logic.
      • Due to separated design file and content file, it is easy to know the file size of the html document (content document). It is a finished and cleaner way to do it.
    • Now, imagine that you have created a HTML document without any designing or formatting.
    • After creation of the content of the document, you wish to sit and design it.
    • You have 2 ways to do it:
      • Inline styling
      • Cascading Style Sheets
    • We have used inline styling many times, we will talk about CSS today.
    • For CSS you need to create a .css file and then link it with the HTML document file.
    • We will see later how to code a .css file, but now we will just see how to link it with the HTML file.
  • Linking an External StyleSheet:
    • The following syntax is used to link a stylesheet to an HTML document.
    • Syntax: - <link rel=”stylesheet” href=”path/to/file.css” type=”text/css”>
    • The above syntax contains the link tag which is to be written in the HTML document to which the .css file is to be linked.
    • link tag must be placed in the head section of the HTML document.
    • link tag is a singleton tag, having no end tag.
    • “rel”, “href” and “type” are some of its attributes. They can be in any order.
    • Description of the attributes:
      • rel: – “rel” attribute defines a relationship between a document and an external resource. rel=”stylesheet”, in the above syntax specifies that the file to be linked is a stylesheet used to format the html document.
      • href: – “href” attribute specifies the location of the resource file to be linked with the HTML document.
        • If the file to be linked is within the folder where HTML document is saved; just put the name of the resource file as the value of “href” attribute.For Eg:
          <link href=”file.css”>

          , since both have the same address.

        • If the file is in a separate folder within the folder where HTML document is placed; include the folder name containing the .css file in the path. Generally the .css files are placed in a separate folder named CSS. For Eg:
          <link href=”CSS/file.css”>
        • If the .css file is somewhere else outside the folder where HTML document is placed; use the whole path of .css file as the value of “href” attribute.
      • type: – specifies the type of the linked document. The “type” attribute is not compulsory.
    • We can have a look on link tag example:
    • <html>
      <head>
      	      <title>Test Page</title>
               <link rel=”stylesheet” type=”text/css” href=”styles.css”>
      </head>
      <body>
                <h1>This is My First Header</h1>
                <p>This is My First Paragraph</p>
      </body>
      </html>
      
    • Here, this code will link “styles.css” file to “Test Page” html document.
  • Some important elements:
    • span tag and div tag are some important elements that are used for generic organizational or stylistic applications.
    • div tags and span tags are used for custom styling.
    • These tags actually don’t have any specific meaning. I mean, they don’t make any change in the appearance of the html content as it is done by using any heading tag.
    • They are used just to separate a certain block of code, so that we can apply styles separately to different blocks of code.
    • div tag is a block level element and span tag is an inline level element. That means, content inside starting div and ending div tags will always start with a new line which is not the case with span.
    • When we finish defining our blocks in the html document using div tag and span tag, we can provide them with some identification by using “id” and “class” attributes.
    • div tag and span tag are most commonly used with class or id attributes.
    • “id” attribute is used to give a unique identification to a code block, or you can say that it is used to specify a style to a single (unique) element.
    • “class” attribute is used to specify a style to a group of elements.
    • Syntax for this in html file is:
    • <div id=”header” class=”space”>
             <!—your code for the header div-->
      </div>
    • You can have only one “id” for a block, but you can have more than one class in a block. This is demonstrated as follows:
    • <div id=”header” class=”space anotherclass”>
             <!—your code for the header div-->
      </div>
    • Here in above code, class=”space anotherclass” indicates that the above div has two classes, “space” and “anotherclass”. That means, the contents of the div tag have the styles, applied in both “space” and “anotherclass”.
    • Let us learn the syntax of CSS.
  • CSS Syntax:
    • First let us define the part of html file having id and class.
    • <div id=”header” class=”space anotherclass”>
      		<!—your code for the header div-->
      </div>
      
    • Now, let us define the styling for id and class used above, in a .css file.
    • #header
        {
      			width:800px;
      			height:100px;
      			background:#000;
        }
       .space
        {
      			margin-bottom:10px;
        }
      
    • We finished with our styling; now let’s try to understand it.
    • In html file, the block with id=”header” and class=”space” will get styled as specified in the .css file.
    • Let us understand how .css file has been coded.
      • The “id” attribute used in div tag or span tag in html file is denoted by “#” sign followed by its value, in .css file.
      • Hence the statement (#header), here “#” is used because it is an “id” and “header” is the value of “id” attribute.
      • “header” is given the property of width, height and background color. This will style the block having id=”header” with 800px width, 100px height and black background colour.
      • In the same way every “class” attribute used in div tag or span tag in html file is denoted by a period (.) followed by its value, in .css file.
      • Hence in the statement (.space), period (.) signifies the class followed by one of its value “space”.
      • In the above code, class space is given the property of bottom margin as 10px.This will show a margin of 10px to the bottom of the block.

      With this we finished with some introduction to CSS. We will study it in more detail in next chapter.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -