GRADE 10

Cascading Style Sheets

CSS (Cascading Style Sheets)

An abbreviated form for ‘Cascading Style Sheet’, CSS is what goes

into the website’s layout formatting. It is a collection of formatting
rules that helps website developers control the appearance and display
of the website they are working on.

CSS lets them define the styling decisions such as the position of the
images, the font size, the color to the background, and everything
else that has an impact on how a website will display on your web
browser. CSS is a language that describes the style of an HTML
document. Tags like <font>, and color attributes were added to the
HTML 3.2 specification. Development of large websites, where fonts and
color information were added to every single page, became a long and
expensive process. To solve this problem, the World Wide Web
Consortium (W3C) created CSS. CSS removed the style formatting from
the HTML page.

With CSS, the designer is able to implement functions that were

earlier not defined in a page’s HTML(used for the creation of the web
pages). With the new development, HTML and CSS work hand in hand to
create a great website. The best thing about CSS is its capability of
introducing uniform changes on all the pages of a website. Developers
work to define a style in cascading style sheet and they can use the
style throughout several pages by just referencing to that particular
CSS file. Hence, the amount of styling work is saved and repetition is
eliminated. CSS instructs the display of the HTML as to how the
website will display at the user’s end.

Advantages and disadvantages of CSS.

It is important to note that CSS is a functional language that enables

responsive designs on a website. Its usage is what really determines
the advantages and disadvantages of CSS.

Advantages of Cascading Style Sheet (CSS)

1. Saves Time: Let’s consider an example. You run a website that has
40 pages or more. Due to the need for some strategic changes in
the content of the website, you now need to change the text size
from 14pt to 12pt or vice-versa. It will take a lot of time to
change text in all the 40 pages. This is where CSS comes in. You
can define the changes in a single CSS file and reference all
those 40 pages to that same file and your work will be done. Your
entire website will start reflecting the size changes.
2. Help to Make Spontaneous and Consistent Changes Considering our very
own example from the first advantage above, imagine that you have
to make more fluid changes to your content. Again, with a single
style sheet, you will be able to ensure that the changes look
uniform on all the pages and not botched up. If it were not for
CSS, you would have to take notes of changes made to one page and
reference it while you make changes to another page, always going
1
 back and forth. With CSS, your changes are well applied
consistently.
3. Improves Page Loading Speed Code density on your website contributes
to its speed. The more the code, the slower the website gets.
Visitors are quick to abandon a website if it takes more than 2-3
seconds to load
4. Device Compatibility: CSS changes are device friendly. With people
using a whole lot of different range of smart devices to access
websites over the internet, there is a need for responsive web
design. CSS serves the purpose here by making your web pages more
responsive so that they end up displaying in the same manner on
all devices
5. Ability to Re-Position CSS lets you define changes in the position of
web elements present on a page. With its implementation,
developers can position HTML elements at the place they like in
order to align with the aesthetic appeal of the page or other
similar considerations.
6. Makes the Search Engine Better Crawl Your Web Pages CSS is secretly an
SEO (Search Engine Optimization, which is the practice of
increasing the quantity and quality of traffic to your website
through organic search engine results) enabler for your site. The
truth is that the search engine bots yield inaccurate details
when they crawl through cumbersome heaps of HTML code. However,
with CSS in place, the website design attributes are defined and
there is less code on the site, making the website SEO friendly

Disadvantages of Cascading Style Sheet (CSS)

1. Cross-Browser Issues: Implementing initial CSS changes on a website

is easy on the developer’s end. However, after the changes have
been made, you will have to confirm the compatibility if the CSS
is displaying similar change effects on all the browsers. This is
simply due to the fact that CSS works differently on different
browsers.
2. Confusion Due to Its Many Levels: The programming language world in
itself is crazily complicated for non-developers and beginners.
To add to that, different levels of CSS i.e. CSS; CSS 2; CSS 3
can be quite confusing.
3. Vulnerable: If you have worked with CSS, you probably know that it
is easily accessible because of its open text-based system. An
accident or a mere act of mischief with the files can end up
disrupting the display and formatting of your entire website. It
would only require a read/write access to the intended website to
override the changes.

CSS Syntax
A CSS rule-set consists of a selector and a declaration block:

2
 The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by

semicolons.

Each declaration includes a CSS property name and a value, separated

by a colon.

A CSS declaration always ends with a semicolon, and declaration

blocks are surrounded by curly braces.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS
 Internal CSS
 Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by
changing just one file. External stylesheets are stored in CSS files

Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

3
</body>
</html>

