Introduction to Cascading Style Sheets in HTML5
• Title: 1.4 Cascading Style Sheets in HTML5
• What is CSS?
• CSS stands for Cascading Style Sheets.
• It describes how HTML elements are to be displayed
on screen, paper, or in other media.
• CSS saves a lot of work by controlling the layout of
multiple web pages all at once.
• It allows you to control the look and feel of several
pages by changing a single source.
CSS Syntax
• Title: CSS Syntax
• A CSS rule set contains:
1) A selector:
2) A declaration block:
Components Explained:
• Selector: Indicates the HTML element you
want to style (e.g., `<h1>`, `<body>`).
• Declaration Block: Contains one or more declarations separated
by a semicolon.
• Example: `color: yellow;`
• Example: `font-size:11px;`
• Declaration: Each contains a property name and value, separated
by a colon.
• Property: A type of attribute of an HTML element (e.g., color,
border).
• Value: Assigned to CSS properties (e.g., "yellow" is assigned to
the color property).
• Syntax Structure: `Selector{Property1: value1; Property2:
value2}`
Types of CSS
• Title: Types of CSS
• Three methods of implementing styling
information to an HTML document:
• 1. Inline CSS
• 2. Embedded stylesheet or Internal CSS
• 3. External CSS
Inline Stylesheet
• Inline Css is used to apply on a single line or
element
• Example:
<h1 style=“color:red”>Rahman</h1>
Embedded Stylesheet or Internal CSS
• Used to style one HTML page.
• Written inside <style> tag in the <head>.
• Eg : <style> h1{color: Red;} </style>
• Affects all <h1> tags on the page.
External CSS Example
• <link rel="stylesheet" href="style.css">
• Example style.css: h1{color:navy;margin-
left:20px}
• Use external CSS to control multiple
pages.
• External CSS file
Visual Output from All Three CSS Types
CSS Properties
Property Use Value Example
Color Changes the color of Color name h1{color: maroon}
the text
Backgroun To set the background Color name body{background
d-color color in your webpage color:yellow}
Font- Used to bold text bold or 100, p{font-weight:300}
weight 200…900
Font-style Used to italicize text Italic, oblique or p{font-style:italic}
normal
Text- This property is used to 1. line-through p{text-decoration: underline}
decoration add 2. underline a{text-decoration: none}
1. strike-through 3. overline
marks 4. none
2. underline
3. overstrike
4. to remove underlines
from links
Property Use Value Example
Text-align This property is use to control left, right, h1{text
the horizontal alignment of any center or justify align:center}
block-level text that are
paragraphs, tables and other
elements
Font-family This is used to control the fonts Font name p{font family:arial}
Font-size This property allows you to px, in, mm, cm, p{font-size:10px}
control the size of the font pt
Letter-spacing This helps in controlling the px, in, mm, cm, h1{letter-spacing:
horizontal spacing between pt 5pt}
characters of text
Padding This property is used when you Pixel h1{padding:30px}
want to add padding (blank
spaces) around the content of an
element.
Border This property adds a border to a Solid, double, h1{border:double}
webpage element groove, ridge,
inset, outset,
dotted or
dashed
Property Use Value Example
Background- To set an image as the url(''X'') where X body{background image:
image background of your is the path of url('background. jpg')}
webpage image file
Background- To set the background repeat no-repeat background-repeat: repeat
repeat image to repeat or not background-repeat: no-repeat
Margin-Left Sets margin area on the px,pt,cm etc. h1{margin left;10px}
left side of the element.
CSS Id Selector
• Title: CSS Id Selector
• Description:
• Selects the `id` attribute of an HTML element to
select a specific element.
• An `id` is always unique within the page, making
it a unique element.
• Written with the hash character (`#`), followed
by the id name.
Output
CSS Class Selector
• Title: CSS Class Selector
• Description:
• Selects HTML elements with a specific `class` attribute.
• Used with a period character (`.`) followed by the class
name.
• Used when you want to change a group of elements
within your HTML page.
• The class name should not start with a number.
Output
Class Selector for Specific Element
• Title: Class Selector for specific element
• Description:
• To affect only one specific HTML element, use
the element name with the class selector.
Output
Universal Selector
• Title: Universal Selector
• Description:
• Used as a wildcard character.
• Selects all elements on the Webpages.
Output
Group Selector
• Title: Group Selector
• Description:
• Used to select all elements with the same style definitions.
• Minimizes code.
• Commas are used to separate each selector in grouping.
• CSS without group selector:
•
h1{ text-align:center;color:blue}
h2{ text-align:center;color:blue}
p {text-align:center;color:blue}
• CSS with grouping:
•
h1,h2,p{ text-align:center;color:blue}
Output
Positioning in CSS - Introduction
• Title: Positioning in CSS
• Purpose:
• CSS helps to position the HTML elements.
• The `position` property is used to set the
position for an element.
• Elements can be positioned using `top`,
`bottom`, `left`, and `right` properties.
• Syntax:
• Selector{position:value;top:value;
left:value:bottom:value;right:value}
• Values for `position` are `fixed`, `absolute`, `relative`.
• Values for `top`, `bottom`, `left`, `right` are in pixels.
• Four types of positioning in CSS:
• 1. Static Positioning
• 2. Fixed Positioning
• 3. Relative Positioning
• 4. Absolute Positioning
Static and Fixed Positioning
• Title: Static and Fixed Positioning
• 1. Static Positioning:
• This is the by-default position for HTML elements.
• It is not affected by the `top`, `bottom`, `left`, and `right`
properties.
• 2. Fixed Positioning:
• Helps to put the text fixed on the browser.
• Forces an element into a fixed position relative to the browser
window.
• The fixed element will not move, even when the page is scrolled.
Relative and Absolute Positioning
• Title: Relative and Absolute Positioning
• 3. Relative Positioning:
• Used to set the element relative to its normal position.
• 4. Absolute Positioning:
• Sets an element in a specific location and is not affected by the flow of the page.
• Positions the element at the specified coordinates relative to your screen top-left corner.
• Example:
• <!DOCTYPE html>
<html><head><style>
.first{position: relative;top: -10px;
right: -10px;}
h2{position: absolute;
left:100px; top:150px}
</style></head><body>
<h1 class="first">This is heading 1
</h1>
<h2>This is heading 2</h2>
</body></html>
• Output:
• "This is heading 1"
• "This is heading 2"
• Explanation of Output:
• Level 1 headings with `class="first"` have a relative position 10 pixels above (`top: -10px`) and 10 pixels to the
right (`right: -10px`) of their original position.
• All level 2 headings will be positioned 100 pixels from the left and 150 pixels from the top of the browser
window (due to `absolute` positioning).
Float Property
• Title: Float Property
• Description:
• A CSS property written in a CSS file or directly in the style of an
element.
• Defines the flow of content.
• Types of Floating Properties:
• 1. float: left: Keeps the element floated on the left side of the
container.
• 2. float: right: Keeps the element floated on the right side of the
container.
• 3. float: none: This is the default property; it shows the element as it is.
Display Property
• Title: Display property
• Description:
• Defines how components (div, hyperlink, heading, etc.) are going to be
placed on the web page.
• Specifies how the element is displayed.
• Syntax: Display : value;
• Values:
• Inline: Used to display an element as an inline element.
• Block: Used to display an element as a block element. It starts on a new
line and takes up the whole width of the browser window.
• Inline-Block: Very similar to inline, but allows setting width and height.
• None: The element is completely removed.
Example of Inline
Example of Block
