Unit 5 – Introduction to CSS

Basic of CSS

 CSS stands for Cascading Style Sheets

 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 style sheets are stored in CSS files
Cascading Style Sheets (CSS): CSS is defined as a method sheet language that provides web designers
control over how an internet site communicates with web browsers including the formatting and display
of their HTML documents.
CSS or cascading sheet may be a text-based coding language that specifies the website formats and
the way a site communicates with web browsers. The language allows web developers to regulate
various style elements and functionalities, like layout, color, fonts, and therefore the formatting and
display of HTML documents.
The main goal (as a method sheet language) was to separate document content from document
presentation, which incorporates style elements, like color, layout, and fonts. CSS handles the design
and feel a part of an internet page. Using CSS, you will control the color of the text, the design of fonts,
the spacing between paragraphs, how columns are sized and laid out, etc.
CSS instructs the display of the HTML on how the web site will display at the user’s end. Let us have a
glance on the benefits and drawbacks of CSS.

Advantages of CSS,
Advantages of CSS
CSS has many advantages that enable developers to design a website. Some of these advantages are:
1. Better Website Speed
For a website to function efficiently, it should have a faster load time. In modern times, people usually
wait for just a couple of seconds for a website to load. So, it’s important to ensure faster speed. For
companies wanting to ensure a faster and smooth website experience, CSS becomes paramount to
their success.
2. Easier to Maintain
CSS is easy to maintain due to less maintenance time. This is because a single line code change affects
the entire web page. Also, if improvements are required, then less effort is required to affect changes in
the webpage code.
3. Consistent Design
You would have seen many websites that are elegant and user-friendly. One thing common to all these
websites is consistency in design. CSS enables developers to ensure the style elements are applied
consistently across several web pages.
4. Time-Saving
Due to faster speed and easier maintenance, CSS saves a lot of time and effort in the web development
process due to faster loading time. Here, lesser time ensures designer efficiency.
5. Better Device Compatibility
People use different smart devices to view a particular website. It can be a smartphone, PC or laptop.
For this purpose, websites are required to be device compatible. CSS ensures the task is done smoothly
by providing better compatibility.
6. Positioning of Design Elements
You can change the position of an HTML tag with the help of CSS. You can place the elements like an
image on any part of the webpage as and when required.

Role of CSS in Web Designing

CSS, which stands for Cascading Style Sheets, is a fundamental component of web design, playing a
crucial role in creating visually engaging and attractive web pages. Its primary function is to control the
presentation and layout of a web page, enabling designers to customize the appearance of HTML
elements. Some key roles of CSS in web designing include:
1. Styling and Layout Control: CSS allows designers to specify the style, layout, and formatting
of HTML elements, including fonts, colors, margins, padding, and positioning. It provides the
ability to create visually appealing web pages that are consistent and aesthetically pleasing.
2. Consistency and Uniformity: By separating the content from its presentation, CSS facilitates
the creation of consistent styles across multiple web pages. Designers can define global styles
for elements, ensuring a uniform look and feel throughout the website.
3. Responsive Design: CSS plays a critical role in creating responsive web designs that adapt to
various screen sizes and devices. With the use of media queries and responsive design
techniques, CSS enables web pages to be easily accessible and usable on different devices, such
as desktops, tablets, and smartphones.
4. Ease of Maintenance: By centralizing the styling instructions in CSS files, designers can
efficiently manage and update the visual aspects of a website. This separation of content and
presentation allows for easier maintenance and updates, as changes to the design can be
applied globally across the site.
5. Accessibility and Usability: CSS can contribute to making websites more accessible and user-
friendly. By defining clear styles and layouts, CSS aids in creating a consistent visual hierarchy
that enhances the overall user experience and readability of the content.
6. Animation and Interactivity: CSS enables the incorporation of animations, transitions, and
interactive effects into web pages. This allows designers to create engaging and dynamic user
experiences without the need for additional scripting languages.
7. Search Engine Optimization (SEO): Proper use of CSS can contribute to the overall SEO of a
website. By structuring the content with appropriate HTML tags and using CSS to enhance the
user experience, designers can improve a website's search engine visibility and ranking.
Overall, CSS significantly influences the look, feel, and functionality of a website, playing a pivotal role
in creating visually appealing, user-friendly, and accessible web designs.

Role of CSS in Web Designing

CSS Syntax

A CSS rule set contains a selector and a declaration block.

Selector: Selector indicates the HTML element you want to style. It could be any tag
like <h1>, <title> etc.

Declaration Block: The declaration block can contain one or more declarations
separated by a semicolon. For the above example, there are two declarations:

1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to
color property.
1. Selector{Property1: value1; Property2: value2; ..........;}
.A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML
element where the CSS style is to be applied. The CSS property is separated by semicolons. It is a
combination of the selector name followed by the property: value pair that is defined for the specific
selector.
<!DOCTYPE html>
<html>
<head>
<!-- Style on h1 elements -->
<style>
h1 {
color: green;
text-align: center;
}
</style>
</head>

<body>
<h1>GeeksforGeeks</h1>
</body>
</html>
Internal CSS
The internal style sheet is used to add a unique style for a single document. It is defined in <head>
section of the HTML page inside the <style> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
1. </html>

External CSS
The external style sheet is generally used when you want to make changes on multiple pages. It is ideal
for this condition because it facilitates you to change the look of the entire web site by changing just
one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the head section.
Example:
1. <head>
2. <link rel="stylesheet" type="text/css" href="mystyle.css">
3. </head>
The external style sheet may be written in any text editor but must be saved with a .css extension. This
file should not contain HTML elements.