An external style sheet can be written in any text editor, and must be saved
with a .css extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks like:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head>
section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

4
</body>
</html>

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Cascading Order
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:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and
internal styles and browser defaults.

CSS describes how HTML elements should be displayed. Example

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

5
Example
In this example all <p> elements will be center-aligned, with a red text color:

p {
color: red;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}

CSS Comments
Comments are used to explain the code, and may help when you edit the
source code at a later date.

Comments are ignored by browsers.

Example
A CSS comment starts with /* and ends with */. Comments can also span
multiple lines:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example
Here, all <p> elements on the page will be center-aligned, with a red text
color:

6
p {
text-align: center;
color: red;
}

Another example:

p {
font-size: 120%;
color: dimgray;
}

That’s all there is to it. Now, whenever the browser renders a <p> paragraph, the text will inherit
the size (120 percent of normal) and the color (“dimgray”).

CSS Text Color

You can set the color of text:

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">I am enjoying learning CSS...</p>
<p style="color:MediumSeaGreen;">This is an example...</p>

CSS Border Color

You can set the color of borders:

Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

Change Link Colors

7
. There are four different colors a link can be assigned: its standard color, its visited color, its
hover color, and its active color (which it displays while you’re clicking on it). Here’s how we
change those:

a:link {
color: gray;
}

a:visited {
color: green;
}

a:hover {
color: rebeccapurple;
}

a:active {
color: teal;
}

Note that each “a” is followed by a colon, not a dot.

Each one of those declarations changes the color of a link in a specific context. There’s no need
to change the class of a link to get it to change color. It will all be determined by the user and the
state of the link.

center-Align Elements
For a very common task, this is a surprisingly unintuitive thing to do with CSS. Once you’ve
done it a few times though, it becomes much easier. There are a couple different ways to center
things.

For a block element (usually an image), we’ll use the margin attribute:

.center {
display: block;
margin: auto;
}

8
This ensures that the element is displayed as a block, and that the margin on each side is set
automatically (which makes them equal). If you want to center all of the images on a given page,
you can even add “margin: auto” to the img tag:

img {
margin: auto;
}

But what if we want to center text? CSS has a specific method of doing that:

.centertext {
text-align: center;
}

CSS Margins
The CSS margin properties are used to create space around elements, outside
of any defined borders.

With CSS, you have full control over the margins. There are properties for
setting the margin for each side of an element (top, right, bottom, and left).

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an
element:

 margin-top
 margin-right
 margin-bottom
 margin-left

All the margin properties can have the following values:

auto - the browser calculates the margin

length - specifies a margin in px, pt, cm, etc.

% - specifies a margin in % of the width of the containing element

inherit - specifies that the margin should be inherited from the parent element
9
Tip: Negative values are allowed.

Example
Set different margins for all four sides of a <p> element:
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin

properties in one property.

The margin property is a shorthand property for the following

individual margin properties:

 margin-top
 margin-right
 margin-bottom
 margin-left

So, here is how it works:

If the margin property has four values:

margin: 25px 50px 75px 100px;

top margin is 25px

right margin is 50px

bottom margin is 75px

left margin is 100px

Example

10
Use the margin shorthand property with four values:

p {
margin: 25px 50px 75px 100px;
}

If the margin property has three values:

 margin: 25px 50px 75px;

o top margin is 25px
o right and left margins are 50px
o bottom margin is 75px

Example
Use the margin shorthand property with three values:

p {
margin: 25px 50px 75px;
}

If the margin property has two values:

 margin: 25px 50px;

o top and bottom margins are 25px
o right and left margins are 50px

Example
Use the margin shorthand property with two values:

p {
margin: 25px 50px;
}

If the margin property has one value:

 margin: 25px;
o all four margins are 25px

Example
Use the margin shorthand property with one value:
11
p {
margin: 25px;
}

The auto Value

You can set the margin property to auto to horizontally center the
element within its container.

The element will then take up the specified width, and the
remaining space will be split equally between the left and right
margins.

Example
Use margin: auto:

p {
width: 300px;
margin: auto;
border: 1px solid red;
}

CSS border style

border-style:
none|hidden|dotted|dashed|solid|double|groove|ridge|inset|ou
tset|initial|inherit;

Property Values

Value Description

none Default value. Specifies no border

hidden The same as "none", except in border

conflict resolution for table elements

dotted Specifies a dotted border

12
dashed Specifies a dashed border

solid Specifies a solid border

double Specifies a double border

groove Specifies a 3D grooved border. The

effect depends on the border-color
value

ridge Specifies a 3D ridged border. The effect

