UNIVERSITY INSTITUTEOF ENGINEERING

Bachelor of Engineering (Computer

Science & Engineering)
WEB TECHNOLOGIES (22ITT-312)

rad

Need for CSS, DISCOVER . LEARN .

EMPOWER
introduction to CSS,
basic syntax and BY: Kirat Kaur
structure, using CSS AP(CSE)

University Institute of Engineering(UIE)

 Content
• Need for CSS,
• introduction to CSS,
• basic syntax and structure,
• using CSS
 Department of Computer Science and Engineering (CSE)

What is CSS?
• CSS stands for Cascading Style Sheets and it is the
language used to style the visual presentation of web
pages.
• CSS is the language that tells web browsers how to
render the different parts of a web page.
• Every item or element on a web page is part of a
document written in a markup language. In most cases,
HTML is the markup language, but there are other
languages in use such as XML.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

How is CSS Different From HTML?

• All critical website content should be added to the
website using a markup language such as HTML.
• Presentation of the website content should be defined by
a styling language such as CSS.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

CSS Syntax
• CSS syntax includes selectors, properties, values,
declarations, declaration blocks, rulesets, at-rules, and
statements.
• A selector is a code snippet used to identify the web page
element or elements that are to be affected by the styles.
• A property is the aspect of the element that is to be
affected. For example, color, padding, margin, and
background are some of the most commonly used CSS
properties.
• A value is used to define a property. For example, the
property color might be given the value of red like
this: color: red;
University Institute of Engineering (UIE)
 Department of Computer Science and Engineering (CSE)

• The combination of a property and a value is called

a declaration.
• In many cases, multiple declarations are applied to a
single selector. A declaration block is the term used to refer to
all of the declarations applied to a single selector.
• A single selector and the declaration block that follows it in
combination are referred to as a ruleset.
• At-rules are similar to rulesets but begin with the @ sign rather
than with a selector. The most common at-rule is
the @media rule which is often used to create a block of CSS
rules that are applied based on the size of the device viewing
the web page.
• Both rulesets and at-rules are CSS statements.
University Institute of Engineering (UIE)
 Department of Computer Science and Engineering (CSE)

An Example of CSS Syntax

• Let’s use a block of CSS to clarify what each of these items
is.
• h1 { color: red;
• font-size: 3em;
• text-decoration: underline; }
• In this example, h1 is the selector. The selector is
followed by a declaration block that includes three
declarations. Each declaration is separated from the next
by a semicolon. The tabs and line breaks are optional but
used by most developers to make the CSS code more
human-readable.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• The ruleset contains three declarations:

• color:red;
• font-size: 3em;
• text-decoration: underline;
• color, font-size, and text-decoration are all properties.
There are literally hundreds of CSS properties you can
use, but only a few dozen are commonly used.
• We applied the values red, 3em, and underline to the
properties we used. Each CSS property is defined to
accept values formatted in a specific way.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• For the color property we can either use a color keyword or a

color formula in Hex, RGB, or HSL format. In this case, we used
the color keyword red. There are a few dozen color keywords
available in CSS3, but millions of colors can be accessed with
the other color models.
• We applied the value of 3em to the property font-size. There
are a wide range of size units we could have used including
pixels, percentages, and more.
• Finally, we added the value underline to the property text-
decoration. We could have also used overline or line-
through as values for text-decoration. In addition, CSS3 allows
for the use of the line-styles solid, double, dotted, dashed, and
wavy was well the specification of text-decoration colors.
University Institute of Engineering (UIE)
 Department of Computer Science and Engineering (CSE)

Preparing HTML Markup for Styling

• CSS should be used to add content to a web page. That
task is best handled by markup languages such as HTML
and XML. Instead, CSS is used to pick items that already
exist on a web page and to define how each item should
appear.
• In order to make it as easy as possible to select items on a
web page, identifiers should be added to elements on the
webpage.
• These identifiers, often called hooks in the context of CSS,
make it easier to identify the items that should be
affected by the CSS rules.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• Classes and IDs are used as hooks for CSS styles. While
the way CSS renders is not affected by the use of classes
and hooks, they give developers the ability to pinpoint
HTML elements that they wish to style.
• Classes and IDs aren’t interchangeable. It’s important to
know when to use each.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

When to Use Classes

• Use classes when there are multiple elements on a single
web page that need to be styled. For example, let’s say
that you want links in the page header and footer to be
styled in a consistent manner, but not the same way as
the links in the body of the page.
• To pinpoint those links you could add a class to each of
those links or the container holding the links. Then, you
could specify the styles using the class and be sure that
they would only be applied to the links with that class
attribute.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

When to Use IDs

