Originally, HTML aimed to allow content providers to focus solely on the document’s content while leaving its appearance to be managed by browsers. Authors would mark up document content using tags like <p>, <h1>, <ul>, <table>, <img>, indicating semantic meaning (“This is a paragraph”, “This is heading Level 1”, “This is an unordered list”, “This is a table”, “This is an image”). Browsers then determined how to display or present this content to web users.
However, HTML spiraled out of control in its early years. Many tags and attributes were created not for semantic meaning but for appearance and display styles (e.g., <font>, <center>, align, color, bgcolor, link, alink, vlink focused on font, color, and alignment). These tags cluttered documents, making content creation and maintenance incredibly difficult. Over time, graphic designers were brought in to handle appearance, allowing content providers to focus solely on content. Thus, the need arose to separate content and presentation in HTML documents.
CSS became HTML’s companion, enabling web designers to enhance web pages while content providers focused on content with HTML.
CSS indeed stands as a language in its own right, boasting a syntax entirely distinct from both HTML and JavaScript. (Just how many syntaxes must one master for web programming?!)
Here are the syntactic rules:
A style rule comprises a selector, determining the HTML elements it influences, and a series of style property name:value pairs enclosed in braces {…}, as illustrated below:
selector {
property-name-1: property-value-1a, property-value-1b, ... ;
property-name-2: property-value-2a, property-value-2b, ... ;
......;
}For example:
body { /* Apply to <body> and possibly its descendants */
font-family: "Open Sans", Helvetica, Arial, sans-serif;
font-size: 16px;
margin: 10px auto; /* top-down right-left */
padding: 0;
}This selector targets the <body> tag, thereby applying the defined style to the <body>…</body> element. Many CSS properties, such as color and font, are inherited by descendants unless overridden by other style rules.
The name:value pairs are separated by semicolons “;”. While the last semicolon before the closing brace “}” can be omitted, I recommend keeping it to ensure easier inclusion of new entries without missing a “;”.
Name and value are separated by a colon “:” in the format name:value. Multiple values for the same property name are separated by commas “,” (e.g., font-family). However, multiple parts of the same property value are separated by spaces ” ” (e.g., margin, which has a value with 4 parts).
Values containing spaces must be quoted, such as “Times New Roman” or ‘Times New Roman’. Extra whitespace (blank, tab, and newline) is disregarded.
If the same set of styles applies to multiple elements, selectors can be grouped together in a single rule (called a Group-Selector). Tag names are separated by commas “,”. For instance, the following rule applies to elements <h1> to <h6>:
h1, h2, h3, h4, h5 {
text-align: center;
font-family: Quicksand, "Open Sans", Helvetica, Arial, sans-serif;
}Inline, Internal and External Styles
There exist three locations where you can define style rules:
- Inline Style: These are inserted directly within a specific HTML opening tag via the style attribute, formatted as style=”style-rules”. These rules affect only that particular HTML element.
- Internal (Embedded) Style Sheet: This type is embedded within <style>…</style> tags in the HEAD section of the HTML document. The styles apply to the entire document.
- External Style Sheet (Recommended): This type is stored in an external file, which is then linked to HTML documents using a <link> element in the HEAD section. Employing the same external style sheet across all HTML pages in your website ensures consistency in appearance. Inline Styles
To employ inline styles on an HTML element, list the style properties within the style attribute of the opening tag. For instance,
<!DOCTYPE html>
<html>
<body>
<p style="font-size:16px; font-family:monospace">This paragraph uses 16px monospace font.</p>
<p>This paragraph uses default font.</p>
<p>This paragraph uses <span style="font-size:12px">12px inside this span</span>
but default font size here.</p>
</body>
</html>This paragraph uses 16px monospace font.
This paragraph uses default font.
This paragraph uses 12px inside this span but default font size here.
Explanation
- This
<p>(paragraph) element has inline CSS styles applied to it. Thestyleattribute defines the font size as 16 pixels (font-size:16px) and the font family as monospace (font-family:monospace). So, the text within this paragraph will be displayed in a monospace font with a size of 16 pixels. - regular <p> paragraph without any inline styles, so it will use the default font settings of the browser.
- another paragraph that contains a
<span>element with inline CSS. The text inside the span will have a font size of 12 pixels (font-size:12px). However, the text outside the span will use the default font size.
Internal (Embedded) Styles
Embedded styles are defined within the <style>...</style> tags in the HEAD section. For example,
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:white;
}
h2 {
color:white;
background-color:black;
}
p.monospace {
font-size:16px;
font-family:monospace;
}
p.f20px {
font-size:20px;
}
</style>
</head>
<body>
<h2>H2 is white on black</h2>
<p>This paragraph is normal.</p>
<p class="monospace">This paragraph uses 16-px monospace font.</p>
<p class="f20px">This paragraph uses 20-px font.</p>
</body>
</html>
H2 is white on black
This paragraph is normal.
This paragraph uses 16-px monospace font.
This paragraph uses 20-px font.
External Styles
The style rules are defined in an external file, and referenced in an HTML document via the <link> element in the HEAD section.
For example, we define these style rules in a file called “TestExternal.css“:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="stylel.css" rel="stylesheet">
</head>
<body>
<h2>H2 is white on black</h2>
<h2 id="green">This H2 is green on black</h2>
<p>The default paragraph uses 12-pt small-cap font.</p>
<p class="f24pt">This paragraph uses 24-pt, italics font with text-indent of 1cm.
It inherits the small-cap property from the default paragraph selector.</p>
</body>
</html>/* style.css */
body {
background-color:cyan; color:red;
}
h2 {
background-color:black;
color:white;
text-align:center;
}
p {
font-size:12pt;
font-variant:small-caps;
}
p.f24pt {
font-style:italic;
font-size:24pt;
text-indent:1cm;
}
#green {
color:green;
}CSS Selectors
CSS selectors are powerful tools that allow developers to target specific HTML elements and apply styling to them. Understanding CSS selectors is essential for building well-structured and maintainable web pages. In this comprehensive guide, we’ll explore CSS selectors from beginner to advanced levels, covering everything you need to know to master the art of selecting and styling elements in your web projects.
Getting Started with CSS Selectors
1. Basic Selectors
Type Selector
p {
color: blue;
}
Targets all <p> elements and sets their text color to blue.
Class Selector
.special {
font-weight: bold;
}
Targets elements with the class special and makes their text bold.
ID Selector
#main-heading {
font-size: 24px;
}
Targets the element with the ID main-heading and sets its font size to 24 pixels.
Universal Selector
* {
margin: 0;
padding: 0;
}
Targets all elements and removes their default margin and padding.
2. Attribute Selectors
Attribute Exists
input[type="text"] {
border: 1px solid #ccc;
}
Targets all <input> elements with a type attribute set to text and adds a border.
Attribute Value
a[href="https://www.example.com"] {
color: green;
}
Targets all <a> elements with an href attribute set to https://www.example.com and changes their color to green.
3. Pseudo-classes
:hover
button:hover {
background-color: lightblue;
}
Targets <button> elements when hovered over and changes their background color to light blue.
:nth-child
ul li:nth-child(odd) {
background-color: #f2f2f2;
}
Targets odd-numbered <li> elements within <ul> and sets their background color to light gray.
4. Pseudo-elements
::before
p::before {
content: ">>";
}
Inserts >> before the content of every <p> element.
::after
blockquote::after {
content: " - John Doe";
font-style: italic;
}
Inserts - John Doe after the content of every <blockquote> element in italic font style.
Advanced CSS Selectors
1. Combinators
Descendant Selector
article p {
font-size: 16px;
}
Targets <p> elements that are descendants of <article> elements and sets their font size to 16 pixels.
Child Selector
ul > li {
list-style-type: square;
}
Targets <li> elements that are direct children of <ul> elements and changes their list style to squares.
Adjacent Sibling Selector
h2 + p {
font-weight: bold;
}
Targets <p> elements that are immediately preceded by an <h2> element and makes their text bold.
General Sibling Selector
h3 ~ p {
color: gray;
}
Targets <p> elements that are siblings of <h3> elements and changes their text color to gray.
2. Grouping Selectors
h1, h2, h3 {
color: blue;
}
Targets <h1>, <h2>, and <h3> elements and sets their text color to blue.
3. Attribute Selectors (Advanced)
Starts With
a[href^="https://"] {
color: green;
}
Targets all <a> elements with an href attribute that starts with https:// and changes their color to green.
Ends With
a[href$=".pdf"] {
font-weight: bold;
}
Targets all <a> elements with an href attribute that ends with .pdf and makes their text bold.
Contains
input[type="text"][placeholder*="Name"] {
background-color: #f7f7f7;
}
Targets <input> elements with a type attribute set to text and a placeholder attribute containing the word “Name”, and sets their background color to light gray.
CSS COLORS
CSS allows developers to manipulate colors with ease, enabling them to create visually stunning and appealing designs. In this comprehensive guide, we will explore CSS colors from beginner to advanced levels, covering everything you need to know to master the art of color manipulation in your web projects.
Getting Started with CSS Colors
1. Basic Color Properties
In CSS, colors can be specified using a variety of methods, including predefined color names, hexadecimal notation, RGB, RGBA, HSL, and HSLA values.
Predefined Color Names
p {
color: red;
background-color: lightblue;
}
Hexadecimal Notation
h1 {
color: #ff0000; /* Red */
background-color: #00ff00; /* Green */
}
RGB and RGBA Values
.
div {
color: rgb(255, 0, 0); /* Red */
background-color: rgba(0, 255, 0, 0.5); /* Semi-transparent Green */
}
HSL and HSLA Values
span {
color: hsl(0, 100%, 50%); /* Red */
background-color: hsla(120, 100%, 50%, 0.3); /* Semi-transparent Green */
}
2. Opacity and Transparency
CSS allows you to control the opacity of colors using the opacity property or by specifying an alpha value in RGBA or HSLA color notations.
h2 {
color: rgba(255, 0, 0, 0.5); /* Semi-transparent Red */
}
3. Color Keywords
CSS also provides a set of color keywords that represent common colors. These keywords include transparent, currentColor, and others.
button {
color: currentColor; /* Use the color of the parent element */
background-color: transparent; /* Transparent background */
}
Advanced CSS Color Techniques
1. Gradient Backgrounds
CSS gradients allow you to create smooth transitions between two or more specified colors. Gradients can be linear or radial.
Linear Gradient
.header {
background-image: linear-gradient(to right, red, blue);
}
Radial Gradient
.footer {
background-image: radial-gradient(circle, red, yellow, green);
}
2. Color Functions
CSS provides several color manipulation functions that allow you to modify existing colors dynamically. These include lighten(), darken(), saturate(), desaturate(), and more.
a:hover {
background-color: lighten(blue, 20%); /* Lighten the background color on hover */
}
3. CSS Variables
CSS variables (custom properties) enable you to define reusable values, including colors, which can be easily updated and manipulated throughout your stylesheet.
:root {
--primary-color: #007bff; /* Define a primary color variable */
}
.button {
background-color: var(--primary-color); /* Use the primary color variable */
}
4. Blend Modes
Blend modes allow you to specify how overlapping elements should blend their colors. This can create interesting visual effects.
.overlay {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent Red */
mix-blend-mode: multiply; /* Blend with underlying colors using the multiply mode */
}
Mastering CSS colors is essential for creating visually appealing and engaging web designs. By understanding the various color properties, techniques, and advanced features available in CSS, you can take your web development skills to the next level. Experiment with different color combinations, gradients, and effects to unleash your creativity and make your web projects stand out.