depends on the border-color value

inset Specifies a 3D inset border. The effect

depends on the border-color value

outset Specifies a 3D outset border. The effect

depends on the border-color value

Example: A dashed border:

p{border-style: dashed;}

p {
border-style: groove;
border-color: coral;
border-width: 7px;
}

CSS height Property

Definition and Usage
The height property sets the height of an element.

The height of an element does not include padding, borders, or margins!

If height: auto; the element will automatically adjust its height to allow
its content to be displayed correctly.

If height is set to a numeric value (like pixels, percentages) then if the

content does not fit within the specified height, it will overflow.

13
Example
p {
height: auto;
border: 1px solid black;
}

CSS width Property

Definition and Usage
The width property sets the width of an element.

The width of an element does not include padding, borders, or margins!

width: auto|value

Example
Set the width of an <img> element using a percent value:

img {
width: 50%;
}

Example
Set the width of an <input type="text"> element to 100px.

input[type=text] {
width: 100px;
}

CSS outline Property

Definition and Usage
An outline is a line that is drawn around elements, outside the borders, to
make the element "stand out".

The outline property is a shorthand property for:

 outline-width
 outline-style (required)
14
  outline-color

If outline-color is omitted, the color applied will be the color of the text.

Example

h2 {
outline: 5px dotted green;
}

p {
outline: 2px dashed blue;
}

CSS font Property

The font property is a shorthand property for:

 font-style
 font-variant
 font-weight
 font-size
 font-family

The font-size and font-family values are required. If one of the other
values is missing, their default value are used.

CSS font-family Property

Definition and Usage
The font-family property specifies the font for an element.

The font-family property can hold several font names as a "fallback"

system. If the browser does not support the first font, it tries the next
font.

There are two types of font family names:

15
  family-name - The name of a font-family, like "times", "courier",
"arial", etc.
 generic-family - The name of a generic-family, like "serif", "sans-
serif", "cursive", "fantasy", "monospace".

Start with the font you want, and always end with a generic family, to let
the browser pick a similar font in the generic family, if no other fonts are
available.

Note: Separate each value with a comma.

Note: If a font name contains white-space, it must be quoted. Single

quotes must be used when using the "style" attribute in HTML

Example

p {
font-family: "Times New Roman", Times, serif;
}

p {
font-family: Arial, Helvetica, sans-serif;
}

CSS font-style Property

Definition and Usage
The font-style property specifies the font style for a text.

Example
Set different font styles for three paragraphs:

p {
font-style: normal;
}

p {
font-style: italic;
}

p {
font-style: oblique;
}

16
CSS font-size Property
Definition and Usage
The font-size property sets the size of a font.

Example
Set the font size for different elements:

p {
font-size: 15px;
}

p {
font-size: large;
}

p {
font-size: 150%;
}

CSS float Property

Definition and Usage
The float property specifies how an element should float.

Note: Absolutely positioned elements ignores the float property!

Example
Let an image float to the right:

img {
float: right;
}
ORDERED AND UNORDERED LIST USING CSS

ul {

list-style: disc;

17
 padding-left: 40px;

ol {

list-style: decimal;

padding-left: 40px;

ol {

list-style: decimal;

padding-left: 40px;

List Style Type Values

As previously mentioned, the list-style-type property comes with a handful of different

values. The following list outlines these values as well as their corresponding content.

List Style Type Value Content

none No list item
disc A filled circle
circle A hollow circle
square A filled square

Styling List With Colors

We can also style lists with colors, to make them look a little more interesting.

Anything added to the <ol> or <ul> tag, affects the entire list, while properties
added to the <li> tag will affect the individual list items:

EXAMPLE
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}

18
ul li {
background: #cce5ff;
margin: 5px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>

All CSS List Properties

Property Description

list-style Sets all the properties for a list in one declaration

list-style-image Specifies an image as the list-item marker

list-style-position Specifies the position of the list-item markers (bullet points)

list-style-type Specifies the type of list-item marker

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list
properties in one declaration:

19
Example
ul {
list-style: square inside url("sqpurple.gif");
}

When using the shorthand property, the order of the property values are:

 list-style-type (if a list-style-image is specified, the value of this

property will be displayed if the image for some reason cannot be
displayed)
 list-style-position (specifies whether the list-item markers should
appear inside or outside the content flow)
 list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the
missing property will be inserted, if any.

Remove Default Settings

The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and padding. To
remove this, add margin:0 and padding:0 to <ul> or <ol>:

Example
ul {
list-style-type: none;
margin: 0;
padding: 0;
}

20