School of Computer Science and Engineering (SCOPE)
MDI3001 – Advances in Web Technologies
Module - 2
Cascading Style Sheets (CSS)
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS is the language we use to style an HTML document.
• CSS describes how HTML elements should be displayed.
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External stylesheets are stored in CSS files
Why Use CSS?
• CSS is used to define styles for
your web pages, including the
design, layout and variations in
display for different devices and
screen sizes.
CSS Syntax
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
CSS Syntax
• CSS comprises style rules that are interpreted by the browser and then applied to
the corresponding elements in your document. A style rule set consists of a selector
and declaration block.
• Selector: A selector in CSS is used to target and select specific HTML elements to
apply styles to.
• Declaration: A declaration in CSS is a combination of a property and its
corresponding value.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
Examples
Example
selector {
property1: value1;
property2: value2;
}
p{
color: blue;
text-align: center;
}
CSS Example
• p is a selector in CSS (it points to the HTML element you want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value
Difference
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<main>
<h1>HTML Page</h1>
<p>This is a basic web page.</p>
</main>
</body>
</html>
Difference
<!DOCTYPE html> p{
<html> font-family: sans-serif;
<head> color: orange;
<title>Example</title> }
<style> </style>
main { </head>
width: 600px; <body>
height: 200px; <main>
padding: 10px; <h1>My first Page</h1>
background: beige; <p>This is a basic web page.</p>
} </main>
h1 { </body>
color: olivedrab;
border-bottom: 1px dotted darkgreen; </html>
}
Difference
CSS Selectors
• A CSS selector selects the HTML element(s) you want to style.
• CSS selectors are used to "find" (or select) the HTML elements you
want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute
value)
The CSS element Selector
• The element selector selects HTML elements based on the element
name.
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a specific
element.
• The id of an element is unique within a page, so the id selector is used to select one
unique element!
• To select an element with a specific id, write a hash (#) character, followed by the id
of the element.
Note: An id name cannot start with a number!
The CSS class Selector
• The class selector selects HTML elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed by the
class name.
You can also specify that only specific HTML elements should be affected by a class.
HTML elements can also refer to more than one class.
Note: A class name cannot start with a number!
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style
definitions.
• Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
Types of CSS
Inline CSS
Inline CSS contains the CSS property in the body section attached to the
element is known as inline CSS. This kind of style is specified within an
HTML tag using the style attribute.
Internal or Embedded CSS
• This can be used when a single HTML
document must be styled uniquely.
The CSS rule set should be within
the HTML file in the head section i.e.
the CSS is embedded within the <style> tag
inside the head section of the HTML file.
External CSS
• External CSS contains separate CSS files that contain only style properties with the
help of tag attributes (For example class, id, heading, … etc). CSS property is
written in a separate file with a .css extension and should be linked to
the HTML document using a link tag. It means that, for each element, style can be
set only once and will be applied across web pages
• link tag is used to link the external style sheet with the html webpage.
• href attribute is used to specify the location of the external style sheet file.
Task 1
CSS Box Model
• The CSS Box model is essentially a box that wraps around every HTML
element.
• It consists of:
• Margins
• Borders
• Padding
• Content
Padding-top:50px;
margin-top:50px;
Padding-left:50px;
margin-left:50px;
No Change; Border not reflected
Examples
Padding:30px;
Task 2
Task 3
Hi, How are you. Hope
you are doing good
Task 4
Display Property
Examples
Note: display:inline; width and height won’t work
Example
Note: By default display:block;
CSS Basic Properties
• Here are some basic CSS properties to work with.
• Text Properties
• List Properties
• Border Properties
• Font Properties
CSS Backgrounds
• The CSS background properties are used to add background effects for
elements.
CSS Backgrounds
CSS Background Image
Example
CSS Background Image Repeat
Example
CSS Background Attachment
CSS background - Shorthand property
References:
• More Information:
• [Link]
• [Link]
• [Link]
• [Link]
• [Link]