CSS|CSS Tutorial| CSS Introduction - Computer Science Knowledge

CSS stands for Cascading Style Sheet. It is a stylesheet language used to style documents written in HTML or XML. CSS is used to control the style of a web document in a simple and easy way. It describes how HTML elements are to be displayed. CSS defines the front-end appearance of our website. It controls the colors, fonts, and layouts of the website elements. This style sheet language also allows us to add effects or animations to website. CSS is used to format the layout of a web page. With the help of CSS, we can control the color, font, size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used , and much more.

Through CSS we separate the style/design from the content of the website, this improves content readability, and accessibility and provides more flexibility. CSS is easy to learn and understand. It provides powerful control over the presentation of an HTML document. Using CSS, we can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.

CSS saves a lot of work. It can control the layout of multiple web pages all at once. CSS allows us to handle multiple web pages using only one CSS file. CSS facilitates us to modify various properties of HTML elements like we can modify background color/image, alignment to tags using margin, position properties, can provide different font properties (font-family, font-size, color, etc).

CSS is an integral part of web development, allowing designers and developers to control the layout, style, and appearance of web pages. It works hand-in-hand with HTML and JavaScript to create rich, interactive, and visually appealing web experiences. CSS is used with HTML and JavaScript to create web pages. HTML specifies the content of the webpage, CSS specifies the appearance, and formatting of the webpage, and JavaScript specifies the behavior of the web page.

CSS provides a powerful and flexible way to control the visual aspects of web pages, making it a crucial technology for web development. Developers often use CSS in conjunction with HTML and JavaScript to create dynamic and responsive user interfaces.

CSS has gone through different versions of specification. CSS1 was released in 1996, CSS2 in 1998, and CSS3, the latest major version, introduced many new features and modules. CSS is continually evolving, with new features being proposed and implemented to address the changing needs of web development.

CSS3, also known as Cascading Style Sheets Level 3, is a more advanced version of CSS and the successor of CSS2. CSS3 is used for the same thing as CSS, namely to style web pages and make them more attractive and user-friendly. New features in CSS3 include support for additional selectors, drop shadows, rounded corners, updated layout features, animation, transparency etc.

CSS Syntax:

A CSS comprises of style rules (CSS Rules) that are interpreted by the browser and then applied to the corresponding elements in the document. A CSS rule has two main parts:

Selector
Declaration (one or more)

Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.

Declaration: Each declaration consists of a property and a value. The property is the style attribute we want to change. Each property has a value. A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets.

Syntax of CSS style rule is as follows:

Selector {property: value ;}

Example:

h1 {color: blue; font-size: 12px ;}

To make the CSS more readable, we can put one declaration on each line, like this:

P, H1

{

color: red;

text-align: center;

}

We can also apply a style to many selectors. Just separate the selectors with a comma as given in the following example:

H1, H2, H3

{

color: blue;

font-weight: normal;

text-transform: lowercase;

}

Example:

<HTML>

<HEAD>

<STYLE>

P, H2, H3

{

TEXT-ALIGN: CENTER;

COLOR: BLUE;

FONT: WEIGHT: BOLD;

}

</STYLE>

</HEAD>

<BODY>

<H2>HEADING-2 IS AFFECTED BY STYLE</H2>

<H3> HEADING-3 IS AFFECTED BY STYLE </H3>

<P> THIS PROGRAM IS AFFECTED BY STYLE

</BODY>

</HTML>

Types of Style Sheets:

CSS (Cascading Style Sheets) can be categorized three types based on how and where the styles are applied. CSS can be added to HTML documents in 3 ways.

Inline CSS
Internal or Embedded CSS
External CSS

Inline CSS is written for a specific element in the HTML document, Internal CSS is specified at the beginning of an HTML document and External CSS is a separate file that HTML files will link to.

Inline CSS:

Inline CSS involves applying styles directly to individual HTML elements using the style attribute. A inline CSS is used to apply a unique style to a single HTML element. This CSS type is suitable for making quick, specific adjustments but is generally not recommended for large-scale styling due to its lack of maintainability and separation of concerns. Inline CSS is not really recommended, as each HTML tag needs to be styled individually. Managing website may become too hard if we only use inline CSS.

These style sheets are used to change individual tags like <H1>, <P>, <BODY> etc. in an HTML document. i.e., they apply to a particular tag only. We can use STYLE attribute of any HTML tag to define style rules. These rules will be applied to that Tag only. STYLE attribute is written within the tags whose style we would like to change.

Example:

<H1 style= “font-size: 16pt”> the default setting of the <H1> tag is overridden by the usage of the style attribute within it.

<p style=”color: blue; font-size: 16px;”>This is a paragraph with inline styles.</p>

Example-1:

<HTML>

<HEAD>

<TITLE>INLINE STYLE SHEET</TITLE>

</HEAD>

<BODY>

<H1 STYLE = “background-color: DodgerBlue; COLOR: RED; FONT-FAMILY: ARIAL; TEXT-ALIGN:CENTER” > INLINE STYLE SHEET</H1>

<H1>THIS LINE IS NOT STYLED</H1>

<p style=”color: red; font-size=16pt;”>Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This CSS type is suitable for making quick, specific adjustments but is generally not recommended for large-scale styling due to its lack of maintainability and separation of concerns. Inline CSS is not really recommended, as each HTML tag needs to be styled individually. Managing website may become too hard if we only use inline CSS.</p>

</BODY>

</HTML>

Example-2:

<HTML>

<HEAD>

<TITLE> INLINE STYLE SHEETS</TITLE>

</HEAD>

<BODY>

<H1 STYLE= “FONT-FAMILY: ARIAL; FONT-SIZE: 24PT; COLOR: RED; FONT-STYLE: ITALIC; FONT-WEIGHT: BOLD; LETTER-SPACING:3PX; BACKGROUND-COLOR:LIGHTBLUE;”> THIS IS A H1 TAG WITH STYLE ATTRIBUTE</H1>

<P STYLE= “BACKGROUND-COLOR:GREY;FONT-SIZE: 12PT; COLOR: AQUA; FONT-STYLE: ITALIC”>Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This CSS type is suitable for making quick, specific adjustments but is generally not recommended for large-scale styling due to its lack of maintainability and separation of concerns. Inline CSS is not really recommended, as each HTML tag needs to be styled individually. Managing website may become too hard if we only use inline CSS.</P>

</BODY>

</HTML>

Advantages of Inline CSS:

We can easily and quickly insert CSS rules to an HTML page. That’s why this CSS type is useful for testing or previewing the changes, and performing quick-fixes to our website.
We don’t need to create and upload a separate document as in the external style.

Disadvantages of Inline CSS:

Adding CSS rules to every HTML element is time-consuming and makes HTML structure messy.
Styling multiple elements can affect page’s size and download time.

Internal CSS:

An internal CSS is used to define a style for a single HTML page. Internal CSS allows more organized styling within the same document, providing better maintainability compared to inline styles. However, using this style for multiple pages is time-consuming as we need to put CSS rules on every page of our website.

An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

Here is the general syntax:

<HEAD>

<STYLE>

—————–

……………………

</STYLE>

</HEAD>

Example-1:

<HTML>

<HEAD>

</TITLE>INTERNAL STYLE SHEET</TITLE>

<STYLE>

BODY

{

Background-color: powderblue;

}

{

Font-weight: Bold;

Font-size: 40px;

font-family: verdana;

text-align: center;

text-decoration: underline;

letter-spacing:3px;

Color: Blue;

background-color:grey;

}

{

color: red;

font-family: arial;

Font-size: 20px;

text-align: justify;

margin-left: 30px; margin-right: 30px; margin-top:40px;

}

</STYLE>

</HEAD>

<BODY>

<H1>WELCOME TO THE WORLD OF STYLE SHEET</H1>

<p>Internal or embedded CSS requires to add a style tag in the head section of the HTML document. This CSS style is an effective method of styling a single page. These styles apply to the specific HTML document in which they are defined.</p>

</BODY>

</HTML>

Example-2:

<html>

<head>

<title>Embedded style sheets</title>

<style>

{

font-family: Arial; font-size: 24pt; color: Blue; text-decoration: underline; font-style: italic; font-weight: bold; border-style: solid; border-color: brown; border-width:thick;

}

{

color: red; font-size: 12pt ;border-style: dotted; border-color: green; border-width: 5px; padding:30px;

}

body

{

font-family: Arial; color: Aqua; font-size: 14pt

}

</style>

</head>

<body>

<h1>this is another h1 tag</h1>

<p>This is a paragraph. Changes applied in paragraph tag reflected here</p>

<p>paragraph two: The changes are applied to all tags of the same type provided you have specified a style for them. </p>

Rest of the body

</body>

</html>

Example-3:

<html>

<head>

<style>

body {

background-color: #f0f0f0;

font-family: Arial, sans-serif;

}

h1 {

color: green; border-style: solid; border-color: red; border-radius: 5px;

}

p {
color:lime; font-family:arial; font-size:20px; font-style: italic; font-weight: bold; text-align: left;
}

</style>

</head>

<body>

<h1>This is a heading.</h1>

<p>This is a paragraph with embedded styles.</p>

</body>

</html>

Advantages of Internal or Embedded CSS:

Internal CSS allows us to keep the styles close to the HTML content within the same document. This makes it easier to maintain and update styles since we don’t need to switch between different files.
Styles are organized within the same HTML file, making it easier to understand and manage the styling information. This is especially beneficial for smaller projects or single-page applications.
During the early stages of development or prototyping, internal CSS can facilitate quick styling adjustments without the need for creating separate external style sheets.

Disadvantages of Internal or Embedded CSS:

Adding the code to the HTML document can increase the page’s size and loading time.
As the size of the HTML document and the amount of styling information increase, maintaining styles within the same document can become challenging. It may lead to cluttered code and difficulties in finding and updating specific styles.
When multiple developers work on the same project, internal CSS within HTML documents can make collaboration more complex. It’s often preferable to have separate style sheets that developers can work on independently, reducing the likelihood of conflicts.

