INTRODUCTION TO CSS
1. What is CSS?
- CSS stands for Cascading Style Sheets.
- It’s a stylesheet language used to describe the presentation of a document written in HTML.
2. Why Use CSS?
- Separation of concerns: CSS separates the structure (HTML) from the presentation (styling), making
code more modular and maintainable.
- Consistent styling: CSS allows you to apply consistent styles across multiple pages.
3. How to Include CSS:
- There are three main ways to include CSS in HTML:
- Inline Styles: Using the `style` attribute in HTML tags.
```html
<p style=”color: blue;”>This is a blue paragraph.</p>
```
- Internal Styles: Using the `<style>` tag within the `<head>` section of an HTML document.
```html
<head>
<style>
P ,Color: red-
</style>
</head>
```
- External Styles: Linking to an external CSS file using the `<link>` tag.
```html
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
```
4. Selectors:
- Selectors target HTML elements for styling.
Nishant Agrawal CSS Page 1
- Types of selectors include element selectors, class selectors, ID selectors, and more.
5. Properties and Values:
- CSS rules consist of properties and values.
- Properties define what aspect of the element to style, and values specify how to style it.
FEATURES OF CSS
1. Selector Mechanism: CSS provides a powerful selector mechanism that allows you to target HTML
elements based on various criteria, such as element types, classes, Ids, attributes, and more.
2. Cascading Style Sheets: The “C” in CSS stands for “Cascading,” indicating that styles can cascade from
one style sheet to another.
3. Style Inheritance: CSS supports the inheritance of styles, allowing child elements to inherit styles from
their parent elements.
4. Modularity: CSS allows you to organize styles into separate files, promoting modularity and making it
easier to manage and maintain stylesheets.
5. Responsive Design: CSS enables the creation of responsive designs that adapt to different screen sizes
and devices.
6. Cross-Browser Compatibility: CSS helps ensure a consistent appearance across different web
browsers, reducing the impact of browser-specific rendering issues.
7. Animation and Transitions: CSS supports animations and transitions, allowing developers to create
dynamic and interactive user interfaces without relying on external technologies.
8. Flexibility: CSS provides a wide range of styling options, from basic font and color changes to complex
layouts and animations. This flexibility allows for creative and diverse web designs.
BENEFITS OF CSS
1. Separation of Concerns: CSS promotes the separation of content (HTML) and presentation (styling).
This separation enhances maintainability and facilitates collaborative development.
2. Consistent Styling: CSS enables consistent styling across multiple pages of a website. By applying a
single stylesheet to various pages, you ensure a uniform look and feel.
3. Improved Page Load Times: External CSS files can be cached by browsers, reducing the need to
download styling information for each page visit. This improves page load times and overall website
performance.
4. Ease of Maintenance: With CSS, changes to the visual presentation can be made globally by updating
the stylesheet, making maintenance more efficient.
5. Accessibility: Properly structured and styled HTML, enhanced by CSS, improves accessibility for users
with disabilities. This includes features like contrast adjustments, text resizing, and improved navigation.
Nishant Agrawal CSS Page 2
6. Print-Friendly Styles: CSS allows you to define styles specifically for print, ensuring that printed
versions of web pages are well-formatted and readable.
7. Global and Local Styling: CSS allows you to apply global styles that affect the entire website and local
styles that target specific sections or pages, providing flexibility in styling choices.
CSS SYNTAX
The syntax of CSS (Cascading Style Sheets) consists of a set of rules that define how elements on an
HTML page should be styled. Here’s a basic overview of the CSS syntax:
1. Selectors:
- CSS selectors target HTML elements for styling.
- Example:
```css
H1 ,Color: black; Font-family: ‘Arial’;-
```
2. Properties and Values:
- CSS rules consist of one or more property-value pairs.
- Properties define what aspect of the element to style, and values specify how to style it.
- Example:
```css
H1 ,Font-size: 24px;Color: blue;-
```
3. Declaration Blocks:
- Declarations (property-value pairs) are grouped within curly braces `{}` to form a declaration block.
- Example:
```css
P ,Margin: 10px;
Color:red; -
```
4. Selectors and Declaration Blocks:
- Selectors and their associated declaration blocks together form CSS rules.
- Example:
Nishant Agrawal CSS Page 3
```css
H2 , Color: green;
Font-weight: bold;-
```
5. Comments:
- CSS allows comments to provide explanations or notes within the stylesheet.
- Example:
```css
/* This is a comment in CSS */
Body , Background-color: green;-
```
Here’s a breakdown of the syntax elements:
Selector: Targets HTML elements to be styled.
Declaration Block: Contains one or more declarations (property-value pairs) and is enclosed in curly
braces `{}`.
Declaration: Consists of a property and its corresponding value, separated by a colon.
Property: Specifies what aspect of the element to style.
Value: Specifies how to style the property.
Comments: Begin with `/*` and end with `*/`. They are not interpreted by browsers and are useful for
documentation.
Understanding and mastering CSS syntax is fundamental to applying styles consistently across web
pages.
CSS TYPES
There are three main types of CSS (Cascading Style Sheets) that can be used to style HTML documents.
These are:
1. Inline CSS: Inline CSS is applied directly to an individual HTML element using the `style` attribute.
- Example:
```html
<p style=”color: red; font-size: 16px;”>This is a red and larger text paragraph.</p>
```
Nishant Agrawal CSS Page 4
- Pros:
- Quick and easy to implement.
- Overrides external and internal styles.
- Cons:
- Violates the separation of concerns principle.
- Maintenance can be challenging when styles are applied to multiple elements.
2. Internal or Embedded CSS: Internal CSS is placed within the `<style>` tag in the HTML document,
typically within the `<head>` section.
- Example:
```html
<head>
<style>
P ,Color: blue;
Font-size: 18px;-
</style>
</head>
```
- Pros:
- Allows for more organized styling than inline CSS.
- Multiple styles can be defined for different elements.
- Cons:
- Still involves mixing HTML structure with styles.
- Styles are applied globally to the entire HTML document.
3. External CSS: External CSS is stored in a separate file with a `.css` extension. This file is then linked to
the HTML document using the `<link>` tag.
- Example (external CSS file named “styles.css”):
```css
/* styles.css */
P,
Color: green;
Font-size: 20px;
Nishant Agrawal CSS Page 5
-
```
```html
<head>
<link rel=”stylesheet” type=”text/css” href=”styles.css”>
</head>
```
- Pros:
- Ensures a clear separation of concerns (HTML for structure, CSS for styling).
- Promotes reusability and maintainability.
- Facilitates consistent styling across multiple pages.
- Cons:
- Requires an additional file and an additional HTTP request.
- Initial setup may take more time compared to inline or internal CSS.
CASCADING ORDER:
- When multiple styles conflict, the cascade (or precedence) order determines which style takes
precedence.
- The order of precedence is Inline > Internal > External.
Choosing the appropriate type of CSS depends on factors such as the project’s size, structure, and the
level of styling control required. In general, external CSS is often preferred for larger projects to maintain
a cleaner and more modular codebase.
MULTIPLE STYLE SHEETS
In HTML, you can link multiple style sheets to a single HTML document. This allows you to have different
style sheets for various purposes while maintaining a clean separation of concerns. Here’s how you can
include multiple style sheets:
Method 1: Linking External Style Sheets
HTML:
```html
<head>
<!—Link to the first style sheet
Nishant Agrawal CSS Page 6
<link rel=”stylesheet” type=”text/css” href=”styles1.css”>
<!—Link to the second style sheet
<link rel=”stylesheet” type=”text/css” href=”styles2.css”>
</head>```
styles1.css:
```css
/* styles1.css */
Body ,
Font-family: ‘Arial’;
Background-color: yellow;
-
```
styles2.css:
```css
/* styles2.css */
H1 ,
Color: blue;
Text-decoration: underline;
-
```
Method 2: Combining Multiple Style Sheets into One External File
If you prefer, you can combine multiple style sheets into one external file for efficiency:
HTML:
```html
<head>
<!—Link to the combined style sheet
<link rel=”stylesheet” type=”text/css” href=”combined-styles.css”>
</head>
```
combined-styles.css:
Nishant Agrawal CSS Page 7
```css
/* Combined styles from styles1.css and styles2.css */
Body ,
Font-family: ‘Arial’;
Background-color: yellow;
-
H1 ,
Color: blue;
Text-decoration: underline;
-
```
This approach can reduce the number of HTTP requests, potentially improving page load performance.
Choose the method that best fits your project’s needs and organizational structure. Multiple style sheets
offer flexibility and ease of maintenance, especially in larger projects.
VALUE LENGTHS AND PERCENTAGE
In CSS, various properties can accept different types of values, including lengths and percentages. Here’s
an overview of these value types:
1. Lengths: Length values represent a measurement in a specific unit. Common length units include
pixels (`px`), ems (`em`), rems (`rem`), and percentages (`%`).
- Example:
```css
/* Using pixels */
Div ,
Width: 200px;
Height: 100px;
Font-size: 16px;
-
/* Using em units */
P,
Margin: 1em;
Nishant Agrawal CSS Page 8
Padding: 0.5em;
-
```
- Length values are often used for properties like width, height, margin, padding, and font-size.
2. Percentage: The percentage value is often used in relation to a parent container. It represents a
proportion of the parent element’s size or a property’s value.
- Example:
```css
/* Set the width to 50% of the parent container */
Img ,
Width: 50%;
-
/* Set the font-size to 120% of the parent container’s font-size */
P,
Font-size: 120%;
-
```
- Percentages are commonly used for properties like width, height, and font-size.
3. Auto: The `auto` value is used for some properties to automatically compute the value based on other
factors, such as the size of the content.
- Example:
```css
/* Let the browser automatically calculate the width based on content */
Div ,
Width: auto;
-
```
- The `auto` value is often used for properties like width and margin.
Understanding and appropriately using length units and percentages in CSS allows for flexible and
responsive design, adapting to different screen sizes and devices.
Nishant Agrawal CSS Page 9
SELECTORS IN CSS
Selectors in CSS are patterns that are used to select and style HTML elements. They define which
elements on a webpage the associated styles should be applied to. Here are some commonly used CSS
selectors:
1. Element Selector: Selects all instances of a specified HTML element.
- Example:
```css
P,
Color: blue;
-
```
- This selects all `<p>` elements and changes their text color to blue.
2. ID Selector: Selects a single element with a specific ID attribute.
- Example:
```css
#header ,
Font-size: 24px;
-
```
- This selects the element with the ID “header” and sets its font size to 24 pixels.
3. Class Selector: Selects elements with a specific class attribute.
- Example:
```css
.highlight ,
Background-color: yellow;
-
```
- This selects all elements with the class “highlight” and applies a yellow background color.
4. Grouping Selector: In CSS, grouping selectors allows you to apply the same style rules to multiple
selectors. This helps to keep your stylesheet concise and improves readability. Grouping selectors
involves separating individual selectors with commas.
Nishant Agrawal CSS Page 10
- Example:
```css
h1, h2, h3 ,
Color: navy;
Font-family: ‘Arial’;
-
```
- The style rules (color and font-family) are applied to all `<h1>`, `<h2>`, and `<h3>` elements.
- The selectors (`h1`, `h2`, and `h3`) are grouped together with commas.
5. Universal Selector: The universal selector (`*`) in CSS selects all elements on a webpage. It is a
wildcard character that matches any HTML element.
- Example:
```css
*,
Color:cyan;
Margin: 0;
Padding: 0;
Box-sizing: border-box;
-
```
- The `*` selector is used to target all elements on the page.
- The styles applied (‘color:cyan’;`margin: 0;`, `padding: 0;`, `box-sizing: border-box;`) are commonly used
for resetting default styles and ensuring consistent box models across different browsers.
6. Descendant Selector: Selects an element that is a descendant of another specified element.
- Example:
```css
p b,
Color: green;
-
```
Nishant Agrawal CSS Page 11
- This selects all `<b>` elements that are descendants of an `<p>` element and changes their text
color to green.
7. Child Selector: Selects an element that is a direct child of another specified element.
- Example:
```css
p > b,
Color: red;
-
```
- This selects all `<b>` elements that are direct children of a `<p>` element and changes their text
color to green.
8. Adjacent Sibling Selector: Selects an element that is directly preceded by a specified element.
- Example:
```css
H2 + p ,
Font-weight: bold;
-
```
- This selects all `<p>` elements that are immediately preceded by an `<h2>` element and makes
their text bold.
9. Attribute Selector: Selects elements based on their attributes.
- Example:
```css
Input*type=”text”+ ,
Border: 1px solid;
-
```
- This selects all `<input>` elements with the attribute `type=”text”` and gives them a border.
CSS – PSEUDO CLASSES
Nishant Agrawal CSS Page 12
In CSS, pseudo-classes are used to select and style elements based on their state or position within the
document tree. Pseudo-classes are denoted by a colon (`:`) followed by the pseudo-class name. Here are
some common pseudo-classes:
1. `:hover`: Selects and styles an element when the user hovers over it with the mouse.
- Example:
```css
A:hover ,
Color: red;
Text-decoration: underline;
-
```
2. `:active`: Selects and styles an element when it is being activated (clicked or pressed).
- Example:
```css
Button:active ,
Background-color: gray;-
```
3. `:focus`: Selects and styles an element when it gains focus, typically through keyboard navigation.
- Example:
```css
Input:focus ,
Border: 2px solid blue;
-
```
These are just a few examples of pseudo-classes in CSS. They provide a way to apply styles based on
various conditions, enhancing the interactivity and responsiveness of a webpage.
BACKGROUND IN CSS
In CSS, the `background` property is used to set the background styling for an element. It can include
various sub-properties to control aspects like color, image, position, repeat, and more. Here’s an
overview of the `background` property:
Basic Background Color:
Nishant Agrawal CSS Page 13
```css
H1 ,
Background-color: #f0f0f0; /* Hex color code or color name */
-
```
Background Image:
```css
P,
Background-image: url(‘background-image.jpg’); /* Path to the image file */
Background-repeat: no-repeat; /* Options: repeat, repeat-x, repeat-y, no-repeat */
-
```
Combined Background (Color and Image):
```css
H1 ,
Background: red url(‘background-image.jpg’) center/cover no-repeat;
-
```
Background Position:
```css
P,
Background-position: center top; /* Options: center, left, right, top, bottom, etc. */
-
```
Background Attachment (Fixed or Scroll):
```css
Div ,
Background-attachment: fixed; /* Fixed background while scrolling */
-
```
Nishant Agrawal CSS Page 14
These are some examples of using the `background` property in CSS. Depending on your design needs,
you can adjust these properties to create visually appealing backgrounds for your HTML elements.
CSS CURSOR
In CSS, the `cursor` property is used to define the type of cursor that should be displayed when the
mouse pointer is over an element. It allows you to enhance the user experience by indicating the
interactive nature of certain elements. Here are some common values for the `cursor` property:
1. Pointer Cursor: Indicates a clickable link or button.
```css
Button ,
Cursor: pointer;
-
```
2. Default Cursor: The default cursor for the browser.
```css
Div ,
Cursor: default;
-
```
3. Text Cursor: Indicates text can be selected.
```css
P,
Cursor: text;
-
```
4. Move Cursor: Indicates the element can be moved.
```css
.draggable ,
Cursor: move;
-
```
Nishant Agrawal CSS Page 15
5. Resize Cursors: Indicates the element can be resized in different directions.
```css
.resizable ,
Cursor: nw-resize; /* Northwest */
-
```
6. Help Cursor: Indicates that help is available for the element.
```css
.help ,
Cursor: help;
-
```
7. Crosshair Cursor: Displays a crosshair cursor, often used for selecting a region.
```css
.selectable ,
Cursor: crosshair;
-
```
8. Not-allowed Cursor: Indicates that the specified action or interaction is not allowed.
```css
.disabled ,
Cursor: not-allowed;
-
```
These are just a few examples of the `cursor` property values. The appropriate cursor style depends on
the context and functionality of the element.
TEXT / FONTS
Here’s an example of CSS styles for text, including color, background-color, text-decoration, text-align,
vertical-align, and text-indent:
```css
Nishant Agrawal CSS Page 16
/* Color and Background Color */
P,
Color: #333; /* Set text color */
Background-color: #f0f0f0; /* Set background color */
-
/* Text Decoration */
A,
Text-decoration: underline; /* Underline links */
-
/* Text Alignment */
H1 ,
Text-align: center; /* Center-align text */
-
/* Vertical Alignment */
P,
Vertical-align: middle; /* Align text vertically in the middle */
-
/* Text Indentation */
Blockquote ,
Text-indent: 20px; /* Set text indentation */
-
```
In this example:
- `color` sets the text color.
- `background-color` sets the background color.
- `text-decoration` controls the text decoration, such as underlining links.
Nishant Agrawal CSS Page 17
- `text-align` aligns the text within its container.
- `vertical-align` adjusts the vertical alignment of inline or table-cell elements.
- `text-indent` specifies the indentation of the first line in a block-level element.
Adjust the values according to your design preferences and requirements. These styles provide a starting
point for customizing the appearance of text on your web page.
Here’s an example of CSS styles for text transformations, white space handling, letter spacing, word
spacing, and line height:
```css
/* Text Transform */
H2 ,
Text-transform: uppercase; /* Transform text to uppercase */
-
/* White Space */
P,
White-space: nowrap; /* Prevent line breaks within the paragraph */
-
/* Letter Spacing */
H1 ,
Letter-spacing: 2px; /* Add 2 pixels of spacing between letters */
-
/* Word Spacing */
H2 ,
Word-spacing: 4px; /* Add 4 pixels of spacing between words */
-
/* Line Height */
Nishant Agrawal CSS Page 18
Ul ,
Line-height: 1.5; /* Set the line height to 1.5 times the font size */
-
```
In this example:
- `text-transform` transforms the text to uppercase.
- `white-space` controls how white space inside an element is handled.
- `letter-spacing` adjusts the spacing between characters.
- `word-spacing` adjusts the spacing between words.
- `line-height` sets the height of a line of text.
These styles can be customized based on your design preferences. Use them to achieve the desired text
formatting on your web page.
Here’s an example of CSS styles for font properties including `font-family`, `font-size`, `font-style`, `font-
variant`, and `font-weight`:
```css
/* Font Family */
Body ,
Font-family: Arial; /* Specify the font family */
-
/* Font Size */
H1 ,
Font-size: 24px; /* Set the font size for heading 1 */
-
/* Font Style */
H2 ,
Font-style: italic; /* Apply italic style to heading 2*/
-
Nishant Agrawal CSS Page 19
/* Font Variant */
P,
Font-variant: small-caps; /* Display text in small caps */
-
/* Font Weight */
Strong ,
Font-weight: bold; /* Set bold font weight for strong text */
-
```
In this example:
- `font-family` specifies the font family for the entire `body`.
- `font-size` sets the font size for `h1` headings.
- `font-style` applies italic style to emphasized text (`em`).
- `font-variant` displays text in small caps for paragraphs (`p`).
- `font-weight` sets a bold font weight for strong text (`strong`).
Adjust the values and properties according to your design requirements and preferred typography.
Nishant Agrawal CSS Page 20
