Introduction to CSS
Topics Covered:
● What is CSS?
● Purpose of CSS.
● Syntax of CSS.
● Comments in CSS.
● What are the different ways to include CSS?
○ Inline CSS.
○ Internal CSS.
○ External CSS.
Topics in Detail:
CSS:
● CSS stands for Cascading Style Sheet.
● CSS is used to give styles to HTML elements.
● CSS is used to control the style of the web document in a simple and easy way.
● CSS describes how the HTML elements have to be displayed on the browser.
● When CSS is applied externally the same styles can be applied to multiple elements and
pages. So it saves work and effort.
HTML just gives structure to your web pages, where CSS styles the elements, defines layout and makes the web
page look attractive.
1
Purpose of CSS:
● The purpose of CSS is to make web pages presentable.
● Example: Web page without any styles applied.
● Same web page when styles are applied.
Applications of CSS:
● Creating stunning web pages and websites.
● Saves time by reusing the styles.
● Easy to maintain.
2
Basic CSS Syntax:
Inline style:
Internal CSS:
● Each declaration has CSS properties and the value, separated by the semi colon.
● In the first declaration color is the property and blue is the value.
● In the second declaration font-size is the property and 50px is the value.
Comments in CSS:
● Comments will not be displayed in the browser, but they help to understand the code
better.
● Comments cannot be added in the inline styles of CSS. But they can be added in
internal CSS and external CSS.
● Internal CSS:
○ Comments have to be added inside the <style> </style> tag.
○ CSS comment starts with /* and ends with */
○ Example:
● Comments can be added in the same way in the external style sheet.
3
CSS Inclusion:
There are three ways to include styles to your HTML elements. They are:
● Inline CSS or Inline styles.
● Internal CSS or Embedded CSS.
● External CSS or External style sheet.
Inline CSS:
● The inline styling is done with help of the style attribute.
● The style attribute can be added to the HTML element to which the style has to be
applied. And styles can be specified as the value of the style attribute.
● Example:
● The value of style attribute is the combination of style declarations separated by
semicolons.
● Output of the above code:
Internal CSS:
● In order to reuse the same styles within the same page or to apply same styles for
multiple elements styles can be given inside the <style> </style> tags inside the <head>
</head> part of the document.
● Example:
● Output:
4
External CSS:
● The external style sheet is generally used when the same style has to be applied in
multiple pages.
● The syntax will be similar to the internal CSS/ Embedded CSS, but the styles will be
included from the external sheet which will be connected to the HTML file by linking the
external style sheet.
● The external style sheet can be linked with the help of <link> tag.
● The external style sheet included should have the extension as .css.
● Example:
● Folder files:
● Attributes and their purpose:
Attribute Value Description
type text/css Specifies the style language.
href URL Specifies the URL/ path link of the external style sheet.
rel stylesheet/ Specifies the relationship between the current document and linked
icon document. Optional attribute.