Introduction to CSS3 - Basics of Styling

Zia

2 Followers

Follow

Jun 15, 2024

-

0 sec read

696

0

0

0

Introduction

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

Cascading Style Sheet 3

CSS is a mechanism used for adding styles 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 versions are denoted as CSS1, CSS2, CSS3, and CSS4, where the numbers are different for each version or level.

Note - The drafting of CSS4 was started by W3C on Sep 29, 2009. However, it is currently not supported By any Web browser.

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

Modules

Since CSS3 is available as a module and is still evolving, many modules have 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 at Level 3
  
  

The following modules are stable and at the recommendation stage:

• Media queries
• CSS style attributes
  
  

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

• CSS Backgrounds and Borders Level 3
• CSS Image Values and Replace Content Level 3
• CSS Marquee
• CSS Multi-column layout
• CSS Speech
• CSS Mobile Profile 2.0
• CSS TV Profile 1.0
  
  

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

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

The following modules are in the revised phase and the working draft and recommendation stage:

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

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

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

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

• CSS Line Layout Level 3
• CSS Ruby
• CSS syntax Level 3
  
  

The following modules are in the abandoned phase and the 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 a style or formatting instruction. A property of a selected element is a CSS property that specifies the type of style to be applied to the selector. CSS allows controlling the appearance of 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 a 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 of a selector are separated by a colon (:). They are enclosed within the curly brackets ( {} ) which 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 by multiple property-value pairs.

Length Measurement Units

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

Relative:

Relative length specifies the length units related to other length properties that are calculated in comparison to a current value.

Lists the relative length units.

• em: Specifies the font size (height) of a particular font. The em unit is relative to the value of the font-size property of the selector.
• ex: Specifies the 'x-height' of a particular font. The 'x-height' value is approximately half the font size or the height of the lowercase letter 'x'.
• px: Specifies the size in pixels, which is relative to the screen of the device.

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.

Lists the absolute lengths.

• in: Specifies the size in inches, where 1 inch = 2.54 centimeters.
• cm: Specifies the size in centimeters.
• mm: Specifies the size in millimeters.
• pt: Specifies the size in points, where 1 point = 1/72th of an inch.
• pc: Specifies the size in picas, where 1 pica = 12 points.
  
  
  

Percentage:

Percentage allows specifying the length of the content, which is relative to another value.

The CSS code specifies the styles for the H1 element in the figure. The font-size property is set to a value of 120%. This means that the size of the header will appear 20% greater than its current size. The line-height property is set to the value of 200%. This means that the height of the line will be double the value of the font-size property.

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 of HTML elements.

An internal style sheet can also be 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 combination of specified style rules. The style rules specified for an element will apply to all sub-elements. Internal style sheets are useful when styles are used for a specific Web page.

1. Internal/Embedded Styles

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

2. Inline Styles

Inline styles are placed directly inside an HTML element. A Web designer cannot use the style builder to create an inline style. An inline style cannot be reused at any point in time on a Web page.

3. External Style Sheet

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 is widely used to provide a consistent look across the Web pages of a Website.