Beginners css tutorial for web designers

Cascading Style Sheets- CSS
“Add style to your web pages”

Devendra Shukla
Senior web designer
Singsys Pte Ltd

Definition of CSS
•
•
•

CSS stands for Cascading Style Sheets
Styles - define how to display HTML elements
Styles are normally stored in Style Sheets

Definition:
Cascading Style Sheets (CSS) – is a style sheet language used for
describing the look and formatting of a document written in a
markup language. You write CSS rules in elements, and modify
properties of those elements such as color, background color,
width, border, font etc.

CSS
Cascading Style Sheets, or CSS, is a style sheet
language used on the Web
CSS specifications are maintained by the World Wide
Web Consortium (W3C)
Three versions of CSS exist: CSS1, CSS2, and CSS3

CSS1
The first CSS specification to become an official W3C
Recommendation is CSS level 1, published in December 1996.
Among its capabilities are support for







Font properties such as typeface and emphasis
Color of text, backgrounds, and other elements
Text attributes such as spacing between words, letters, and lines of
text
Alignment of text, images, tables and other elements
Margin, border, padding, and positioning for most elements
The W3C no longer maintains the CSS 1 Recommendation.

CSS2
CSS level 2 specification was developed by the W3C and published
as a recommendation in May 1998. A superset of CSS 1, CSS 2
includes a number of new capabilities like-

Positioning
✔Visual Formatting
✔Media Types
✔Interfaces
✔z-index
✔and new font properties such as shadows.
✔

CSS3
Work on CSS level 3 started around the time of
publication of the original CSS 2 recommendation.
The earliest CSS 3 drafts were published in June 1999
✔User Interfaces
✔Accessibility
✔Columnar layout
✔Mobile Devices
✔Scalable Vector Graphics

Advantages
Separation of content from presentation
CSS facilitates publication of content in multiple presentation formats based
on nominal parameters. Nominal parameters include explicit user preferences,
different web browsers, the type of device being used to view the content
(a desktop computer or mobile Internet device), the geographic location of the
user and many other variables.

Bandwidth
A stylesheet, internal or external, specifies the style once for a range of
HTML elements selected by class, type or relationship to others.
This is much more efficient than repeating style information inline for each
occurrence of the element. An external stylesheet is usually stored in the
browser cache, and can therefore be used on multiple pages without being
reloaded, further reducing data transfer over a network.

Advantages
Site-wide consistency
When CSS is used effectively, in terms of inheritance and "cascading,"
a global style sheet can be used to affect and style elements site-wide.
If the situation arises that the styling of the elements should need to be
changed or adjusted, these changes can be made by editing rules in the
global style sheet. Before CSS, this sort of maintenance was more difficult,
expensive and time-consuming.
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets
enable you to change the appearance and layout of all the pages in a Web site,
just by editing one single file!

Syntax of CSS
The CSS syntax is made up of 5 parts:

1) Selector
2) Property/value
3) Declaration
4) Declaration block
5) Curly braces

Selector
Selectors are used to declare which part of the markup a style
applies to, a kind of match expression.
3 types of selectors
1) Tag selectors (body, p, div, a)
2) ID selectors (#wrapper, #sidebar)
3) Class selectors (.content, .menu)

*The selector is normally the HTML element you want to style

*Selectors should never start with a number, nor should they have spaces in them

ID Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a
"#".
The style rule below will be applied to the element with id="wrapper":
#wrapper
{
text-align:center;
border:1px solid red;
Width: 200px;
Height: 100px
}

For example, to identify a paragraph as “head”,
use the code:
<div id=“wrapper”>… </div>

*Do NOT start an ID name with a number!

Class Selector
The class selector is used to specify a style for a group of elements. Unlike the id selector,
the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:

.center {text-align:center;}

p.center {text-align:left;}

<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>

<p class="left">Center-aligned paragraph.</p>

*Do NOT start an ID name with a number!

Property & Value
The property is the style attribute you want to change. Each
property has a value

*Properties are separated from their respective values by colons :
*Pairs are separated from each other by semicolons ;

Declaration
Definition: Each CSS line that includes property and value

*Each declaration consists of a property and a value

Declaration Block
A declaration block consists of a list of declarations in braces.
Each declaration itself consists of a property and a value.
If there are multiple declarations in a block.

Curly Braces
The curly braces contain the properties of the element you want
to manipulate, and the values that you want to change them to.
The curly braces plus their content is called a declaration block.

How CSS is Applied to A Web Page
There are three ways of inserting a style sheet:

1) Inline style
2) Internal style sheet
3) External style sheet

Inline style
●

●

An inline style loses many of the advantages of style sheets
by mixing content with presentation. Use this method
sparingly!

To use inline styles you use the style attribute in the relevant
tag. The style attribute can contain any CSS property. The
example shows how to change the color and the left margin
of a paragraph

<p style=“text-align: center; fontweight: bold; color: yellow;”>This is a
paragraph.</p>

Internal style sheet
An internal style sheet should be used when a single document
has a unique style. You define internal styles in the head section
of an HTML page, by using the <style> tag, like this:

<head>
<style type=“text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

External style sheet
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of
an entire Web site by changing one file. Each page must link to
the style sheet using the <link> tag. The <link> tag goes inside
the head section:
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Link to a separate
css file

