Introduction to CSS
Cascading Style Sheets (CSS) - Introduction and Types of CSS
Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation of a document written in a
markup language like HTML.
CSS is a cornerstone technology of the World Wide Web,
alongside HTML and JavaScript.
CSS was Developed by Hakon Wium Lie of MIT in 1995.
In 1996, level 1 of CSS was published, level 2 comes in 1998
and level 3 ( CSS3) in 2009 with HTML5.
CSS describes how elements should be rendered on screen,
on paper, in speech, or on other media.
CSS saves a lot of work. It can control the layout of
multiple web pages all at once
With CSS, it is easier to build a website, as css can style
whole website using one single css
file.
CSS handles the look and feel part of a web page.
Using CSS, you can control the color of the text, the style
of fonts, the spacing between paragraphs, how columns are sized
and laid out, what background images or colors are used, layout
designs, variations in display for different devices and screen
sizes as well as a variety of other effects.
CSS Syntax
A CSS rule-set 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.
Inside declaration block, property:value pair is used.
Colon : is used to separate property and value.
To add next property value pair, use ; semi-colon.
CSS Syntax is not case-sensitive, but prefer lowercase.
CSS Property and Value
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 provides variety of properties for styling and
positioning the HTML web pages.
Example: font, border, text-decoration, background, position,
padding, margins, etc..
CSS Styles are usually written inside <style>
element under Head Section. This way of
styling is Internal CSS.
Applying CSS in HTML
You can do in three ways:-
Create a separate CSS file containing style property-value
pairs and link it with <link> tag.
Write CSS property-value pairs in the web page inside
<style> tags
Write CSS property-value pairs in the HTML element
starting tag using STYLE attribute
There are three ways of inserting a style sheet:
External CSS - Create a separate CSS file containing style
property-value pairs.
Internal CSS - Write CSS property-value pairs in the web
page inside <style> tags.
Inline CSS - Write CSS property-value pairs in the HTML
element’s Starting tag using STYLE attribute.
INLINE CSS
Inline CSS
Inline CSS allows you to apply a unique style to one
HTML element at a time.
You assign CSS to a specific HTML element by using the
style attribute with any CSS properties defined within it.
The style attribute is written in the starting tag of a HTML
element
When to use Inline CSS?
Inline styles in CSS could be useful for previewing changes
instantly or adding CSS rules to only one or two elements.
Tip: use of inline CSS is not a recommendation. Combining
CSS and HTML leads to messy code.
Additionally, inline styles method is difficult to update.
Note: Inline CSS styles will always override style
properties determined in internal or external style sheets.
Internal CSS or Embedded CSS
Internal CSS is used to apply styles on a single document
or page.
It is written inside the <style> tags within head section.
Styling changes apply to every specific element found in
the file.
External CSS
An external stylesheet is used when you want to apply one
style to whole website (multiple web pages)
The styles are written in a separate file with .css extension.
The stylesheet files are linked using the <link> tag which
should be placed in the head section of an HTML page
Using External Stylesheets, You can apply same styles to
multiple web pages.
External CSS - <link> tag
The <link> tag defines the relationship between the current
document and an external resource.
Attributes in the link tag:
rel - Specifies the relationship between the current
document and the linked document. It takes the value
“stylesheet”.
href - Specifies the location of the linked external
stylesheet.
Type - Specifies the media typed of the linked document.
Value: “text/css”
We can have all the three methods applied to a web page. If
same CSS property is defined for an element in Internal,
External as well as Inline, then Inline CSS has the highest
priority, then comes Internal/Embedded followed by External
CSS which has the least priority.
Which style has highest priority?
What style will be used when there is more than one style
specified for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style
sheet by the following rules, where number one has the highest
priority:
Inline style (inside an HTML element)
Internal style sheets and External (in the head section)
Browser default
So, an inline style has the highest priority, and will override
external and internal styles and browser defaults.
Use <link> tag in the head section of all these web pages.
<link rel=“stylesheet” type=“text/css” href=“style.css”>
CSS Homework
Create a web page with a heading and a paragraph. Using CSS
apply the following:
Apply a background color to the webpage.
Change the color of heading to blue and alignment center.
Change the font of paragraph to ‘Verdana’ and font size to
20px.
Note : Refer std 12th IT TextBook for properties
of CSS.