• Use IDs for elements that only appear once on a web
page. For example, if you’re using an HTML unordered
list for your site navigation, you could use an ID such
as nav to create a unique hook for that list.
• Here’s an example of the HTML and CSS code for a simple
navigation bar for a basic e-commerce site.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• <style> #nav { background: lightgray; overflow:

auto; } #nav li { float: left; padding: 10px;
} #nav li:hover { background: gray; }
• </style>
• <ul id="nav">
• <li><a href="">Home</a></li>
• <li><a href="">Shop</a></li>
• <li><a href="">About Us</a></li>
• <li><a href="">Contact Us</a></li>
• </ul>

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

When Not to Use Hooks

• You don’t have to add a class or ID to an HTML element in
order to style it with CSS. If you know you want to style
every instance of a specific element on a web page you
can use the element tag itself.
• For example, let’s say that you want to create consistent
heading styles. Rather than adding a class or ID to each
heading it would be much easier to simply style all
heading elements by using the heading tag.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• <style> ul { list-style-type: upper-roman;

margin-left: 50px; } p{ color: darkblue
}</style>
• <p>Some paragraph text here.
• Two short sentences.</p>
• <ul><li>A quick list</li>
• <li>Just two items</li></ul>
• <p>Additional paragraph text here. This time let's go for
three sentences. Like this.</p>

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Ways of Linking CSS Rules to an HTML Document

• There are three ways of adding CSS rules to a web page:
• Inline styles
• Internal stylesheets
• External stylesheets

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

Inline Styles
• Inline styles are applied to specific HTML elements. The
HTML attribute style is used to define rules that only
apply to that specific element. Here’s a look at the syntax
for writing inline styles.
• <h1 style="color:red; padding:10px; text-
decoration:underline;">Example Heading</h1>
• That code would cause just that heading to render with
red underlined text and 10 pixels of padding on all sides.
There are very few instances where inline styles should
be used.
• In nearly all cases they should be avoided and the styles
added to a stylesheet.
University Institute of Engineering (UIE)
 Department of Computer Science and Engineering (CSE)

Internal Stylesheets
• The earlier examples in this tutorial make use of internal
stylesheets. An internal stylesheet is a block of CSS added
to an HTML document head element.
• The style element is used between the opening and
closing head tags, and all CSS declarations are added
between the style tags.
• We can duplicate the inline styles from the code above in
an internal stylesheet using this syntax.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• <head>
• <style> h1 { color: red; padding: 10px;
text-decoration: underline; } </style></head>
• <body> <h1>Example Heading</h1>
• </body>

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

External Stylesheets
• External stylesheets are documents containing nothing other
than CSS statements. The rules defined in the document are
linked to one or more HTML documents by using the link tag
within the head element of the HTML document.
• To use an external stylesheet, first create the CSS document.
• /*************************************************Save with
a name ending in .css such as
styles.css*************************************************/
h1 { color: red; padding: 10px; text-decoration:
underline;
}

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• Now that we have an external stylesheet with some

styles, we can link it to an HTML document using
the link element.
• <head><link rel="stylesheet" type="text/css"
href="styles.css"></head>
• <body> <h1>Example Heading</h1>
• </body>

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

When to Use Each Method

• In nearly all cases external stylesheets are the proper
way to style web pages. The primary benefit to using
external stylesheets is that they can be linked to any
number of HTML documents.
• As a result, a single external stylesheet can be used to
define the presentation of an entire website.
• Internal stylesheets may be used when designing a
simple one-page website. If the website will never grow
beyond that single initial page using an internal
stylesheet is acceptable.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

• Inline styles are acceptable to use in two instances:

• When writing CSS rules that will only be applied to a
single element on a single web page.
• When applied by a WYSIWYG editor such as the tinyMCE
editor integrated into a content management system
such as WordPress.
• In all other cases, inline styles should be avoided in favor
of external stylesheets.

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

How CSS Works

• When writing CSS, there are many times that rules are
written that conflict with each other. For example, when
styling headers, all of the following rules may apply to
an h1 element.
• An element-level rule creating consistent h1 rendering
across all pages of the website.
• A class-level rule defining the rendering of h1 elements
occurring in specific locations – such as the titles of blog
posts.
• An id-level element defining the rendering of
an h1 element used in just one place on a one or more
web pages – such as the website name.
University Institute of Engineering (UIE)
 Department of Computer Science and Engineering (CSE)

SUMMARY
• Need for CSS,
• introduction to CSS,
• basic syntax and structure,
• using CSS

University Institute of Engineering (UIE)

 Department of Computer Science and Engineering (CSE)

REFERENCES
• Web Link:
Intimidated By CSS? The Definitive Guide To Make Your F
ear Disappear » (html.com)
• Video Lecture: https://www.youtube.com/watch?
v=1Rs2ND1ryYc

University Institute of Engineering (UIE)