Scribd
Upload
20 views

CSS Guide

CSS allows you to control the layout and style of HTML documents. There are three types of CSS - external style sheets defined in .css files, embedded style sheets within <style> tags, and inline styles within HTML elements. CSS uses selectors to apply styles via properties like font, color, size, and others. Common selectors include classes, IDs, tags, and multiple selectors.

Uploaded by

Dijon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
20 views

CSS Guide

CSS allows you to control the layout and style of HTML documents. There are three types of CSS - external style sheets defined in .css files, embedded style sheets within <style> tags, and inline styles within HTML elements. CSS uses selectors to apply styles via properties like font, color, size, and others. Common selectors include classes, IDs, tags, and multiple selectors.

Uploaded by

Dijon
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 18

Cascading

Style
sheets
Allows you to control the
layout of your HTML
document.
It is a statement that defines
the style of one or more
elements in your web page.
CSS These rules follow a
specific structure. It is a
simple way to add style such
as font, colors or spacing.
CSS STRUCTURE
External Style
Sheets
THREE
Embedded Style
KINDS Sheets
OF
CSS
Inline Style Sheets
External Style Sheets

They easily allow you to change the layout of your entire website by simply
changing the external style sheet and every page is instantly updated.

External Style sheeT has a .css file extension.

Ex.<link rel="stylesheet" href="style.css" type="text/css">


Embedded Style Sheets

These are used for creating


a document-wide style rule.
They are placed within an Ex. <style type="text/css">
HTML document, between
the <head> and </head>
Inline Style Sheets

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


element.

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

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


FORMATTING TEXT WITH CSS
FONT PROPERTY

Property Name Definition

font-family Indicates the typeface.


Ex.font-family:Arial;
font-style Indicates if text is written in italics, obliquely
or normally.
Ex.font-style:italic;
font-weight Indicates the thickness of the characters.

font-size Indicates the size of the text.


Ex.font-size:12;
TEXT PROPERTY
Property Name Definition
text-align Indicates the alignment.
Ex.text-align:justify;
text-decoration Indicates the decoration applied.
Ex.text-decoration:underline;
line-height Indicates the line spacing taken up by each line.
Ex.line-height:11;
text-indent Indents the first line of each paragraph..
Ex. text-indent:12;
CSS:SELECTOR
CLASS Selector
class selector is used to select all elements which belong to a particular class attribute.
CLASS SELECTOR
ID SELECTOR

 -is a style applied to one element in a page.


MULTIPLE SELECTORS
 You may always run into the case where two or more selectors might just have the same properties
and values. In that case, you may not rewrite the whole list of properties and values for the other
selector and just use a comma to separate the selectors and have only one set of properties and
values.
DIV TAG
Div divides the contents of a web page
into individual sections. Div tag allows
you to apply styles to different sections
of your web page.
It is a generic way of adding structure
to an HTML document.
SPAN TAG
Is a generic way of adding structure to
an HTML document.
Span is applied to an inline element.It
is used to emphasize words or
sentences within a paragraph.

You might also like