Scribd
Upload
3 views

Introduction to CSS1

CSS, or Cascading Style Sheets, is essential for styling web pages, controlling the visual presentation of HTML elements. It includes syntax for selectors, properties, and values, allowing for detailed customization of layouts, colors, and responsive designs. CSS also supports external files, inheritance, specificity, and various frameworks to enhance web development efficiency.

Uploaded by

vaalinandhan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Introduction to CSS1

CSS, or Cascading Style Sheets, is essential for styling web pages, controlling the visual presentation of HTML elements. It includes syntax for selectors, properties, and values, allowing for detailed customization of layouts, colors, and responsive designs. CSS also supports external files, inheritance, specificity, and various frameworks to enhance web development efficiency.

Uploaded by

vaalinandhan
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 64

Introduction to CSS:

CSS, or Cascading Style Sheets, is a fundamental technology used for

styling web pages. It works hand in hand with HTML to control the visual

presentation of web content.

What is CSS?

CSS stands for Cascading Style Sheets. It's a style sheet language that

defines the layout, formatting, and appearance of HTML elements on a web

page. By using CSS, you can control things like colors, fonts, spacing, and

positioning of elements.

The word cascading means that a style applied to a parent element will

also apply to all children elements within the parent. So, if you set the color of

the body text to "blue", all headings, paragraphs, and other text elements within

the body will also get the same color (unless you specify something else)!

How Does CSS Work?

CSS works by associating style rules with HTML elements.

These rules specify how the content should be displayed in the browser.

CSS can be applied to HTML elements directly using inline styles,

internally within the HTML file using the <style> tag, or externally by linking to

an external CSS file.


Syntax:

CSS syntax consists of selectors and declaration blocks. Selectors target

HTML elements, and declaration blocks contain one or more property-value

pairs, separated by colons, defining the style rules.

selector

property: value;

Selectors:

Selectors are patterns used to select the HTML elements you want to style.

They can target elements based on their tag names, classes, IDs, attributes, or

their relationships with other elements.

Tag Selector: p {...}

Class Selector: .classname {...}

ID Selector: #idname {...}

Attribute Selector: [attribute="value"] {...}

Descendant Selector: parentElement childElement {...}


Properties and Values:

CSS properties define the visual appearance of HTML elements, and each

property accepts specific values.

Examples of properties include color, font-size, background-color, margin,

padding, border, etc.

Comments:

You can add comments in CSS using /* */. Comments are ignored by

browsers and are helpful for documenting your CSS code.

/* This is a comment */

External CSS:

To keep your CSS separate from your HTML code and to apply styles

across multiple pages, you can create an external CSS file and link it to your

HTML document using the <link> tag.

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>
Inheritance and Specificity:

CSS styles can be inherited from parent elements, but they can also be

overridden by more specific selectors. Understanding how inheritance and

specificity work is crucial for effective CSS styling.

Responsive Design:

With CSS, you can create responsive designs that adapt to different screen

sizes and devices. Techniques like media queries allow you to apply different

styles based on factors like screen width, height, and orientation.

Frameworks and Preprocessors:

There are CSS frameworks like Bootstrap and Foundation that provide

pre-written CSS and HTML templates to help you quickly build responsive

websites. Additionally, preprocessors like Sass and Less extend the functionality

of CSS by adding features like variables, nesting, and mixins.

-------------------------------------------------------------

CSS COLORS:

CSS (Cascading Style Sheets) offers various ways to specify colors for styling

web pages. Here are some common methods:

1. Color Names: CSS supports a set of predefined color names, such as "red",

"blue", "green", "yellow", etc. For example:


color: red; background-color: blue;

