Scribd
Upload
53 views

CS600 Lecture1 CSS 1094

Cascading Style Sheets (CSS) provide rules that describe how HTML elements are presented on screen, in print, or other media. CSS handles the look and feel aspects of a web page by controlling elements like color, font, layout, and variations for different devices. There are three main ways to apply CSS rules - internal, external, and inline stylesheets. A CSS rule contains a selector that specifies the element the rule applies to, a property which is an attribute of the element, and a value assigned to the property.

Uploaded by

Mansab Ali
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
53 views

CS600 Lecture1 CSS 1094

Cascading Style Sheets (CSS) provide rules that describe how HTML elements are presented on screen, in print, or other media. CSS handles the look and feel aspects of a web page by controlling elements like color, font, layout, and variations for different devices. There are three main ways to apply CSS rules - internal, external, and inline stylesheets. A CSS rule contains a selector that specifies the element the rule applies to, a property which is an attribute of the element, and a value assigned to the property.

Uploaded by

Mansab Ali
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify

the process of making web pages presentable.


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, and variations in display for
different devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML

Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or
perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web
since the consortium was founded in 1994.
Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes
for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML
element. Each property has a name and a value, separated by a colon (:). Each property
declaration is separated by a semi-colon (;).
Advantages of CSS
 CSS saves time − you can write CSS once and then reuse same sheet in multiple HTML
pages. You can define a style for each HTML element and apply it to as many Web pages
as you want.
 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag.
So less code means faster download times.
 Easy maintenance − To make a global change, simply change the style, and all elements
in all the web pages will be updated automatically.
 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
 Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So it’s a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.

You can use CSS in three ways in your HTML document −


 External Style Sheet − Define style sheet rules in a separate .css file and then include that
file in your HTML document using HTML <link> tag.
 Internal Style Sheet − Define style sheet rules in header section of the HTML document
using <style> tag.
 Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using
style attribute.
External Style Sheet
If you need to use your style sheet to various pages, then its always recommended to define a
common style sheet in a separate file. A cascading style sheet file will have extension as .css
and it will be included in HTML files using <link> tag.
Example
Consider we define a style sheet file style.css which has following rules −
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes defined for
the HTML tags. I suggest you should not bother about how these rules are being defined
because you will learn them while studying CSS. Now let's make use of the above external
CSS file in our following HTML document −
<!DOCTYPE html>
<html>

<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>

<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>
This will produce the following result
Internal Style Sheet
If you want to apply Style Sheet rules to a single document only, then you can include those rules
in header section of the HTML document using <style> tag.
Rules defined in internal style sheet overrides the rules defined in an external CSS file.
Example
Let's re-write above example once again, but here we will write style sheet rules in the same HTML
document using <style> tag −
<!DOCTYPE html>
<html>

<head>
<title>HTML Internal CSS</title>

<style type = "text/css">


.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>

<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>

</html>
This will produce the following result −
Inline Style Sheet
You can apply style sheet rules directly to any HTML element using style attribute of the relevant
tag. This should be done only when you are interested to make a particular change in any HTML
element only.
Rules defined inline with the element overrides the rules defined in an external CSS file as well as
the rules defined in <style> element.
Example
Let's re-write above example once again, but here we will write style sheet rules along with the
HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>

<head>
<title>HTML Inline CSS</title>
</head>

<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>

</html>
This will produce the following result −

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.
You can put CSS Style Rule Syntax as follows −
selector { property: value }
Example − You can define a table border as follows −
table{ border :1px solid #C00; }
Here table is a selector and border is a property and given value 1px solid #C00 is the value of
that property.
You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.
The Type Selectors
This is the same selector we have seen above. Again, one more example to give a color to all
level 1 headings −
h1 {
color: #36CFFF;
}
The Class Selectors
You can define style rules based on the class attribute of the elements. All the elements having
that class will be formatted according to the defined rule.
.black {
color: #000000;
}
The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having that
id will be formatted according to the defined rule.
#black {
color: #000000;
}
CSS Comments
Many times, you may need to put additional comments in your style sheet blocks. So, it is very
easy to comment any part in style sheet. You can simple put your comments inside /*.....this is a
comment in style sheet.....*/.
You can use /* ....*/ to comment multi-line blocks in similar way you do in C and C++
programming languages.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is a multi-line comment */
</style>
</head>

<body>
<p>Hello World!</p>
</body>
</html>
CSS - Measurement Units
Before we start the actual exercise, we would like to give a brief idea about the CSS
Measurement Units. CSS supports a number of measurements including absolute units such as
inches, centimeters, points, and so on, as well as relative measures such as percentages and em
units. You need these values while specifying various measurements in your Style rules e.g.
border = "1px solid red".
We have listed out all the CSS Measurement Units along with proper Examples −
Unit Description Example
Defines a measurement as a percentage relative to p {font-size: 16pt; line-
%
another value, typically an enclosing element. height: 125%;}
cm Defines a measurement in centimeters. div {margin-bottom: 2cm;}
A relative measurement for the height of a font in em
spaces. Because an em unit is equivalent to the size of a
em p {letter-spacing: 7em;}
given font, if you assign a font to 12pt, each "em" unit
would be 12pt; thus, 2em would be 24pt.
This value defines a measurement relative to a font's x-
p {font-size: 24pt; line-
ex height. The x-height is determined by the height of the
height: 3ex;}
font's lowercase letter x.
in Defines a measurement in inches. p {word-spacing: .15in;}
mm Defines a measurement in millimeters. p {word-spacing: 15mm;}
Defines a measurement in picas. A pica is equivalent to
pc p {font-size: 20pc;}
12 points; thus, there are 6 picas per inch.
Defines a measurement in points. A point is defined as
pt body {font-size: 18pt;}
1/72nd of an inch.
px Defines a measurement in screen pixels. p {padding: 25px;}

You might also like