Prepared by: Mr. Devendra Sharma, Lecturer, CSE, GP Gaya.
Cascading Style Sheets
CSS is the language use for style a Web page. CSS stands for Cascading Style Sheets. CSS
describes how HTML elements are to be displayed on screen, paper, or in other media. It can
control the layout of multiple web pages all at once. The word cascading means that a style
applied to a parent element will also apply to all children elements within the parent. So, if
you set the color of the body text to "blue", all headings, paragraphs, and other text elements
within the body will also get the same color. External stylesheets are stored in CSS files. CSS
is used to define styles for your web pages, including the design, layout and variations in
display for different devices and screen sizes. Example:
CSS Syntax
A CSS rule consists of a selector and a declaration block.
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.
Example Explained
• 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.
CSS Selectors
A CSS selector selects the HTML element(s) for which we want to style.
CSS selectors are divided 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.
If we want that all <p> elements on the page will be center-aligned, with a red text color then
write the css for <p> :
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.
The CSS rule below will be applied to the HTML element with id="para1":
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. In this
example all HTML elements with class="center" will be red and center-aligned:
You can also specify that only specific HTML elements should be affected by a class. In this
example only <p> elements with class="center" will be red and center-aligned:
HTML elements can also refer to more than one class. In this example the <p> element will be styled
according to class="center" and to class="large":
Note: A class name cannot start with a number!
How To Add CSS in HTML page
???
When a browser reads a style sheet, it will format the HTML document according
to the information in the style sheet. There are three ways of inserting a style
sheet:
• Internal CSS
• External CSS
• Inline CSS
Internal CSS (embedded style sheet)
An internal style sheet may be used if one single HTML page has a unique style. Internal styles
are defined inside the <style> element, inside the <head> section of an HTML page.
External CSS
Each HTML page must include a reference to the external style sheet. External
styles are defined within the <link> element, inside the <head> section of an
HTML page.
An external style sheet can be written in any text editor, and must be saved with
a .css extension. The external .css file should not contain any HTML tags. Here
is how the "[Link]" file looks:
Inline CSS
An inline style may be used to apply a unique style for a single element. To use inline styles,
add the style attribute to the relevant element. The style attribute can contain any CSS property.
Inline styles are defined within the "style" attribute of the relevant element:
An inline style loses many of the advantages of a style sheet (by mixing content with
presentation).
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets,
the value from the last read style sheet will be used.
[Link]
If the internal style is defined after the link to the external style sheet, the <h1> elements will
be "orange".
However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":
Advantages of CSS
1. Separation of Content from Design
CSS allows you to separate your HTML content from styling, making your code cleaner and
easier to maintain and manage.
2. Greater Design Flexibility
CSS provides advanced styling options like animations, transitions, and grid systems, giving
developers more creative control over the look and behaviour of a website.
3. CSS style Consistency
CSS styles can be reused across multiple pages, saving time and effort.
By adding link tag to various files your one CSS file containing a fixed set of rules can be implemented
on various HTML files at once in return increasing the reusability of that CSS declaration for any specific
element.
4. Responsive Design
CSS enables responsive designs that adapt to different screen sizes using media queries. User can
apply various properties to an element for different screen sizes.
5. Customizable Styling
You can customize elements to enhance user experience with animations, transitions, and more.
6. Consistency Across Pages
Applying a single CSS file ensures a consistent look across all pages of your website.
7. Improves page Loading speed
External stylesheets can reduce the size of HTML files, leading to faster loading times.
• In Comparison to internal CSS when External CSS is used the page loading time decreases and
the time period between DOM construction and painting of page decreases.
• Loading time of Inline CSS>External CSS>Internal CSS.
• When using External CSS it reduces the page size as the CSS for the HTML content is written in
a separate page which leads to reduction in file size and quicker loading of the content page.
Disadvantages of CSS
1. Cross-Browser Compatibility Issues
Different browsers may render CSS rules differently, requiring specific prefixes or hacks for
consistency. The older and modern versions of the same browser are even inconsistent in this scenario.
2. Complexity in Large Projects
Managing styles in large projects can lead to conflicts and difficulties in understanding the structure
if CSS is poorly organized. Without proper naming conventions or methodologies , styles may override
one another unexpectedly.
3. No Built-in Security
CSS files can be viewed or modified directly in the browser, which might expose design-sensitive
information. Sensitive resources or custom styles can be accessed or misused by users.
4. Debugging Can Be Challenging
Finding the source of style conflicts or why a rule is not applied can be hard, especially with cascading
rules. If div p is applied, it may not be immediately clear why the color: green is not working, especially
in large files.
5. Dependency on External Files
When an external CSS file fails to load, the page may appear broken or un-styled.
6. Overhead with Inline Styles
Using inline styles for quick fixes can lead to messy and hard-to-maintain code. This approach is not
reusable and makes the HTML harder to read.
3.2 Style Sheet Property
CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used CSS properties. You will learn more about
them later.
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.
CSS Border
The CSS border property defines a border around an HTML element.
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border.
CSS Margin
The CSS margin property defines a margin (space) outside the border.
Assignment 3
Q1. Explain Background and color gradients in CSS setting font and
text in style sheet using table layout.
Q2. Explain selectors Class rule and ID rules with examples.
Term Work Questions
Q1. Explain types of style sheets with syntax and examples.
Q2. Create a table and provide style using external style sheet.
Reference :
1. [Link]
2. [Link]
3. [Link]