Multiple Style Sheets
You can link a single style sheet to multiple documents in your
Web site by using the link element or the @import element

You can also link a single document to several style sheets
@import "container.css";
@import "header.css";
@import "content.css";
@import "footer.css";

If some properties have been set for the same selector in
different style sheets, the values will be inherited from the more
specific style sheet.
For example, an external style sheet has these properties for the
h3 selector:
h3{

color:red;
text-align:left;
font-size:8pt;

}

And an internal style sheet has these properties for the h3
selector:
h3
{
text-align:right;

font-size:20pt;
}

If the page with the internal style sheet also links to the
external style sheet the properties for h3 will be:
color:red;
text-align:right;
font-size:20pt;

Cascading order
What style will be used when there is more than one style specified for an
HTML element?
Generally speaking we can say that all the styles will "cascade" into a new
“virtual" style sheet by the following rules, where number four has the highest
priority:
1) Browser default
2) External style sheet
3) Internal style sheet (in the head section)
4) Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which
means that it will override a style defined inside the <head> tag, or in an
external style sheet, or in a browser (a default value).

CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term "box
model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around HTML elements,
and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space
elements in relation to other elements.

Margin, Padding, Border and Content
Explanation of the different parts:








Margin - Clears an area around the border. The margin does not have a
background color, it is completely transparent
Border - A border that goes around the padding and content. The
border is inherited from the color property of the box
Padding - Clears an area around the content. The padding is affected
by the background color of the box
Content - The content of the box, where text and images appear

Margin
The CSS margin properties define the space around elements.
The top, right, bottom, and left margin can be changed independently using
separate properties. A shorthand margin property can also be used, to change
all margins at once.

Possible Values

Margin - Individual sides
In CSS, it is possible to specify different margins for different sides:

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
All CSS Margin Properties

Margin - Shorthand property
To shorten the code, it is possible to specify all the margin properties in one
property. This is called a shorthand property.
The shorthand property for all the margin properties is "margin":
margin:25px

All Four Side

margin:25px 75px;

Top & bottom - left & right

margin:25px 50px 75px;

Top – right & left - bottom

margin:25px 50px 75px 100px;

Top right bottom & left

Padding
The padding clears an area around the content (inside the border) of an
element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using
separate properties.

Possible Values

Padding - Individual sides
In CSS, it is possible to specify different margins for different sides:

padding-top:100px;
padding-bottom:100px;
padding-right:50px;
padding-left:50px;
All CSS Padding Properties

Padding - Shorthand property
To shorten the code, it is possible to specify all the padding properties in one
property. This is called a shorthand property.
The shorthand property for all the padding properties is "padding":
padding:25px

All Four Side

padding:25px 75px;

Top & bottom - left & right

padding:25px 50px 75px;

Top – right & left - bottom

padding:25px 50px 75px 100px;

Top right bottom & left

Border
The CSS border properties allow you to specify the style and color of an
element's border.
Borders fall between the padding and margin and provide an outline around
an element. Every border needs three values, a width, style, and color.
Shorthand values fall in the order of width, style and color. Longhand, these
three values can be broken up into the border-width, border-style, and bordercolor properties.
Most commonly you will see one sized, solid, single colored borders. Borders
do however have the capability to come in numerous sizes, shapes, and
colors.

Border Style
The border-style property specifies what kind of border to display.

Border Width
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin,
medium, or thick.
The "border-width" property does not work if it is used alone. Use the "borderstyle" property to set the borders first.

Border Width

.one-box
{
border-style:solid;
border-width:5px;
}
.two-box
{
border-style:solid;
border-width:medium;
}
.three-box
{
border-style:solid;
border-width:1px;
}

Border Color

The border-color property is used to set the color of the border. The color can be s
name - specify a color name, like "red"
RGB - specify a RGB value, like "rgb(255,0,0)"
Hex - specify a hex value, like "#ff0000"
You can also set the border color to "transparent".
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}

CSS Box Model
This is commonly called the Box Model. In order to set the
width and height of an element correctly in all browsers,
you need to know how the box model works.
Here is a way to visualize it...

Width and Height of an Element

When you set the width and height properties of an element with CSS, you just set the
width and height of the content area. To calculate the full size of an element, you must
also add the padding, borders and margins.
The total width of the element in the example below is

div {
background: #fff;
border: 6px solid #ccc;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}
To break down the total width of an element, including the box model, use the formula:
margin-right + border-right + padding-right + width + padding-left + border-left + marginleft
In comparison, the total height of an element, including the box model, can be found using
the formula:
margin-top + border-top + padding-top + height + padding-bottom + border-bottom +
margin-bottom

div {
background: #fff;
border: 6px solid #ccc;
height: 100px;
margin: 20px;
padding: 20px;
width: 400px;
}
Using the formulas and box context above we can find the total height and width of our
example.
Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Thank You!

Devendra Shukla
Senior web designer
Singsys Pte Ltd

Beginners css tutorial for web designers

Recommended

More Related Content

What's hot (20)

Similar to Beginners css tutorial for web designers (20)

More from Singsys Pte Ltd (20)

Recently uploaded (20)

Beginners css tutorial for web designers