1.
INTRODUCTION TO CCS3
CASCADING STYLE SHEET
CSS is a style sheet language used for used to style and design the
appearance of a web page.. It defines how HTML elements, such as text, images,
and layouts, are displayed on a screen, including aspects like colors, fonts,
spacing, and positioning. CSS helps separate the design from the content, making
it easier to manage.
CSS Features
CSS stands for Cascading Style Sheets:
CSS is a tool used to style and design the appearance of a web page.
CSS controls how HTML elements look:
It tells the browser how the text, images, and other elements should
appear on the screen, paper, or other devices.
CSS makes your work easier:
You can use one CSS file to style many web pages, saving time and
effort.
CSS defines the look of web pages:
It controls the design, layout, and how the page looks on different
devices, like phones or computers.
CASCADING STYLE SHEET LEVE 3 (CSS3)
CSS3 is the latest version of CSS, the language used for styling web pages.
It builds on the previous versions of CSS by introducing new features, allowing
developers to create more dynamic, interactive, and visually appealing websites.
CSS3 helps define how HTML elements are displayed, such as colors, fonts,
spacing, layouts, and animations.
CSS3 is widely supported by modern web browsers, and it enables a variety
of new features that improve the design and functionality of websites.
1.2.1. Key Features of CSS3:
1. Selectors:
CSS3 introduces more powerful and flexible selectors that allow you to target
elements based on attributes, state, and position.
2. Box Model:
CSS3 enhances the box model by providing more control over the layout of
elements, including new properties like box-sizing
3. Borders and Border-radius:
CSS3 allows you to round the corners of elements with the border-radius
property.
4. Backgrounds and Gradients:
CSS3 introduces gradient backgrounds, making it easy to create smooth color
transitions without needing images.
5. Shadows:
You can add shadows to elements, such as box-shadow for elements and text-
shadow for text, to create depth and visual appeal.
6. Animations and Transitions:
CSS3 allows for smooth transitions and animations, enabling dynamic effects on
elements when properties change (e.g., hover effects).
7. Flexbox (Flexible Box Layout):
Flexbox is a layout model introduced in CSS3 that makes it easier to create
flexible, responsive layouts. It helps distribute space and align items within a
container, even when their sizes are unknown or dynamic.
8. Grid Layout:
CSS Grid Layout provides a two-dimensional grid system for layout design. It
makes it possible to create complex web layouts with rows and columns.
1.2.2. Syntax
Selector
{
property: value
}
Example:
h1
{
color : blue;
Components of CSS Syntax:
Selector: This specifies which HTML elements you want to style. It can be a
tag name (e.g., p, h1), a class name (e.g., .class-name), an ID (e.g., #id-name), or
other types of selectors.
Declaration Block: This contains one or more declarations. Each declaration
includes a property and a value. The property defines what aspect of the element
you want to style (e.g., color, font-size), and the value defines how that property
will be styled (e.g., red, 16px).
Property: This is the part that defines what you are styling, such as color,
background-color, font-size, etc.
Value: This specifies the setting for the property, like red, blue, 20px, etc.
Example
<html>
<head>
<style>
h1
{
color : blue;
font-family: Arial
}
</style>
</head>
<body>
<h1>Education is the most powerful weapon which you can use to change the
world.</h1>
</body>
</html>
Output
1.2.2. Selector Types
In HTML and CSS, selectors are used to target specific HTML elements that
you want to style. They define which elements a particular CSS rule will apply
to. Here's an overview of different types of CSS selectors:
1. Universal Selector (*)
The universal selector targets all elements in the document.
Example:
*{
color: blue;
}
This will make the text of all elements on the page blue.
2. Element Selector (Type Selector)
The element selector targets all instances of a specific HTML element.
Example:
p{
font-size: 16px;
}
This will apply a font size of 16px to all <p> elements.
3. Class Selector (.)
The class selector targets elements with a specific class attribute. It is prefixed
with a period (.).
Example:
.button {
background-color: green;
}
This will apply a green background color to any element with the class button.
<button class="button">Click me</button>
4. ID Selector (#)
The ID selector targets an element with a specific id attribute. It is prefixed with a
hash (#).
Example:
#header {
text-align: center;
}
This will apply center alignment to the element with the id="header".
<div id="header">Welcome</div>
5. Attribute Selector
Attribute selectors target elements based on the presence or value of an attribute.
Example:
input[type="text"]
{ border: 1px solid
black;
}
This will style all <input> elements with type="text".
6. Descendant Selector (Space)
The descendant selector targets elements that are nested within other elements.
Example:
div p
{ color:
red;
}
This will apply a red color to all <p> elements that are inside <div> elements.
7. Child Selector (>)
The child selector targets direct child elements.
Example:
div > p {
margin-top: 10px;
}
This will apply a margin to all <p> elements that are direct children of <div>
elements.
8. Adjacent Sibling Selector (+)
The adjacent sibling selector targets an element that is immediately preceded by a
specific element.
Example:
h1 + p {
font-size: 18px;
}
This will apply a font size of 18px to any <p> element that immediately follows
an <h1> element.
9. General Sibling Selector (~)
The general sibling selector targets all elements that are siblings of a specified
element.
Example:
h1 ~ p
{ color:
gray;
}
This will apply a gray color to all <p> elements that are siblings of an <h1>
element.
10. Pseudo-classes (:)
Pseudo-classes target elements in specific states, like when a link is hovered over.
Example:
a:hover
{ color:
red;
}
This will change the color of a link to red when it is hovered over.
11. Pseudo-elements (::)
Pseudo-elements target specific parts of an element, like the first letter or line of
text.
Example:
p::first-letter {
font-size: 2em;
}
This will make the first letter of each <p> element twice as large.
12. Group Selector (,)
The group selector is used to apply the same style to multiple elements.
Example:
h1, h2, h3 {
font-family: Arial, sans-serif;
}
This will apply the same font style to <h1>, <h2>, and <h3> elements.
2. TYPESOFCSS
CSS can be included in HTML in three different ways: inline, internal, and
external.
2.1. INLINE CSS
Inline CSS is used to apply styles directly to a single HTML element using the
style attribute.
The in line style uses the HTML "style"
attribute. This allows CSS properties on a "per
tag" basis. Inline style cannot be re used at all.
This is not recommended, as every CSS change has to be made in
every tag that has the inline style applied to it.
Example (html file)
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">God is Great</h1>
</body>
</html>
Example (html file)
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">God is Great</h1>
</body>
</html>
Output
2.2. INTERNAL CSS
Internal CSS is written inside the <style> tag in the <head> section of the HTML
document.
Internal style sheets are placed inside the section of a particular web page
via the style tag.
These styles can be used only for the webpage in which they are
embedded.
This make sit easy to apply styles like classes orid'sinordertore use the
code.
The down side of using an internal style sheet is that changes to the
internal style sheet only effect the page the code is inserted into.
Example (html file)
<html>
<head>
<title>Internal CSS Example</title>
<style>
/* Styling the body element */
body {
background-color: lightpink;
font-family:castellar;
}
/* Styling the h1 element */
h1 {
color: darkblue;
text-align: center;
font-family: Times New Roman;
}
/* Styling the paragraph */
p{
font-size: 16px;
color: darkgreen;
}
</style>
</head>
<body>
<h1>Kings Engineering College</h1>
<p>Welcome to First Year Students</p>
<p>Our College is an Autonomous Institution</p>
</body>
</html>
Output
2.3. EXTERNAL CSS
External CSS is used when you want to apply styles from a separate CSS
file. This is the most common and scalable method for styling large websites.
An external style sheet is a separate, text-only document that contains a
number of style rules. It must be named with the .css suffix.
[Link] document is then linked to (via the link element) or imported
(viaan@importrule in a style sheet) into one or more HTML documents. In this
way, all the files in a website may
Share the same style sheet. This is the most powerful and preferred method
for attaching style sheets to content.
Example
html file
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Welcome to KEC</h1>
<p>Dear First Year Students, this page is styled with external CSS.</p>
</body>
</html>
External CSS file : [Link]
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
h1 {
color: green;
text-align: center;
}
p{
color: #34495e;
font-size: 16px;
line-height: 1.6;
}
Output
3. TEXT FORMATTING
CSS Text Formatting refers to applying styles to text elements to control
appearance and layout. Text can be formatted using a variety of properties that
control aspects like font, color, alignment, spacing, decoration, indention,
justification, direction, shadow and more.
3.1. CSSTEXTPROPERTIES
Property Description
font-family Specifies the font of the text
font-size Sets the size of the text
font-weight Defines the thickness of the font (normal, bold, etc.)
font-style Specifies whether the text is italicized or not.
font-variant Controls the use of small caps in text.
Specifies the direction in which the text and other inline
direction
content will flow(left to right or right to left)
line-height
text-align Specifies the alignment of the text (left, center, right, justify)
text-color Sets the color of the text.
text-decoration Specifies the alignment of the text (left, center, right, justify)
text-decoration- Sets color of text decorations like overlines, underlines, and
color line-throughs
text-decoration- Controls decorations like underline, line-through, overline, or
line none.
letter-spacing Controls the space between characters
text-indent Indents the first line of text
Specifies how to handle text that overflows its container (e.g.,
text-overflow
using ellipsis).
Applies shadow to text with horizontal and vertical offsets,
text-shadow
blur radius, and color.
text-transform Controls capitalization (uppercase, lowercase, or capitalize).
word-spacing Controls the space between words.
Example
Html file
<html>
<head>
<title>CSS Text Properties Example</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1 class="headline">Welcome to KEC</h1>
<p class="para">Dear Students,</p>
<p class="para">This is an example using CSS Text Properties.</p>
</body>
</html>
CSS file: [Link]
/* Change the font style, size, and color of the heading */
.headline {
font-family: 'Arial', sans-serif;
font-size: 36px;
font-weight: bold;
color: orange;
text-align: center;
text-transform: uppercase;
text-decoration: underline;
letter-spacing: 2px;
}
/* Style the paragraph text */
.para {
font-family: 'Georgia',
serif; font-size: 18px;
line-height: 1.6;
color: pink;
text-shadow: 2px 2px blue;
text-align: justify;
}
Output
3.2. CSS 3 TEXT PROPERTIES:
CSS 3 contains several new text features.
text-overflow
word-wrap
word-break
Text Over flow: The CSS 3 text-overflow property specifies how over flowed
content that is not displayed should be signaled to the user.
Word Wrapping: The CSS 3 word-wrap property allows long words to be able
to be broken and wrap onto the next line. If a word is too long to fit within an
area, it expands outside.
Word Breaking: The CSS 3 word-break property specifies line breaking rules.
Example
<html>
<head>
<style>
/* Container styling */
.container
{ width:
200px;
border: 1px solid #ccc;
padding: 10px;
margin: 20px;
background-color: #f9f9f9;
overflow: hidden; /* Prevents overflow beyond the container */
}
/* Text overflow */
.text-overflow {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Word wrap (overflow-wrap) */
.word-wrap {
overflow-wrap: break-word; /* Break words if they are too long */
}
/* Word break */
.word-break {
word-break: break-all; /* Break words at arbitrary points */
}
</style>
</head>
<body>
<div class="container text-overflow">
<p>This is a very long text that will be truncated with an ellipsis if it overflows
the container.</p>
</div>
<div class="container word-wrap">
Fundamentals of Computer Programming 101
<p>ThisIsAReallyLongWordThatMightOverflowTheContainerButWithWordW
rapItWillBreakIntoMultipleLines.</p>
</div>
<div class="container word-break">
<p>ThisIsAReallyLongWordThatWillBreakAtAnyPointBecauseWordBreakIsSe
tToBreakAll.</p>
</div>
</body>
</html>
Output
Fundamentals of Computer Programming 102
4. COLORS
Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSL A values. In CSS, a color can be specified by using a predefined
color name:
1. Tomato
2. Orange
3. Dodger Blue
4. Medium Sea Green
5. Gray
6. Slate Blue
7. Violet
8. Light Gray
Setting Background Color: Use background-color property to set the
background color for any element
Setting Text Color: Use color property to set the color of element’s text.
Setting Border Color: Use border-color property to set the border color of an
element.
Example
Fundamentals of Computer Programming 103
<html>
<body>
<h1 style="color: white; background-color: purple; border: 2px solid
orange;text-align: center;"> Dear Students,</h1>
<p> This is an example of text(white), background(purple), and
border_color(orange) using inline CSS.</p>
</body>
</html>
Fundamentals of Computer Programming 104
Output
4.1. CSS COLOR VALUES
4.1.1. RGB Colors
An RGB color value represents RED, GREEN, and BLUE light sources.
RGB Value
In CSS, a color can be specified as an RGB value, using this formula: rgb
(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.
For example, rgb (255,0,0) is displayed as red, because red is set to its
highest value (255) and the others are set to 0.
To display black, set all color parameters to 0, like this: rgb (0,0,0).
To display white, set all color parameters to 255, like this: rgb (255,
255,255).
4.1.2. HEX Colors
A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG
(green) and BB (blue) hexadecimal integers specify the components of the color.
Fundamentals of Computer Programming 105
HEX Value
In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
Fundamentals of Computer Programming 106
Where rr (red), gg (green) and bb (blue) are hexadecimal values between
00 and ff (same as decimal 0-255).
For example, #ff0000 is displayed as red, because red is set to its highest
value (ff) and the others are set to the lowest value (00).
4.1.3 HSL Colors
HSL stands for hue, saturation, and lightness.
HSL Value
In CSS, a color can be specified using hue, saturation, and lightness
(HSL) in the form: 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 blue.
Saturation is a percentage value, 0% means a shade of gray, and100% is
the full color.
Lightness is also a percentage, 0% is black, 50% is neither light or dark,
100% is white
Saturation
Saturation can be described as the intensity of a color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the color.
Lightness
The lightness of a color can be described as how much light you want to
give the color, where 0% means no light (black), 50% means 50% light
Fundamentals of Computer Programming 107
(neither dark nor light) 100% means full lightness (white).
Fundamentals of Computer Programming 108
Example
<html>
<head>
<style>
/* Using named colors */
body {
font-family: Arial, sans-serif;
background-color: lightblue;
color: darkslategray;
}
h1 {
color: coral; /* coral color for h1 */
}
p{
color: #2E8B57; /* Hexadecimal color code (SeaGreen)
*/ font-size: 1.2em;
}
.rgb-example {
color: rgb(255, 99, 71); /* RGB color (Tomato) */
}
.rgba-example {
background-color: rgba(0, 128, 0, 0.5); /* RGBA with transparency
(green) */
color: white;
padding: 10px;
Fundamentals of Computer Programming 109
}
.hsl-example {
color: hsl(120, 100%, 25%); /* HSL color (dark green) */
}
.hsla-example {
background-color: hsla(240, 100%, 50%, 0.3); /* HSLA with
transparency (blue) */
color: white;
padding: 10px;
}
}
</style>
</head>
<body>
<h1>Welcome to CSS Colors Example</h1>
<p>This is a paragraph with a hexadecimal color code (SeaGreen).</p>
<p class="rgb-example">This text uses RGB (Tomato).</p>
<div class="rgba-example">
<p>This div has an RGBA background with transparency (Green).</p>
</div>
<p class="hsl-example">This text uses an HSL color code (Dark Green).</p>
<div class="hsla-example">
<p>This div has an HSLA background with transparency (Blue).</p>
</div>
</body>
</html>
Output
Fundamentals of Computer Programming 110
