Cascading Style
Sheets (CSS)
What is CSS?
CSS, or Cascading Style Sheets, is a language used to define the visual
presentation of web pages. It separates the content of a website (written in
HTML) from its design, allowing for more control over how content is
displayed.
Understanding CSS Syntax and Structure
Declaration
1 Selectors
Selectors target specific HTML elements or groups of elements, like "p" Selector
for paragraphs or ".container" for a div with a class of "container".
{
2 Properties Property - name : Property - description ;
Properties define the style attributes you want to apply, like "color,"
"font-size," or "margin." Property - name : Property - description ;
3 Values }
Values specify the specific setting for the property, such as "red" for
color or "16px" for font-size.
Selector Style Style
4 Semicolons h1{ color:blue; font-style: italic; }
Semicolons separate multiple property-value pairs within a CSS rule.
Property Value Property Value
Applying CSS to an HTML Document
There are three ways of inserting a style sheet
• Inline Method
• Internal Method
• External Method
• Inline Method
Inline CSS refers to the means by which single elements in a document are styled. The technique consists of
using an HTML attribute called 'style' within any tag, which will provide the CSS properties for that element.
This allows the applying of unique styles to just one particular element, not affecting the others, which comes in
very handy in case any quick changes or specific customizations need to be done.
Example
Explanation & Output - In Line Method
<h1 style="color: blue; text-align: center;">: This sets the text color to blue and centers the heading.
<p style="font-size: 18px; color: gray;">: This sets the paragraph text size to 18 pixels and the text color to gray
• Internal Method
Internal CSS is a way to put CSS styles inside the <head> area of an HTML document. This may be helpful in
terms of styling a single page since one can, to some extent, specify styles for the whole document.
Example
Explanation & Output – Internal Method
<style> Tag: Contains CSS rules within the <head> section.
body Rule: Sets the background color of the entire page to light yellow.
h1 Rule: Colors the heading text blue and centers it.
p Rule: Sets the paragraph text size to 18 pixels and colors the text gray.
• External Method
External CSS involves linking an external stylesheet to an HTML document. This method allows you to apply the
same styles across multiple web pages, promoting consistency and ease of maintenance.
Example
The Link can be creates as:
<link rel = “stylesheet” type =“text/css” href=“[Link]”>
Specifies the relationship between the
Rel
current document and linked document
Type For indicating the styling sheet’s MIME type
Href For specifying the URL of the style sheet
Explanation & Output – External Method
<link> Tag: In the HTML file, it links to the external CSS file ([Link]).
Applying Styles using CSS
Colors & Backgrounds
Sets the color of text, backgrounds, and borders.
Font
Controls font family, size, weight, and style.
Text
Text can be aligned to the left, right, center or justify
• Color
Defines the color of text. The color names or their hexadecimal value (eg: #FF0000) can be
entered as the value.
Example:
h1 { color : Red ; } OR
h1 { color : #FF0000 ; }
• Background - Color
Defines the background color of elements.
Example:
h1 { color : White;
background-color : Black;
}
• Background – Image
Defines image to be used as the background of an element
Example:
Body{
background-image:url(“[Link]”);
}
Styling Text and Fonts
Font Family
Specifies the typeface to use, like "Arial" or "Times New Roman".
Font Size
Sets the size of the text, often measured in pixels or ems.
Font Weight
Determines the boldness of the text, ranging from "normal" to "bold".
Font Style
Applies styles like "italic" or "oblique" to the text.
Text Align & Decoration
Adds decorations like underlines, overlines, or strikethroughs.
[Link] – Family
Defines the fonts to be used to display the values of elements. Two types of names are used
to categorize fonts:
1. Font Name
Arial, Times New Roman etc
2. Generic Family Names
Serif - Times New Roman, Georgia, Bookman Old Style
Sans – Serif - Arial, Tahoma, Verdana
Monospace - Courier New,Lucida Console, consolas
Cursive - French Script , Lucida Calliraphy
[Link] - Size
The font size can be defined in pixels(px), points(pt) or in percentages(%).
eg: h1 { font-size : 30pt }
[Link] – Weight
Defines how bold or “heavy” a font should be presented. A font can either be normal,
bold, etc.
font-weight: normal;
font-weight: lighter;
font-weight: bold;
font-weight: 900;
[Link] – Style
Defines the chosen font to be either normal, italic, oblique etc
[Link] - Align
Text can be aligned to the left, right, center or justify.
[Link] - Decoration
Defines the different “decorations (effects)” that can be applied to the text.
✓ Values for text decoration include:
None (normal text-default), underline, overline and line-through.
CSS Selectors
CSS selectors are used find elements in a HTML document so that styles can be applied.
CSS Selectors:
• Element Selectors
• ID Selectors
• Class Selectors
01. Class Selector
• The class selector uses the class attribute of an HTML element to select a specific
element.
• A class selector is used to define different styles for the same type of HTML element.
<body>
[Link] {color:red;}
<h1 class=“first”>Hello World</h1>
<h1 class=“sec”>Hello World</h1> [Link] {color:green;}
</body>
Grouping of Selectors
• Several selectors can be grouped together with each selector separated by a comma.
Example : h1,h2 { color: green;
font: italic 40pt Arial; }
02. ID Selector
• The id selector uses the id attribute of an HTML element to select a specific element.
• An id specified should be unique within a page.
• A id selector can be used to define different styles for the same type of HTML element.
• Note: An id name cannot start with a number!
<style type="text/css">
#hello
{color:red;
Text-align:center;}
</style>
</head>
<body>
<h1 id="hello">Hello World</h1>
</body>
Div Tag
• The <div> tag defines a division or a section in an HTML document.
• The <div> element is often used as a container for other HTML elements to style them with CSS
or to perform certain tasks with JavaScript.
Positioning in CSS
• Relative: By default, every element in CSS is positioned as static.
• Absolute: Positioned relative to the nearest positioned ancestor (excluding static
ancestors).
• Fixed: Positioned relative to the viewport, meaning it stays in the same place even when
the page is scrolled.
• Sticky: A hybrid between relative and fixed, the element toggles between the two based
on the user's scroll position.
Tables
• Border-collapse:
Specifies whether the table borders should be detached or collapsed into a single border.
The property can have the values separate (default), collapse etc.
• Caption - Side:
Table caption can be placed at the top (default) or the bottom of the table.
Box model in CSS
• The box model is a concept in CSS that describes the structure of elements on a page. It includes:
• Content: The actual content inside the box.
• Padding: Space between the content and the border.
• Border: The border surrounding the padding (or content if there is no padding).
• Margin: Space outside the border, separating the element from others.
• Width
• Height
• Border-Style:
Table style can be dotted, solid, groove etc
(default : none).
• Border- width:
Width of the border can be set as thin,
medium, thick etc. The thickness can also be
defined in terms of pixels.
• Border :
This property sets all the border properties in one declaration.
Order of values:
border-width border-style border-color
Note:
For a border width or color to be set,
border-style has to be used.
Border Radius
• The border-radius property defines the radius of the element's corners.
– Four values - border-radius: 15px 50px 30px 5px; (first value applies to top-left corner, second value applies to
top-right corner, third value applies to bottom-right corner, and fourth value applies to bottom-left corner)
<style>
#example1 {
border: 2px solid red;
padding: 10px;
border-radius: 25px;
}
</style>
<div id="example1">
<p>The border-radius property defines the radius of the element's corners.</p>
</div>
• Padding:
Padding defines the white space between the element content and the element
border.
• Width/height:
The width/height can be set as a % or in pixels.
Hoverable Buttons
• Use the :hover selector to change the style of the button when you move the mouse over it.
.button1 {
background-color: white;
color: black;
border: 2px solid #04AA6D;
}
.button1:hover {
background-color: #04AA6D;
color: white;
}
<button class="button button1">Green</button>
CSS Animations
• An animation lets an element gradually change from one style to another.
<head>
<style>
button{background-color:blue; color:white; animation-name: test; animation-duration: 3s;}
@keyframes test
{
0%{}
100%{transform: rotate(360deg); background-color:red;}
}
</style>
</head>
<body>
<button>Submit</button>
</body>
CSS Animations - Activity
Create an animated banner for a website using CSS. The banner should:
•Contain text that moves from left to right across the screen.
•Change color when hovered over.
•Fade in when the page loads.
Instructions:
•Use keyframes for the animations.
•Explain the use of the @keyframes rule and how each animation is applied.
•Submit the HTML and CSS files with a description of the animation effects used.
Activity - Basic Styling
• Create a simple webpage with a header, a paragraph, and a button.
• Style the header with a background color of your choice, center-align the text, and set a padding
of 20px.
• Style the paragraph text to be justified, with a font size of 16px, and line height of 1.5.
• Style the button with a background color, border-radius of 5px, and change the background color
when the user hovers over it.
<button class="btn">Hover Me</button>
CSS Transition:The transition property in the .btn class defines the properties
.btn { you want to animate: background-color and transform, both with a duration
padding: 10px 20px; of 0.3 seconds and ease timing function (which makes the change
font-size: 16px; smoother).This ensures that when the button is hovered, the background
color and scale change gradually.
color: white;
background-color: #3498db;
CSS Transformation:The transform: scale(1.1) inside the .btn:hover selector
border: none; makes the button 10% larger when hovered over.
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease, transform 0.3s ease;
}
.btn:hover {
background-color: #2ecc71;
transform: scale(1.1);
}
Responsive web page using CSS
1. Media Queries: Adjust styles based on the device's screen size.
2. Flexible Grid Layouts: Use CSS Grid or Flexbox to create layouts that adjust to screen size.
3. Relative Units: Use percentages, em, or rem for sizing, which adjust according to screen size.
Media Queries
Media Queries
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: green;
color:white;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h1>Media Query</h1>
</body>
CSS Grid
• The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having
to use floats and positioning.
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
</div>
<html>
<head> <body>
<style> <div class="container">
.container { <div class="header">Header</div>
display: grid; <div class="sidebar">Sidebar</div>
grid-template-columns: 200px 1fr; <div class="content">Main Content</div>
grid-template-rows: auto 1fr auto; <div class="footer">Footer</div>
gap: 20px; } </div>
.header { </body>
grid-column: 1 / 3; </html>
background-color: #f8f8f8;}
.sidebar {
background-color: #eaeaea;}
.content {
background-color: #f1f1f1;}
.footer {
grid-column: 1 / 3;
background-color: #ddd;}
</style>
</head>
CSS Grid – Activity
• Design a simple gallery layout using CSS Grid.
• Create a grid that has 3 columns and as many rows as needed.
• Ensure that the images inside the grid resize properly without distortion and maintain their aspect ratio.
CSS Flexbox
What is Flexbox?
– Flexbox, short for Flexible Box Layout, is a CSS layout
model that provides a more efficient way to design,
align, and distribute space among items within a
container. It is particularly well-suited for creating
complex layouts and aligning elements in a
responsive and dynamic manner.
Why use Flexbox?
• Responsive Design
• Efficient Alignment
• Simplified Layouts
.container {
display: flex; /* or inline-flex */
}
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
Eg:
<html>
<head>
<style>
.nav {
display: flex;
justify-content: space-around;
background-color: #f8f8f8;
}
.nav-item {
padding: 10px;
}
</style>
</head>
<body>
<div class="nav">
<a class="nav-item" href="#">Home</a>
<a class="nav-item" href="#">About</a>
<a class="nav-item" href="#">Services</a>
<a class="nav-item" href="#">Contact</a>
</div>
</body>
</html>
Difference between Flexbox and Grid layouts in CSS
Flexbox (Flexible Box Layout) Grid Layout
One-dimensional layout: Flexbox is designed to control the Two-dimensional layout: CSS Grid is designed to control the
layout in a single direction, either row or column. It’s best for layout in both rows and columns, allowing for more complex
aligning and distributing space among items in a container layouts that span across multiple axes. It provides full control
along one axis. over the arrangement of items within a grid container.
Primary use case: Flexbox is ideal for simple layouts or when Primary use case: Grid is ideal for designing entire web pages
you need to align elements along a single direction, such as or sections of a webpage where you need to create multi-row
horizontally aligning navigation links or vertically centering and multi-column structures, such as creating a gallery or a
items within a container. complete webpage layout.
Navigation bars: If you need to align menu items in a row and Page layouts or image galleries: If you’re designing a page with
evenly distribute them across the screen multiple sections (header, sidebar, content, footer)
pseudo-classes and pseudo-elements in CSS
• Pseudo-classes:
• Apply styles to an element based on its state (e.g., :hover, :focus).
– Example: a:hover { color: red; }
• Pseudo-elements:
• Apply styles to a specific part of an element (e.g., ::before, ::after).
– Example: p::first-letter { font-size: 2em; }
Any Questions..?
Thank You…
