CSS

Posted by saadrizwann09@gmail.com October 22, 2024

Introduction

CSS is a style sheet language used for informing the browser how to present a document. It uses markup language for describing the presentation semantics of a document. In other words, an HTML document defines the content of the file whereas the CSS file defines how HTML elements are to be displayed.

Cascading Style Sheet 3

CSS is a mechanism used for adding style such as fonts, colors, and spacing to Web documents. CSS has multiple levels and profiles. Each level of CSS is updated from the earlier version, by adding new features. CSS version are denoted as CSS1, CSS2, CSS3, and CSS4, where the numbers are different for each version or level.

CSS3 is divided into multiple documents called “modules”. Each of these modules have new capabilities or extends the features present in CSS2. Drafting of CSS3 started when publication of the original CSS2 recommendation was released. The first CSS3 drafts were released on June 1999. CSS extends variety of new ways to create an impact with any designs, with quite a few important changes.

Modules

Since CSS3 is available as modules and is still evolving, there are many modules having different stability and status. Out of the fifty modules published by the CSS working group, only three modules are released as recommendations and they are as follows:

  • CSS Color Level 3
  • CSS Namespaces
  • Selectors Level 3

The following modules are stable and in recommendation stage:

  • Media Queries
  • Style Attributes

The following modules are in testing phase and in recommendation stage:

  • Backgrounds and Borders Level 3
  • Image Values and Replaced Content Level 3
  • Marquee
  • Multi-column Layout
  • Speech
  • Mobile Profile 2.0
  • TV Profile 1.0

The following modules are in refining phase and in working draft stage:

  • Transforms
  • Transitions
  • Values and Units Level 3
  • Print Profile

The following modules are in revising phase and in working draft and recommendation stages:

  • Animations
  • Flexible Box Layout
  • Fonts Level 3
  • Paged Media Level 3
  • Text Level 3
  • Basic User Interface Level 3
  • Writing Modes Level 3
  • CSSOM View

The following modules are in exploring phase and in working draft stage:

  • Cascading and Inheritance Level 3
  • Conditional Rules Level 3
  • Grid Layout
  • Grid Template Layout
  • Line Grid
  • Lists Level 3
  • Tables Level 3
  • Selectors Level 4
  • Object Model

The following modules are in rewriting phase and in working draft stage:

  • CSS Line Layout Level 3
  • CSS Ruby
  • CSS Syntax Level 3

The following modules are in abandoned phase and in working draft stage:

  • Behavioral Extensions to CSS
  • CSS Hyperlink Presentation

CSS Syntax

The general syntax of CSS consists of three parts namely, selector, property, and value. A selector is an HTML element for which you want to specify the style or the formatting instruction. A property of a selected element is a CSS property that specifies the type of the style to be applied to the selector. CSS allows controlling the appearance of the content by providing various properties. These properties include text properties, positioning properties, font properties, color properties, and so on. A value refers to the value of the CSS property. A CSS property can have multiple values. For example, the values of the color property include red, green, yellow, and so on.

The property and the value for a selector are separated with a colon (:). They are enclosed within the curly brackets ({}) that is known as the declaration block.

You can have various combinations to specify rules for HTML elements. First, you can specify multiple property-value pairs for a selector, which are separated by a semicolon (;) within the declaration block. Second, you can specify multiple selectors for a single property by grouping the selectors. To group the selectors, the selectors are separated by commas followed by a declaration block of properties and values. Third, you can specify properties for multiple selectors. Here, the comma-separated selectors are followed with multiple property-value pairs.

css

Length Measurement Units

CSS uses various units of measurements for specifying size of the font, width and height of margins, and so on. These units measure the horizontal and vertical length of the content. CSS supports two types of length measurement units namely, relative and absolute.

  • Relative: Relative length specifies the length units related to other length property that are calculated in comparison to a current value.
  • Absolute: Absolute lengths are specified when the Web page designer is aware of the physical properties of the output device. These are specific and fixed values.
  • Percentages: Percentage allows specifying the length of the content, which is relative to another value

Types of Style Sheets

There are three types of style sheets namely, inline, internal or embedded, and external style sheets. An inline style sheet uses the style attribute within an HTML element to specify the style for HTML elements.

An internal style sheet is also included within the HTML document. However, it is defined using the style element within the style element. The style rules appear in a declaration block for each HTML element under the style element. The type attribute of the style element specifies the content type, which is text /css. This means that the content under the style element is CSS code. You can specify any combinations of specifying style rules.
The style rules specified for an element will be applied to all the sub-elements. Internal style sheets are useful when styles are to be applied to a specific Web page.

Internal / Embedded Styles

Internal styles are placed inside the section of a particular Web page source code. These styles can be re-used in the same Web page in which they are placed.

<head>
   <meta charget=nutf-8">
   <title>Sample HTML5 Structure</title>
   ‹style>
   H1,H2{
   margin: 0px;
   font-Size: 1.5em;
   }
   footer{
   background-color: #999;
   text-align: center;
   }
   </style>
</ head>

inside the < style> tag, CSS styles for<H1>,<H2>and < footer › tags are defined. This can be re-used in the same Web page multiple times.

Inline Styles