External CSS:

An external style sheet is a separate text file with .CSS extension. We define all the style rules within this text file and then we can include this file in any HTML document using <LINK> tag. The <LINK> tag goes inside the <HEAD> tag.

This CSS type is a more efficient method, especially for styling a large website. By editing one .css file, we can change entire site at once. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire website by changing one file. Changes made to the external CSS file are reflected across all linked HTML pages.

External CSS is often recommended for larger projects to maintain a clean separation of concerns and facilitate easy maintenance and scalability.

Here is the general syntax of including external CSS file:

<HEAD>

</HEAD>

Example-1:

Code for External Style Sheet:

BODY

{

Background-image: url(“BIRD.jpg”);

}

H1, H2

{

Font-weight: Bold;

Font size: 24 pt;

Color: Red

}

Save the above external style sheet code with file name “EXT.CSS”

Code of the HTML document, which makes use of above Style Sheet:

<HTML>

<HEAD>

<TITLE>LINKING AN EXTERNAL STYLE SHEET</TITLE>

</HEAD>

<BODY>

<H1>WELCOME TO THE WORLD OF STYLE SHEETS</H1>

<H2>This is how to link an external style sheet </H2>

</BODY>

</HTML>

Example-2:

Code for External Style Sheet:

body {
background-color: lightblue;
}
h1 {
color: navy; margin-left:20px; margin-right:10px; border-style: dotted; border-width:thick; text-align: center; font-size:28pt; font-family: verdana; letter-spacing:3px; background-color: grey;
}

p {
color: red; font-family: arial; font-size:16pt; font-style: italic; font-weight: bold; text-align: justify;
}

img {
height:200px; width:200px; border-radius:0.5; border-style: solid; border-width:10px;border-color:green;
}

Code of the HTML document, which makes use of above Style Sheet:

<html>

<head>

<title>external style sheet</title>

</head>

<body>

<h1> External Cascading Style Sheet</h1>

<p>This CSS type is a more efficient method, especially for styling a large website. By editing CSS file, we can change entire site at once. An external style sheet is ideal when the style is applied to many pages. With an external style sheet, we can change the look of an entire website by changing one file. Changes made to the external CSS file are reflected across all linked HTML pages. External CSS is often recommended for larger projects to maintain a clean separation of concerns and facilitate easy maintenance and scalability.</p>

</body>

</html>

Example-3:

Code for External Style Sheet:

a: link

{ color: yellow; }

a: visited

{ color: blue; }

a: active

{ color: green; }

body

{

font-family: Arial;

background-color: aqua;

color: red;

}

h1, h2, h3, h4, h5, h6

{ font-family: Times New Roman; font-weight: bold }

h1 { color: Red; }

h2 { color: green; }

h3 { color: blue; }

h4 { color: yellow; }

h5 { color: lime; }

h6 { color: maroon; }

Save the above external style sheet code with file name “LINK.CSS”

Code of the HTML document, which makes use of above Style Sheet:

<html>

<head>

<title>linking style sheet</title>

</head>

<body>

<p><a href= “ex21.html”> Tables</a>

     <a href= “ex20.html” >Bordered Table </a>          <a href=” ex22.html”>Row-Column heading </a></p>

</body>

</html>

Example-4:

Code for External Style Sheet:

/* styles.css */

body {

background-color: #f0f0f0;

}

h1 {

color: green;

text-align:center;

font-family: Arial, sans-serif;

border: 10px double maroon;

}

p {
font-family: verdana;
font-size: 20px;

border: 5px dashed pink;

}

Code of the HTML document, which makes use of above Style Sheet:

<html>

<head>

<link rel=”stylesheet” href=”styles.css”>

</head>

<body>

<h1>This is a heading.</h1>

<p>This is a paragraph with external styles.</p>

</body>

</html>

Advantages of External CSS:

Since the CSS code is in a separate document, HTML files will have a cleaner structure and are smaller in size.
We can use the same CSS file for multiple pages.
With styles stored in an external file, making updates or modifications becomes more efficient. Changes made to the external style sheet are automatically reflected across all HTML documents linked to that file.
External CSS ensures a consistent look and feel across multiple pages. This is particularly beneficial for websites with a standardized design where maintaining uniformity is essential.

Disadvantages of External CSS:

Pages may not be rendered correctly until the external CSS is loaded.
Uploading or linking to multiple CSS files can increase site’s download time. Each external CSS file requires a separate HTTP request. When a webpage links to multiple external style sheets, the browser has to make multiple requests to fetch each of these files. This can result in increased latency and slower initial page load times, especially on slower network connections.
If the external CSS file fails to load or is unreachable, the styling information will not be applied to the HTML, leading to an unstyled or poorly styled page. This dependency on external resources can impact the website’s reliability.
For small projects or single-page applications, the use of external stylesheets might introduce unnecessary complexity. It could be more straightforward to use internal styles for smaller-scale development.

Total Views: 283