Let's take an example of a style sheet file named "mystyle.css".

File: mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
 margin-left: 20px;
}
Note: You should not use a space between the property value and the unit. For example: It should be
margin-left:20px not margin-left:20 px.
Inline CSS
We can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some
advantages of style sheets so it is advised to use this method sparingly.
If you want to use inline CSS, you should use the style attribute to the relevant tag.
Syntax:
<htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
Example:
<h2 style="color:red;margin-left:40px;">Inline CSS is applied on this heading.</h2>
<p>This paragraph is not affected.</p>
CSS Font
CSS Font property is used to control the look of texts. By the use of CSS font property you can change
the text size, color, style and more. You have already studied how to make text bold or underlined.
Here, you will also know how to resize your font using percentage.
These are some important font attributes:
1. CSS Font color: This property is used to change the color of the text. (standalone attribute)
2. CSS Font family: This property is used to change the face of the font.
3. CSS Font size: This property is used to increase or decrease the size of the font.
4. CSS Font style: This property is used to make the font bold, italic or oblique.
5. CSS Font variant: This property creates a small-caps effect.
6. CSS Font weight: This property is used to increase or decrease the boldness and lightness of
the font.
1) CSS Font Color
CSS font color is a standalone attribute in CSS although it seems that it is a part of CSS fonts. It is used
to change the color of the text.
There are three different formats to define a color:
o By a color name
o By hexadecimal value
o By RGB
In the above example, we have defined all these formats.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { color: red; }
h2 { color: #9000A1; }
p { color:rgb(0, 220, 98); }
 }
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
</body>
</html>
2) CSS Font Family
CSS font family can be divided in two types:
o Generic family: It includes Serif, Sans-serif, and Monospace.
o Font family: It specifies the font family name like Arial, New Times Roman etc.
Serif: Serif fonts include small lines at the end of characters. Example of serif: Times new roman,
Georgia etc.
Sans-serif: A sans-serif font doesn't include the small lines at the end of characters. Example of Sans-
serif: Arial, Verdana etc.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 { font-family: sans-serif; }
h2 { font-family: serif; }
p { font-family: monospace; }
}
</style>
</head>
<body>
<h1>This heading is shown in sans-serif.</h1>
<h2>This heading is shown in serif.</h2>
<p>This paragraph is written in monospace.</p>
</body>
</html>
3) CSS Font Size
CSS font size property is used to change the size of the font.
These are the possible values that can be used to set the font size:
Font Size Value Description
xx-small used to display the extremely small text size.
x-small used to display the extra small text size.
small used to display small text size.
medium used to display medium text size.
large used to display large text size.
x-large used to display extra large text size.
xx-large used to display extremely large text size.
smaller used to display comparatively smaller text size.
larger used to display comparatively larger text size.
size in pixels or % used to set value in percentage or in pixels.
<html>
<head>
<title>Practice CSS font-size property</title>
</head>
<body>
<p style="font-size:xx-small;"> This font size is extremely small.</p>
<p style="font-size:x-small;"> This font size is extra small</p>
<p style="font-size:small;"> This font size is small</p>
<p style="font-size:medium;"> This font size is medium. </p>
<p style="font-size:large;"> This font size is large. </p>
<p style="font-size:x-large;"> This font size is extra large. </p>
<p style="font-size:xx-large;"> This font size is extremely large. </p>
<p style="font-size:smaller;"> This font size is smaller. </p>
<p style="font-size:larger;"> This font size is larger. </p>
<p style="font-size:200%;"> This font size is set on 200%. </p>
<p style="font-size:20px;"> This font size is 20 pixels. </p>
</body>
</html>

4) CSS Font Style

CSS Font style property defines what type of font you want to display. It may be italic, oblique, or
normal.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h2 { font-style: italic; }
 h3 { font-style: oblique; }
h4 { font-style: normal; }
}
</style>
</head>
<body>
<h2>This heading is shown in italic font.</h2>
<h3>This heading is shown in oblique font.</h3>
<h4>This heading is shown in normal font.</h4>
</body>
</html>

5) CSS Font Variant

CSS font variant property specifies how to set font variant of an element. It may be normal and
small-caps.
<!DOCTYPE html>
<html>
<head>
<style>
p { font-variant: small-caps; }
h3 { font-variant: normal; }
</style>
</head>
<body>
<h3>This heading is shown in normal font.</h3>
<p>This paragraph is shown in small font.</p>
</body>
1. </html>

6) CSS Font Weight

CSS font weight property defines the weight of the font and specify that how bold a font is. The
possible values of font weight may be normal, bold, bolder, lighter or number (100, 200..... upto
900).
<!DOCTYPE html>
<html>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:lighter;">This font is lighter.</p>
<p style="font-weight:100;">This font is 100 weight.</p>
<p style="font-weight:200;">This font is 200 weight.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
<p style="font-weight:400;">This font is 400 weight.</p>
<p style="font-weight:500;">This font is 500 weight.</p>
<p style="font-weight:600;">This font is 600 weight.</p>
<p style="font-weight:700;">This font is 700 weight.</p>
<p style="font-weight:800;">This font is 800 weight.</p>
<p style="font-weight:900;">This font is 900 weight.</p>
</body>
</html>

Important question
What is CSS? Explain External CSS
Explain the role of CSS in web designing
What is CSS? Explain Advantages of CSS.
Describe Internal and External CSS.