Inline styles are placed directly inside an HTML element. A Web designer cannot use the style builder to create an inline style. Inline style cannot be reused at any point of time in a Web page.
Code Snippet 1 demonstrates the use of an inline style for tag.

Code Snippet 1:

<P>style-"font-size:14px; color: purple;”>＜/p>

External Style Sheet

An external CSS is defined in a separate file and is saved with the . css extension. It provides the benefit of reusability by implementing common style rules for multiple HTML pages. Hence, external CSS are widely used to provide a consistent look across the Web pages of a Web site.

BODY
{
  background-color: gray:
  Font-family: arial;
  Font-style: italic;

}

shows an example of HTML code using an external CSS style sheet.

<! DOCTYPE HTML>
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="body.css" />
‹TITLE>webex e-Server</TITLE>
</HEAD>
‹BODY>
This is the fastest web server..!!
</BODY>
< HTML>

Selectors

Selectors refer to the HTML elements with the styles the users want to apply to them. The three different types of CSS selectors are as follows:

  • Type selector
  • Class selector
  • ID selector
  • Universal selecton

Type Selector

A type selector simply specifies the element name along with the styles to be appli to that element. This results in applying the specified styles to all the occurrence of th element in a Web page. Here, the styles are specified only once for an HTML element a are applied to all the occurrences of that element.

Class Selector

A class selector matches elements, whose class attribute is set in an HTML page and applies styles to the content of all those elements. For example, if there are span and div elements in a Web page with their class attributes set, the style specified for the class selector will be applied to both the elements. A class selector starts with a period followed by the value of the class attribute.

ID Selector

An ID selector matches an element whose id attribute is set in an HTML page and applies styles to the content of that element. The ID selector specifies styles for an element whose id attribute is set to a unique value.

An ID selector starts with the hash symbol (#) followed by the id attribute’s value and the declaration block.

Universal Selector

The universal selector can be applied to all elements in the document. This means that it applies the specified styles to the content of all the elements. It is represented by an asterisk (*) sign. For example, universal selector is used define the font family for all the elements as shown in Code Snippet 3.

Code Snippet 3:

*{
font-family: Verdana, Calibri, sans-serif;
}

Generic Cascading Order

Consider a scenario where you have multiple style sheets defined for an HTML page.
These style sheets might have various selectors and multiple styles defined for an HTML element. Therefore, W3C has defined some rules for applying styles to an HTML element.

These rules are as follows:

  • Gather all the styles that are to be applied to an element.
  • Sort the declarations by the source and type of style sheet. The source specifies the origin from where the styles are rendered.

The highest priority is given to the external style sheet defined by an author. The next priority is of the reader, which can be a software that reads the content (screen reader software), and the last priority is of the browser.

  • Sort the declarations by the priority of a selector, where the ID selector has the highest priority.
  • Sort the declaration according to the specified order.

Comments

A comment refers to the descriptive text that allows a Web page designer to provide information about the CSS code. Comments make the program more readable and help the designer to explain the styles specified for elements. This is helpful when other Web designers analyze the CSS code.
The browser can identify comments as they are marked with special characters, which are
‘/’ and’ /’. When the browser encounters these symbols, the text within them are ignored and are not displayed in the browser. You can have single-line and multi-line comments in the CSS file.

Grouping and Nesting of Selectors

In style sheets there are often elements with the same style.
Code Snippet 4 demonstrates elements with same style.

Code Snippet 4:

h1
{
 color: green;
}
h2
{
 color: green;
} 
p
{
 color: green;
}

To reduce the code, developers can group selectors. Separate each selector with a comma.
Code Snippet 5 displays the grouping of selectors.

Code Snippet 5:

h1, h2, p
{
  color: green;
}

t is also possible to apply a style for a selector within a selector. Code Snippet 6 demonstrates the nesting of selectors.

Code Snippet 6:

p
{
 color: green;
}
. changed
}
background-color: red
}

In the code, a style is specified for all the paragraphs and another style is specified for all elements whose class attribute has the value set to changed.

Pseudo Class

Consider a scenario where a Web site consists of multiple Web pages linked through hyperlinks. Browse through various Web pages by randomly clicking the links within the main page. At times, it might happen that unknowingly the same Web page get open that you have already visited. In such a case, you might feel the need for a mechanism that could differentiate the already visited links from the remaining ones. In CSS, this is possible by using pseudo classes.

Pseudo classes allow the users to apply different styles to the elements such as buttons, hyperlinks, and so on.

Styles to Hyperlink

CSS can be used to change the appearance and behavior of hyperlinks. To do this, use the following selectors/pseudo-classes:

  • a
  • a:link
  • a: visited
  • a: hover
  • a:active

This selectors/pseudo classes represent the ‘anchor’ element (specified using the HTML ‘a’ tag) and its various states.

There are two other ways to assign hyperlink styles. They are as follows:

1. Div specific
2. Link specific

ID Specific Hyperlink Styles

A hyperlink styles can be created and assigned to a specific div. This will have all the hyperlinks present within the div to follow the specified rules. It is irrelevant if the div is an (#) id or (.) class.

Class Specific Hyperlink Styles

Specific styling can be assigned to a specific type of hyperlink. This is achieved by creating the style rules in the CSS. For this type of hyperlink styling, a class is used generally than an id. A point to note that an id can only be used once on a page whereas a class can be used multiple times as required.


Tags: