CSS Introduction
CSS stands for Cascading Style Sheets. It is a language used to style and lay
out web pages—control things like the colors, fonts, spacing, positioning,
and overall appearance of elements on a webpage.
•Types of
Inline CSS: CSS
•Applied directly to the HTML element via the style attribute.
•Only affects the specific element where it is added.
<p style="color: blue;">This is a blue
paragraph.</p>
•Internal CSS:
•Placed within the <style> tags inside the <head> section of an
HTML document.
•Used for styling a single page or when you want the CSS to
only apply to that page.
<head> <style> p { color: red; } </style> </head>
•External CSS:
•Defined in a separate .css file and linked to an HTML
document via the <link> tag.
•Allows for consistent styling across multiple pages.
Basic CSS Selectors
• CSS selectors are used to target HTML elements that you
want to style.
• They are the first part of any CSS rule and define which HTML
element(s) the styles will be applied to.
Universal Selector (*) Type Selector (Element Selector)
The universal selector applies styles to every The type selector targets elements based
element on the page. on the HTML tag name.
* { margin: 0; padding: 0; } p { color: blue; }
Class Selector ID Selector
The class selector targets elements with a The ID selector targets an element with a
specific class attribute. You can use the same specific id attribute. Each ID should be unique
class on multiple elements. within a page, meaning you should only use an
ID once.
.class-name { background-color: yellow; }
#id-name { font-size: 24px; }
<p class="highlight ">This is a highlighted paragraph.</p> <div
<h1 id="main-title">This is the main title.</h1>
class="highlight">This div is also highlighted.</div>
Grouping Selector
The grouping selector allows you to apply the same style
to multiple selectors, reducing redundancy.
h1, h2, h3, .cls1, #x101 {
color: green;
}
Descendant Selector Child Selector
The descendant selector targets elements that are The child selector targets direct child elements of
nested within other elements. It selects elements a specified parent element.
that are children or further descendants of a •Syntax:
specified parent.
•Syntax: div > p { color: blue; }
div p { color: red; } This targets only <p> elements that are direct
This targets all <p> elements inside any <div> and children of a <div>, making their text color blue.
sets their text color to red.
<div>
<div> <p>This paragraph will be blue.</p>
<p>This paragraph will be red.</p> <section>
</div> <p>This paragraph will be not blue.</p>
<p>This paragraph will not be red.</p> </section>
</div>
Fonts in CSS
• Fonts play a crucial role in the overall design and readability of a webpage.
• CSS provides various properties to control the appearance of text, such as font
family, size, weight, and style.
font-family:
•Defines the typeface or font for an element.
•You can specify multiple fonts as a fallback list. If the browser cannot use the first font, it tries the next
one.
•Fonts are classified into two categories:
•Generic fonts: Available on all systems (e.g., serif, sans-serif, monospace).
•Custom fonts: Specific fonts (e.g., Arial, Times New Roman)
that may or may not be available on all systems.
p { font-family: "Times New Roman", Arial, sans-serif; }
font-size:
•Controls the size of the text.
•Common units:
•px: Pixels (absolute size).
•em: Relative to the parent element’s font size.
•rem: Relative to the root element's font size.
•%: Relative to the parent element’s font size (e.g., font-size: 100% equals the size of the parent).
p { font-size: 16px; }
font-weight:
•Controls the thickness or boldness of the text.
•Values range from 100 (thin) to 900 (bold). Common values include: normal (400), bold (700), lighter,
and bolder.
h1 { font-weight: bold; }
font-style:
•Specifies the style of the font, such as normal, italic, or oblique.
p { font-style: italic; }
Colors in CSS
• Ways to Define Colors in CSS
Named Colors:
•CSS has 140 predefined color names (e.g., red, blue, green).
h1 { color: red; }
Hexadecimal Colors:
•Hexadecimal color codes are six-digit codes representing red, green, and blue values (RGB).
•The format is #RRGGBB.
•Each pair (RR, GG, BB) is a hex value ranging from 00 (no color) to FF (full color).
p { color: #ff5733; }
RGB Colors:
•The rgb() function allows you to define colors using the red, green, and blue components.
•Each value is a number between 0 and 255.
div { background-color: rgb(255, 99, 71); }
RGBA Colors:
•Similar to rgb(), but with an additional alpha channel that defines opacity (transparency).
•The alpha value ranges from 0 (fully transparent) to 1 (fully opaque).
•Syntax:
css
div { background-color: rgba(0, 0, 255, 0.5); }
CSS Color Properties
•border-color:
•Defines the color of an element’s border.
•color:
•Controls the text color. div { border: 2px solid #008080; }
p { color: blue; }
•opacity:
•Sets the opacity (transparency) of an element.
•Values range from 0 (fully transparent) to 1 (fully opaque).
img { opacity: 0.5; }
Color Gradients in CSS
Linear Gradient:
•Creates a gradient that moves in a straight line.
div { background: linear-gradient(to right, red, yellow); }
Radial Gradient:
•Creates a gradient that radiates from a central point.
div { background: radial-gradient(circle, blue, white); }
Backgrounds
background-color:
•Sets the background color of an element.
•You can use color names, hex values, RGB, etc.
div { background-color: #f0e68c; }
background-image:
•Sets an image as the background of an element.
•You can specify a URL for the image.
div { background-image: url('[Link]'); }
Borders
border (Shorthand):
•Defines the width, style, and color of the border in one line.
div { border: 2px solid #000; }
border-color:
border-width:
•Specifies the thickness of the border.
•You can define different values for each side or apply one value to all sides.
div { border-width: 2px 4px; }
border-radius:
•Defines the rounded corners of the border.
•You can specify one value for all corners or separate values for each corner.
div { border-radius: 10px; }
border-style:
•Sets the style of the border. Possible values:
•solid: A single, solid line.
•dashed: A dashed line.
•dotted: A dotted line.
•double: Two solid lines.
•none: No border.
div { border-style: dashed; }
Box Model
Components of the Box Model
The CSS box model consists of four main components,
which work together to determine the space occupied by an element:
[Link]:
•This is the actual content inside the element (text, images, etc.).
•The width and height properties define the size of the content area.
[Link]:
•Padding is the space between the content and the border.
•It adds space inside the element, around the content, but doesn't affect the element's background.
div { padding: 10px; }
•Border:
•The border surrounds the padding and the content.
•It can have properties like border-width, border-style, and border-color.
div { border: 2px solid black; }
•Margin:
•Margin is the space outside the border.
•It creates space between the element and other elements, preventing them from being too close.
div { margin: 20px; }
Display, Alignment, and
Positioning
Display Property
The display property defines how an element is rendered on the page.
Common values include block, inline, inline-block, none, and the newer flex and grid.
[Link]: block;
•The element takes up the full width available and starts on a new line.
•Examples: <div>, <h1>, <p>, etc.
•Use case: Useful for larger sections, containers, or elements that need full width.
div { display: block; }
[Link]: inline;
•The element does not start on a new line and only takes up as much width as needed.
•Examples: <span>, <a>, <img>, etc.
•Use case: Ideal for small elements within a block of text.
span { display: inline; }
•display: inline-block;
•Combines features of both block and inline elements:
the element takes up only the required width, but it can
have width and height properties applied.
•Use case: Great for creating button-like elements or
inline elements that need specific dimensions.
button { display: inline-block; width: 100px; height:
50px; }
•display: none;
•The element is not rendered and does not take up
space on the page.
•Use case: Used to hide elements without removing
them from the DOM.
div { display: none; }
• visibility: hidden;
•display: flex;
•Turns an element into a flex container, enabling flexible layouts
where child elements (flex items) can be aligned and distributed within the container.
•Use case: For creating flexible, responsive layouts.
div { display: flex; }
display: grid;
Allignment
Horizontal Alignment:
[Link]-align (for inline elements):
•This property controls the horizontal alignment of text within a block element.
•Values:
•left: Aligns text to the left (default).
•center: Centers the text.
•right: Aligns text to the right.
p { text-align: center; }
[Link]: auto (for block elements):
•This can be used to center block elements horizontally when combined with a specific width.
div { width: 200px; margin: 0 auto; }
Vertical Alignment:
[Link]-align (for inline or table-cell elements):
•Controls the vertical alignment of inline or inline-block elements within their parent container.
•Values: baseline, middle, top, bottom.
span { vertical-align: middle; }
[Link] for Vertical and Horizontal Alignment:
•Flexbox makes it easy to align items both vertically and horizontally.
.container { display: flex;
justify-content: center; /* Horizontal alignment */
align-items: center; /* Vertical alignment */
height: 100vh; /* Full viewport height */
}
//display:flex;
//flex-direction:
//justify-content:
Positioning
Position Values:
[Link] (default):
•The element is positioned according to the normal flow of the page.
•It ignores the top, right, bottom, and left properties.
div { position: static; }
[Link]:
•The element is positioned relative to its normal position.
•The top, right, bottom, and left properties shift the element from its original position.
•Use case: To move an element slightly from its default position
without affecting the layout of surrounding elements.
div { position: relative; top: 10px; left: 20px; }
•absolute:
•The element is removed from the normal flow and positioned relative to its nearest positioned ancestor
(or the initial containing block if none exist).
•Use case: For elements that need to be positioned independently from the surrounding layout.
div { position: absolute; top: 50px; right: 20px; }
•fixed:
•The element is positioned relative to the browser window, and it stays fixed in place even when
the page is scrolled.
•Use case: Useful for navigation bars or elements that should remain visible during scrolling.
div { position: fixed; bottom: 0; left: 0; }
sticky:
The element is positioned based on the user's scroll position. It toggles between relative and fixed, depending on the
scroll position.
When within its containing block, it behaves like relative. Once it reaches a defined scroll threshold, it sticks in place like
fixed.
Use case: Ideal for headers, table columns, or other elements that should remain visible while scrolling but only
within a specific section of the page.
div {
position: sticky; top: 10px;
}
z-index (Stacking Order)
•The z-index property controls the vertical stacking order of elements that overlap
due to positioning (absolute, relative, fixed).
•Higher z-index values bring elements to the front.
div { position: absolute; z-index: 10; }
<!DOCTYPE html>
.box3 {
<html>
<head> position: absolute;
<style> z-index: 3;
.wrapper { background: cyan;
position: relative; width: 70%;
} left: 40px;
.box1 { top: 60px;
position: relative; }
z-index: 1; </style>
border: solid; </head>
height: 100px; <body>
margin: 50px;
}
.box2 { <h1>The z-index Property</h1>
position: absolute;
z-index: 2; <div class="wrapper">
background: pink; <div class="box1">Box 1 - has z-index: 1</div>
width: 20%;
left: 65%; <div class="box2">Box 2 - has z-index: 2 (will be put above .box1)</div>
top: -25px; <div class="box3">Box 3 - has z-index: 3 (will be put above .box1 and .box2)</div>
height: 120px; </div>
opacity: 0.9;
} </body>
</html>
