Introduction to Cascading
Style Sheet(CSS)
13/01/2025
Introduction
❖ Building blocks
❖ Styling text
❖ Layout
What are CSS?
CSS is a simple mechanism for adding style to HTML documents
or to define the appearance (Look and feel of your pages).
With CSS, you can specify the presentation of elements on a
webpage like fonts,spacing of texts, size, color, positioning
Separate from the documents structure and
content(section,headers ,body ,text links).
Cont’
The cascading style sheet language:
●
Used to describe the presentation (the look and feel) of a document written in a markup language.
●
Primarily used to style documents written in HTML/XHTML (web pages), but it can also be used to style XML and
other markup languages.
●
Made up of rules. Web browsers interpret these rules in a specific, top-to- bottom, or cascading manner (that is, if two
rules are in conflict with one another, the last rule listed overrides the previous rule). The CSS rules control the look, or
style of the content of these markup languages.
●
Placed in a central location (sheet) for the browser to interpret (generally located in either in the <head> of the
document that is being styled, or in a separate linked file).
Driving problem behind CSS
What font type and size does <h1> Introduction</h1> generate?
Answer: Some default from the browser (HTML tells what browser how)
Early HTML - Override defaults with attributes
<talbe border = “2” bordercolor= “black”>
Style sheets were added to address this:
Specify style to use rather than browser default
Not have to code styling on every element
Key concept: Separate style from content
Content (What to display) is in HTML files / document and also describes the
structure of pages
Formatting information (how to display it) is in separate style sheets(CSS files)
Use an element attribute named id to link (e.g <h1 id = “theTopHeading”>)
Result: define style information once,use in many places
Ways used in CSS
You can declare document styles inline in the HTML5 markup
In Embedded style sheet(Internal)
In separate CSS files(External CSS)
Inline Style
You can apply properties and values to a single element by using the
style attribute in the element itself.
<h1 style="color: red">Introduction</h1>
To add multiple properties, just separate them with semicolons,
<h1 style="color: red; margin-top: 2em">Introduction</h1>
Cont’
❖ Inline styles apply only to the particular element in which they appear.
❖ Inline styles should be avoided, unless it is absolutely necessary to over- ride
styles from an embedded or external style sheet.
❖ Inline styles are problematic in that they intersperse presentation information
into the structural markup. They also make it more difficult to make changes
because every style attribute must be hunted down in the source.
Embedded Style Sheet
It is placed in a document via the style element, and its rules apply only to that document.
The style element must be placed in the head of the document. This example also includes
a comment
<head>
<title>Required document title here</title>
<style>
/* style rules go here */
</style>
</head>
Cont’
<style>
p { color: red; }
p { color: blue; } p { color: green; }
</style>
External Style Sheet
❖ An external style sheet is a separate, text-only document that contains a number of style rules. It must be named with
the .css suffix. The .css document is then linked to (via the link element) or imported (via an @import rule in a style
sheet) into one or more HTML documents. In this way, all the files in a website may share the same style sheet. This is
the most powerful and preferred method for attaching style sheets to content.
❖ External CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each HTML
document.
<link rel="stylesheet" type="text/css" href="style.css">
CSS Selector
Cont’
Pseudo Selectors
CSS Properties
Control many style properties of an element:
❖ Coloring
❖ Size
❖ Position
❖ Visibility
❖ Many more:(e.g. P{text-decoration: line - through;})
❖ Used in animation
Color - Properties : Color & background-color
CSS Box Model
Size Properties - Element,pad,margin,border
