CSS: Cascading Style Sheets
CSS functions as a style language that dictates the presentation of an HTML or XML file, encompassing XML variations like SVG, MathML, or XHTML. It defines the appearance of elements on various platforms such as screens, printouts, speech, and more.
CSS stands as a fundamental language within the open web environment, adhering to W3C standards across various Web browsers. In the past, different segments of the CSS standard underwent simultaneous development, enabling the versioning of the latest recommendations. You might have come across references to CSS1, CSS2.1, and perhaps even CSS3. It's important to note that CSS3 and CSS4 are not in existence; the current practice is to refer to everything simply as CSS without any specific version number.
The Basics of Style Sheets
Style sheets are a significant breakthrough for Web page designers, allowing them to improve the aesthetic of their pages. People are more interested in the content of their documents than the appearance in the scientific contexts where the web was developed. As more people found the web, the constraints of HTML became a source of ongoing dissatisfaction, and authors were obliged to work around HTML's aesthetic limits. While the goals were noble -- to improve the display of Web sites -- the strategies used to do this had unintended consequences. These strategies work for some individuals part of the time but only for some of the time. They are as follows:
- Making use of proprietary HTML extensions
- Creating pictures from words
- Using pictures to regulate white space
- Tables are used for page layout.
- Instead of using HTML, write a program.
These approaches notably elevate the intricacy of websites, offer restricted adaptability, encounter interoperability challenges, and pose challenges for individuals with disabilities.
Style sheets address these problems by overriding HTML's limited formatting options. They provide an easy way to adjust the spacing between lines of text, the indentation, color schemes for text and backgrounds, font sizes and styles, and various other design elements.
CSS (Cascading Style Sheets) are employed to format web pages containing HTML elements. It manages the background color, size of the font, typeface, color, and additional properties of web page elements.
CSS is classified into three categories, which are listed below:
- Inline CSS
- Internal or Embedded CSS
- External CSS
Inline CSS
To apply styling to a particular HTML element, employ inline CSS. Selectors are not required in this case; instead, you must include the style property within each HTML tag.
Considering the need to style each HTML element individually, this type of CSS is not recommended. Implementing inline CSS may complicate website maintenance significantly.
HTML's inline CSS, on the other hand, also serves its purposes. For example, in situations where styling needs to be applied to a single element exclusively and there is no access to external CSS files.
<!DOCTYPE html>
<html>
<head>
<title>Example for Inline CSS</title>
</head>
<body>
<p style="color: red;
font-size:60px;
font-style: bold;
text-align: left;">
Welcome back!!!
</p>
</body>
</html>
Output
Internal CSS
You need to incorporate a <style> element within the <head> section of your HTML document to apply internal or embedded CSS styles.
A single webpage can be efficiently formatted using this CSS style. However, applying this style to multiple pages can be time-consuming as CSS rules need to be incorporated into each page of your site.
How to utilize internal CSS is as follows:
- Locate the opening <head> tag on your HTML page.
- Place the following code immediately below the <head> tag.