2. Hexadecimal Notation (#rrggbb): Colors can be defined using

hexadecimal notation, which represents colors using a combination of six

characters (0-9 and A-F) preceded by a hash (#). Each pair of characters

represents the intensity of red, green, and blue (RGB) components. For

example:

color: #FF0000; /* Red */ background-color: #0000FF; /* Blue */

3. RGB Function: Colors can also be specified using the rgb() function,

which allows you to define colors using the intensity of the red, green, and

blue components on a scale of 0 to 255. For example:

color: rgb(255, 0, 0); /* Red */ background-color: rgb(0, 0, 255); /* Blue */

4. RGBA Function: Similar to rgb(), the rgba() function allows you to

specify colors with an additional parameter for opacity (alpha), which

ranges from 0 (fully transparent) to 1 (fully opaque). For example:

color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */ background-color:

rgba(0, 0, 255, 0.2); /* Blue with 20% opacity */

5. HSL Function: CSS3 introduced the HSL (Hue, Saturation, Lightness -

Hue is a degree on the color wheel from 0 to 360. 0 is red, 120

is green, and 240 is blu ) color model, which provides a more intuitive
way to specify colors. The hsl() function allows you to define colors based

on their hue, saturation, and lightness. For example:

color: hsl(0, 100%, 50%); /* Red */ background-color: hsl(240, 100%, 50%);

/* Blue */

6. HSLA Function: Similar to hsl(), the hsla() function allows you to specify

colors with an additional parameter for opacity (alpha). For example:

color: hsla(0, 100%, 50%, 0.5); /* Red with 50% opacity */ background-color:

hsla(240, 100%, 50%, 0.2); /* Blue with 20% opacity */

CSS3 BACKGROUND:

In CSS, the background property is used to set various background-related

properties for an element. Here are some of the most commonly used sub-

properties of background:

1. background-color: Sets the background color of an element.

background-color: #ffffff; /* white */

2. background-image: Specifies one or more image files to use as the

background of an element.

background-image: url('background.jpg');

3. background-repeat: Defines how the background image should be

repeated. Values can be repeat, repeat-x, repeat-y, or no-repeat.


background-repeat: repeat-x; /* repeat horizontally */

4. background-position: Sets the initial position of the background image.

Values can be keywords like top, bottom, left, right, or percentage values.

background-position: center top; /* center horizontally, top vertically */

5. background-size: Specifies the size of the background image. Values can

be auto, cover, contain, or specific lengths.

background-size: cover; /* cover the entire element */

6. background-attachment: Determines whether the background image

scrolls with the content or remains fixed. Values can be scroll or fixed.

background-attachment: fixed; /* background remains fixed while scrolling

*/

7. background-origin: Defines where the background image originates from

(border-box, padding-box, or content-box).

background-origin: content-box; /* background originates from the content

box */

8. background-clip: Specifies the area to which the background is applied

(border-box, padding-box, or content-box).

background-clip: border-box; /* background extends to the border box */


9. background-blend-mode: Sets the blending mode for the background

image.

background-blend-mode: multiply; /* blend mode */

These properties can be used individually or combined to create complex

background effects for elements on a webpage.

For example:

div

background-color: #f0f0f0; background-image: url('background.jpg');

background-repeat: no-repeat; background-position: center center; background-

size: cover;

This CSS rule would set a gray background color with a background image

centered and covering the entire element, with no repeat.

Example Program:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3 Background Example</title>
<style>
body {
margin: 0;
padding: 0;
height: 100vh; /* Set the height of the body to the viewport height */
background-color: #f0f0f0; /* Fallback background color */
background-image: linear-gradient(to bottom, #ffffff, #f0f0f0); /* Linear gradient
background */
font-family: Arial, sans-serif; /* Specify font */
display: flex; /* Center content vertically */
justify-content: center; /* Center content horizontally */
align-items: center; /* Center content vertically */
}
.container {
width: 80%;
max-width: 600px; /* Maximum width of the container */
padding: 20px;
background-color: rgba(255, 255, 255, 0.9); /* Semi-transparent background color */
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Box shadow for a subtle depth effect */
border-radius: 10px; /* Rounded corners */
text-align: center;
}

h1 {
color: #333333; /* Text color */
margin-bottom: 20px;
}

p{
color: #666666; /* Text color */
line-height: 1.6; /* Line height for better readability */
}
</style>
</head>
<body>

<div class="container">
<h1>Welcome to CSS3 Background Example</h1>
<p>This is a demonstration of how you can use CSS3 to style backgrounds in HTML.</p>
</div>
</body>
</html>
CSS BORDER:

CSS provides several properties to style borders of HTML elements.

1. border-style: Sets the style of the border. Common values include solid,

dotted, dashed, double, groove, ridge, inset, and outset.

2. border-width: Sets the width of the border. You can specify it in pixels

(px), ems (em), or other length units.

3. border-color: Sets the color of the border. You can use color names,

hexadecimal values, RGB, RGBA, HSL, or HSLA values.

4. border: A shorthand property that allows you to set all border properties

(width, style, and color) in one declaration.

5. border-radius: Sets the radius of the border corners, creating rounded

corners. You can specify values in pixels (px), ems (em), or percentages

(%).

CSS Padding:

CSS Padding property is used to define the space between the element

content and the element border.

It is different from CSS margin in the way that CSS margin defines the

space around elements.

CSS padding is affected by the background colors. It clears an area around

the content.
Top, bottom, left and right padding can be changed independently using

separate properties. You can also change all properties at once by using shorthand

padding property.

CSS Padding Properties:

Property Description

padding It is used to set all the padding properties in one declaration.

padding-left It is used to set left padding of an element.

padding-right It is used to set right padding of an element.

padding-top It is used to set top padding of an element.

padding-bottom It is used to set bottom padding of an element.


CSS Padding Values

Value Description

length It is used to define fixed padding in pt, px, em etc.

% It defines padding in % of containing element.

CSS Padding Example

<!DOCTYPE html>

<html>

<head>

<style>

p{

background-color: pink;
}

p.padding {

padding-top: 50px;

padding-right: 100px;

padding-bottom: 150px;

padding-left: 200px;

</style>

</head>

<body>

<p>This is a paragraph with no specified padding.</p>

<p class="padding">This is a paragraph with specified paddings.</p>

</body>

</html>

CSS Height, Width and Max-width

• The CSS height and width properties are used to set the height and width

of an element.

• The CSS max-width property is used to set the maximum width of an

element.

• This element has a height of 50 pixels and a width of 100%.


CSS Setting height and width

o The height and width properties are used to set the height and width of an

element.

o The height and width properties do not include padding, borders, or

margins. It sets the height/width of the area inside the padding, border, and

margin of the element.

CSS height and width Values

The height and width properties may have the following values:

• auto - This is default. The browser calculates the height and width

• length - Defines the height/width in px, cm, etc.

• % - Defines the height/width in percent of the containing block

• initial - Sets the height/width to its default value

• inherit - The height/width will be inherited from its parent value

Example

Set the height and width of a <div> element:

div {

height: 200px;

width: 50%;

background-color: powderblue;

}
Setting max-width

▪ The max-width property is used to set the maximum width of an element.

▪ The max-width can be specified in length values, like px, cm, etc., or in

percent (%) of the containing block, or set to none (this is default. Means

that there is no maximum width).

▪ The problem with the <div> above occurs when the browser window is

smaller than the width of the element (500px). The browser then adds a

horizontal scrollbar to the page.

▪ Using max-width instead, in this situation, will improve the browser's

handling of small windows.

CSS Box Model

In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML

element.

It consists of: content, padding, borders and margins. The image below

illustrates the box model:


• Content — The content of the box, where text and images appear

• Padding — Clears an area around the content. The padding is transparent

• Border — A border that goes around the padding and content

• Margin — Clears an area outside the border. The margin is transparent

Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make

the element “stand out”. It can be used same as Border.

CSS has the following outline properties:

outline-style

outline-color

outline-width

outline-offset

Outline Offset

The outline-offset property adds space between an outline and the edge/border of

an element. The space between an element and its outline is transparent.


p{

margin: 30px;

border: 5px solid black;

outline: 1px solid red;

outline-offset: 15px;

Text Color

The color property is used to set the color of the text.

body {
color: blue;
}
Text Alignment
1. text-align
2. text-align-last
3. direction
4. unicode-bidi
5. vertical-align
Text Alignment — text-align
o set the horizontal alignment of a text
o default: left
o Values: - left, right, center, justify
o “justify” — each line is stretched so that every line has equal width,
and the left and right margins are straight

Text Align Last


specifies how to align the last line of a text.
// css
p.a {
text-align-last: right;
}
// html
<p class="a"> …………….</p>

Text Direction
The direction and unicode-bidi properties can be used to change the text
direction of an element
p{
direction: rtl;
unicode-bidi: bidi-override;
}

Vertical Alignment
sets the vertical alignment of an element
img.a {
vertical-align: baseline;
}
<p>An <img class="a" src="sqpurple.gif" width="9" height="9">
image with a default alignment.</p>
Text Decoration
• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration
text-decoration-line
• adds a decoration line to text
• values: overline, line-through, underline
text-decoration-color
▪ set the color of the decoration line.
▪ values: colors name, RGB, HSL
text-decoration-style
Same as border style and same values
text-decoration-thickness
❖ can be auto or a value
The text-decoration: none; is used to remove the underline from links

a{
text-decoration: none;
}

Text Transformation
❖ specify uppercase and lowercase letters in a text
❖ values: uppercse, lowercase, capitalize
Text Spacing
Text Indentation
specify the indentation of the first line of a text
p{
text-indent: 50px;
}

Letter Spacing
specify the space between the characters in a text
h1 {
letter-spacing: 5px;
}

Line Height
used to specify the space between lines
p.extrabig {
line-height: 0.8;
}

Word Spacing
used to specify the space between the words in a text
p.one {
word-spacing: 10px;
}
White Space
specifies how white-space inside an element is handled.
p{
white-space: nowrap;
Text Shadow
adds shadow to text.
specify the horizontal shadow (2px) and the vertical shadow (2px)
h1 {
text-shadow: 2px 2px;
}

add red color to it


h1 {
text-shadow: 2px 2px red;
}
CSS Fonts

Choosing the right font for your website is important!

Font Selection is Important

• Choosing the right font has a huge impact on how the readers experience
a website.
• The right font can create a strong identity for your brand.
• Using a font that is easy to read is important. The font adds value to your
text. It is also important to choose the correct color and text size for the
font.

Generic Font Families

In CSS there are five generic font families:

1. Serif fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.

2. Sans-serif fonts have clean lines (no small strokes attached). They create
a modern and minimalistic look.

3. Monospace fonts - here all the letters have the same fixed width. They
create a mechanical look.

4. Cursive fonts imitate human handwriting.

5. Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

Difference Between Serif and Sans-serif Fonts


Font Examples:

Generic Font Family Examples of Font Names

Serif Times New Roman


Georgia
Garamond

Sans-serif Arial
Verdana
Helvetica

Monospace Courier New


Lucida Console
Monaco

Cursive Brush Script MT


Lucida Handwriting

Fantasy Copperplate
Papyrus

Css links:
With CSS, links can be styled in many different ways.

Text Link Text Link Link Button Link Button

Styling Links
Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
Example
a{
color: hotpink;
}
In addition, links can be styled differently depending on what state they are in.
The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;}
CSS List Styles

o The List in CSS determines how the contents or items are listed in a
certain fashion, i.e., they can be arranged either neatly or randomly,
which aids in creating a clean webpage.
o Because they are adaptable and simple to handle, they may be used
to organize large amounts of material.
o The list's default style is borderless.

The list may be divided into two categories:

1. Unordered List: By default, the list elements in unordered lists are


denoted with bullets, which are tiny black circles.

2. Ordered List: The list elements in ordered lists are identified by numbers
and letters.

The following CSS list properties are available for usage in controlling the CSS
lists:

o List-style-type:This property is used to determine the look of the list item


marker, such as a disc, character, or custom counter style.

o List-style-image: The pictures that will serve as list item markers may be
``specified using this parameter.

o List-style-position: It describes where the marker box should be about the


main block box.

o List-style: The list style is configured with this attribute.


CSS Pseudo classes:

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

For example, it can be used to:

• Style an element when a user mouses over it

• Style visited and unvisited links differently

• Style an element when it gets focus

Syntax

The syntax of pseudo-classes:

selector:pseudo-class

property: value;

CSS pseudo-classes are used to define a special state of an element.

They can be applied to elements based on their state, position in the DOM, or
user interaction without needing to add specific classes or IDs to the HTML.

Pseudo-classes are written with a single colon (:).

Common CSS Pseudo-Classes

1. :hover

• Applies when the user designates an element (usually with a pointing


device), but does not activate it.

a:hover { color: red; }


2. :active

• Applies when an element is being activated by the user. For a button,


this would be between the time the user presses the mouse button
and releases it.

a:active { color: green; }

3. :focus

• Applies when an element has received focus, either from the user
selecting it with the mouse or by navigating to it using the keyboard.

input:focus { border-color: blue; }

4. :visited

• Applies once the link has been visited by the user.

a:visited { color: purple; }

5. :first-child

• Applies to an element that is the first child of its parent.

p:first-child { font-weight: bold; }

6. :last-child

• Applies to an element that is the last child of its parent.

p:last-child { font-style: italic; }

7. :nth-child(n)

• Applies to an element that is the nth child of its parent, where n can
be a number, a keyword (odd or even), or a formula (an+b).

li:nth-child(odd) { background-color: lightgray; }


8. :nth-of-type(n)

• Applies to an element that is the nth sibling of its type.

p:nth-of-type(2) { color: blue; }

9. :first-of-type

• Applies to an element that is the first sibling of its type.

p:first-of-type { color: red; }

10.:last-of-type

• Applies to an element that is the last sibling of its type.

p:last-of-type { color: green; }

11.:not(selector)

• Applies to elements that do not match the specified selector.

p:not(.intro) { color: gray; }

12.:empty

• Applies to elements that have no children (including text nodes).

p:empty { display: none; }

13.:enabled and :disabled

• Applies to form elements that are enabled or disabled.

input:enabled { background-color: white; } input:disabled { background-color:


lightgray; }

14.:checked

• Applies to radio buttons, checkboxes, and options in a select element


that are checked or selected.
input:checked { background-color: yellow; }

15.:target

• Applies to the target element of a URL containing a fragment


identifier.

#section:target { border: 2px solid blue; }

CSS Pseudo elements:

CSS pseudo-elements are a way to style specified parts of an element.

They are used to add special effects to certain selectors.

Pseudo-elements can be used to add content to an element without having to


modify the HTML structure directly.

They are written with double colons (::) but some older pseudo-elements are still
supported with a single colon (:).

Common CSS Pseudo-Elements

1. ::before

• Used to insert content before an element’s content.

• Commonly used to add cosmetic content to an element with the


content property.

p::before { content: "Note: "; color: red; font-weight: bold; }

2. ::after

• Used to insert content after an element’s content.

• Similar to ::before, it requires the content property.

p::after { content: " - Thank you."; color: blue; font-style: italic; }


3. ::first-letter

• Styles the first letter of the first line of a block-level element.

• Useful for creating drop caps or decorative initials.

p::first-letter { font-size: 200%; font-weight: bold; float: left; margin-right: 8px;


}

4. ::first-line

• Styles the first line of a block-level element.

p::first-line { font-weight: bold; color: #0000FF; }

5. ::selection

• Styles the portion of an element that is selected by the user.

• Only a few properties can be applied: color, background-color,


cursor, and outline.

::selection { background: #ffb7b7; color: white; }

6. ::placeholder

• Styles the placeholder text of an input or textarea.

input::placeholder { color: #888; font-style: italic; }


CSS Navigation:

CSS navigation refers to styling navigation bars and menus on a web page using
CSS.

Navigation bars are an essential part of web design, providing a way for users to
navigate through different sections of a website.

Types of Navigation

➢ Horizontal Navigation Bar


➢ Vertical Navigation Bar
➢ Dropdown Menus
➢ Responsive Navigation Bar

Basic Structure

A typical navigation bar consists of an unordered list (<ul>) with list items (<li>)
and links (<a>).

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>
Horizontal Navigation Bar

To create a horizontal navigation bar, you need to style the <ul> and <li> elements
to display inline.

nav ul {

list-style-type: none; /* Remove bullets */

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333; /* Background color */

nav ul li {

float: left; /* Display list items inline */

nav ul li a {

display: block;

color: white; /* Text color */

text-align: center;

padding: 14px 16px;

text-decoration: none; /* Remove underline */

nav ul li a:hover {

background-color: #111; /* Hover effect */


}

Vertical Navigation Bar

For a vertical navigation bar, you can stack the list items vertically and adjust the
width.

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

width: 200px; /* Set the width */

background-color: #333;

nav ul li {

display: block; /* Stack list items vertically */

nav ul li a {

display: block;

color: white;

padding: 14px 16px;

text-decoration: none;

nav ul li a:hover {

background-color: #111; }
Dropdown Menus

Dropdown menus can be created by nesting another unordered list inside a list
item.

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#services">Services</a>

<ul>

<li><a href="#web">Web Design</a></li>

<li><a href="#seo">SEO</a></li>

</ul>

</li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

CSS for the dropdown menu:

nav ul ul {

display: none; /* Hide the dropdown by default */

position: absolute; /* Position the dropdown */

background-color: #333;

padding: 0;
margin: 0;

nav ul li:hover > ul {

display: block; /* Show the dropdown when hovering */

nav ul ul li {

float: none; /* Ensure the dropdown items stack vertically */

nav ul ul li a {

padding: 14px 16px;

Responsive Navigation Bar

Responsive navigation bars adjust to different screen sizes. A common approach


is to use media queries to change the layout on smaller screens.

HTML structure with a toggle button:

<nav>

<ul id="nav-menu">

<li><a href="#home">Home</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>
<ahref="javascript:void(0);” class="icon"
onclick="toggleMenu()">&#9776;</a>

</nav>

CSS for the responsive navigation bar:

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

overflow: hidden;

background-color: #333;

nav ul li {

float: left;

nav ul li a {

display: block;

color: white;

text-align: center;

padding: 14px 16px;

text-decoration: none;

nav ul li a:hover {
background-color: #111;

.icon {

display: none; /* Hide the toggle button by default */

@media screen and (max-width: 600px) {

nav ul li {

float: none;

nav ul li a {

display: block;

text-align: left;

.icon {

display: block; /* Show the toggle button */

float: right;

font-size: 30px;

padding: 14px 16px;

}
CSS Selector:

CSS selectors are patterns used to select and style the elements on a web page.
They form the basis of CSS, allowing you to apply styles to HTML elements
based on their type, class, ID, attributes, and more.

Basic Selectors

Universal Selector (*)

Selects all elements on the page.

*{

margin: 0;

padding: 0;

Type Selector (Element Selector)

Selects all elements of a given type.

p{

color: blue;

Class Selector

Selects all elements with a specific class.

.example {

font-size: 20px;

}
ID Selector

Selects the element with a specific ID. IDs should be unique within a page.

#header {

background-color: grey;

Attribute Selector

Selects elements based on an attribute or attribute value.

a[target] {

color: red;

input[type="text"] {

border: 1px solid #000;

Combinator Selectors

Descendant Selector (space)

Selects all elements that are descendants of a specified element.

div p {

color: green;

Child Selector (>)

Selects all elements that are direct children of a specified element.

div > p {
color: blue;

Adjacent Sibling Selector (+)

Selects the element that is immediately preceded by a specified element.

h1 + p {

font-size: 18px;

General Sibling Selector (~)

Selects all elements that are siblings of a specified element.

h1 ~ p {

color: grey;

Pseudo-Class Selectors

:hover

Applies styles when the user hovers over an element.

a:hover {

text-decoration: underline;

:focus

Applies styles when an element is focused.

input:focus {

border-color: blue;
}

:nth-child(n)

Selects elements based on their position in a group of siblings.

tr:nth-child(even) {

background-color: #f2f2f2;

:first-child / :last-child

Selects the first or last child of its parent.

p:first-child {

font-weight: bold;

p:last-child {

font-style: italic;

:not(selector)

Selects elements that do not match a specified selector.

p:not(.intro) {

color: grey;

Pseudo-Element Selectors

::before
Inserts content before the content of an element.

p::before {

content: "Note: ";

font-weight: bold;

color: red;

::after

Inserts content after the content of an element.

p::after {

content: " - End of note.";

font-style: italic;

::first-letter

Styles the first letter of an element.

p::first-letter {

font-size: 2em;

color: blue;

::first-line

Styles the first line of an element.

p::first-line {

font-weight: bold;
}

Grouping Selectors

Grouping Selector (,)

Applies the same style to multiple selectors.

h1, h2, h3 {

font-family: Arial, sans-serif;

CSS3 User Interface: Box Sizing, Filters – Menu creation -Responsive CSS

1. Box Sizing

Definition: Controls how the total width and height of an element are calculated.

Property: box-sizing

Values:

content-box (default): The width and height include only the content, not
padding, border, or margin.

border-box: The width and height include the content, padding, and border, but
not the margin.

Usage:

*{

box-sizing: border-box;

}
This setting simplifies layout design by making the element’s width and height
calculations more intuitive.

2. Filters

Definition: Apply graphical effects like blurring, sharpening, or color shifting to


an element.

Property: filter

Common Filters:

blur(px): Applies a blur effect.

brightness(%): Adjusts the brightness.

contrast(%): Adjusts the contrast.

grayscale(%): Converts the element to grayscale.

sepia(%): Applies a sepia tone.

Usage:

.nav-links a:hover {

filter: brightness(85%);

This example darkens the menu links on hover for a subtle visual effect.

3. Responsive Design

Definition: Creating web pages that look good on all devices by using flexible
layouts, images, and CSS media queries.

Key Techniques:

Flexible Grid Layouts: Use percentages or flexible units (like em, rem, or
vw/vh) for widths and heights.
Media Queries: Apply different styles based on the device's characteristics (e.g.,
screen width, resolution).

Viewport Meta Tag: Ensures proper scaling on mobile devices.

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

CSS Flexbox and Grid: Modern layout models that provide powerful alignment
and distribution capabilities.

Example: Creating a Responsive Menu

HTML Structure:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Responsive Menu</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<header>

<nav class="navbar">

<div class="logo">MySite</div>

<ul class="nav-links">
<li><a href="#home">Home</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

<div class="menu-toggle" id="mobile-menu">

<span class="bar"></span>

<span class="bar"></span>

<span class="bar"></span>

</div>

</nav>

</header>

<script src="script.js"></script>

</body>

</html>

CSS Styling:

/* styles.css */

*{

box-sizing: border-box;

margin: 0;

padding: 0;

}
body {

font-family: Arial, sans-serif;

header {

background-color: #333;

color: #fff;

padding: 10px 0;

.navbar {

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 20px;

.logo {

font-size: 24px;

font-weight: bold;

.nav-links {

list-style: none;

display: flex;

}
.nav-links li {

margin: 0 10px;

.nav-links a {

color: #fff;

text-decoration: none;

padding: 8px 16px;

transition: background 0.3s;

.nav-links a:hover {

background-color: #575757;

border-radius: 4px;

filter: brightness(85%);

.menu-toggle {

display: none;

flex-direction: column;

cursor: pointer;

.menu-toggle .bar {

width: 25px;
height: 3px;

background-color: #fff;

margin: 4px 0;

@media (max-width: 768px) {

.nav-links {

display: none;

flex-direction: column;

width: 100%;

position: absolute;

top: 60px;

left: 0;

background-color: #333;

.nav-links li {

text-align: center;

margin: 10px 0;

.menu-toggle {

display: flex;

}
.nav-links.active {

display: flex;

}
2D TRANSFORMATION IN CSS:

CSS 2D transformations allow you to modify the display of elements in a two-


dimensional space. These transformations include moving, rotating, scaling, and
skewing elements. Here are the main types of 2D transformations with examples:

1. translate()

The translate() function moves an element from its current position. It can accept
two parameters: translateX and translateY.

Syntax:

transform: translate(x, y);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 2D Transform - Translate</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transform: translate(50px, 100px);


}

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

2. rotate()

The rotate() function rotates an element around a fixed point (by default, the
center of the element).

Syntax:

transform: rotate(angle);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 2D Transform - Rotate</title>

<style>

.box {

width: 100px;
height: 100px;

background-color: blue;

transform: rotate(45deg);

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

3. scale()

The scale() function changes the size of an element. It can accept two parameters:
scaleX and scaleY.

Syntax:

transform: scale(x, y);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 2D Transform - Scale</title>


<style>

.box {

width: 100px;

height: 100px;

background-color: green;

transform: scale(1.5, 0.5);

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

4. skew()

The skew() function skews an element along the X and Y axes.

Syntax:

transform: skew(x-angle, y-angle);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 2D Transform - Skew</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: yellow;

transform: skew(30deg, 20deg);

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

5. matrix()

The matrix() function combines all 2D transform functions into one. It is defined
by six values: matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(),
translateY()).

Syntax:

transform: matrix(a, b, c, d, e, f);

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 2D Transform - Matrix</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: purple;

transform: matrix(1, 0.5, -0.5, 1, 50, 100);

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

Combining Multiple Transformations

You can combine multiple transformations in a single transform property.

Example:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 2D Transform - Combined</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: orange;

transform: translate(50px, 50px) rotate(30deg) scale(1.2, 1.2);

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>
3D TRANSFORMATION:

CSS 3D transformations allow you to manipulate elements in a three-dimensional


space, enabling effects like perspective, rotations, and scaling in 3D. Here are the
main aspects and examples of CSS 3D transformations:

1. Perspective

The perspective property defines how far the object is placed from the view. It
affects the depth of the 3D transformation.

Syntax:

perspective: value;

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 3D Transform - Perspective</title>

<style>

.container {

perspective: 1000px;

.box {

width: 100px;
height: 100px;

background-color: blue;

transform: rotateY(45deg);

transform-origin: center;

</style>

</head>

<body>

<div class="container">

<div class="box"></div>

</div>

</body>

</html>

2. transform-style

The transform-style property defines how nested elements are rendered in 3D


space. Use preserve-3d to maintain 3D transformations of child elements.

Syntax:

transform-style: preserve-3d;

Example:

<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 3D Transform - Transform Style</title>

<style>

.parent {

perspective: 1000px;

.child {

width: 100px;

height: 100px;

background-color: green;

transform: rotateY(45deg);

transform-origin: center;

</style>

</head>

<body>

<div class="parent" style="transform-style: preserve-3d;">

<div class="child"></div>

</div>

</body>

</html>
3. rotateX(), rotateY(), rotateZ()

These functions rotate an element around the X, Y, or Z axis, respectively.

Syntax:

transform: rotateX(angle);

transform: rotateY(angle);

transform: rotateZ(angle);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 3D Transform - Rotation</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

transform: perspective(1000px) rotateY(45deg);

transform-origin: center;

</style>
</head>

<body>

<div class="box"></div>

</body>

</html>

4. scaleX(), scaleY(), scaleZ()

These functions scale an element along the X, Y, or Z axis, respectively.

Syntax:

transform: scaleX(value);

transform: scaleY(value);

transform: scaleZ(value);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 3D Transform - Scaling</title>

<style>

.box {

width: 100px;

height: 100px;
background-color: yellow;

transform: perspective(1000px) scale(1.5);

transform-origin: center;

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

5. translate3d()

The translate3d() function moves an element in 3D space. It takes three


parameters: translateX, translateY, and translateZ.

Syntax:

transform: translate3d(x, y, z);

Example:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 3D Transform - Translation</title>


<style>

.box {

width: 100px;

height: 100px;

background-color: purple;

transform: perspective(1000px) translate3d(50px, 50px, 50px);

transform-origin: center;

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

6. matrix3d()

The matrix3d() function combines all 3D transform functions into one. It is


defined by 16 values: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4,
b4, c4, d4).

Syntax:

transform: matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4);

Example:

<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS 3D Transform - Matrix3d</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: orange;

transform: perspective(1000px) matrix3d(1, 0, 0, 0, 0, 1, -0.2, 0, 0, 0.2, 1, 0, 0,


0, 0, 1);

transform-origin: center;

</style>

</head>

<body>

<div class="box"></div>

</body>

</html>

You might also like