Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
60 views

Layout (CSS) : Cascading Style Sheets

This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how it defines how HTML elements are displayed, how external style sheets can save work, and CSS syntax. CSS allows defining styles that control formatting and layout of elements across entire websites. Styles are defined using selectors and declarations. Comments can be added to CSS code. CSS handles layout and presentation while HTML focuses on structure.

Uploaded by

Andz Bass
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
60 views

Layout (CSS) : Cascading Style Sheets

This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how it defines how HTML elements are displayed, how external style sheets can save work, and CSS syntax. CSS allows defining styles that control formatting and layout of elements across entire websites. Styles are defined using selectors and declarations. Comments can be added to CSS code. CSS handles layout and presentation while HTML focuses on structure.

Uploaded by

Andz Bass
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

Cascading Style Sheets

Layout (CSS)
What is CSS?

 CSS stands for Cascading Style Sheets


 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a
problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
 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!
CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:

 The selector is normally the HTML element you want to style.


 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each property
has a value.
CSS Comments
 Comments are used to explain your code, and may help you when you
edit the source code at a later date. Comments are ignored by
browsers.

 A CSS comment begins with "/*", and ends with "*/", like this:

/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS is the better half of HTML. And in coding,
there is no equality of status: HTML takes
care of the rough stuff (the structure), while
CSS gives it a nice touch (layout).
One of the smart features of CSS is the
possibility to manage your layout centrally.
Instead of using the style attribute in each
tag, you can tell the browser once how it
must layout all the text on the page:
<html>
<head>
<title>My first CSS page</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial;}
h2 {font-size: 15px; font-family: courier;}
p {font-size: 8px; font-family: "times new roman";}
</style>
</head>
<body>
<h1>My first CSS page</h1>
<h2>Welcome to my first CSS page</h2>
<p>Here you can see how CSS works </p>
</body>
</html>
What else can I do with CSS?

 CSS can be used for much more than


specifying font types and sizes. For example,
you can add colours and backgrounds. Here
are some examples for you to experiment
with.
<p style="color:green;">Green text</p>

<h1 style="background-color: blue;">Heading on blue background</h1>

<body style="background-image: url('http://www.html.net/logo.png');">


Is CSS nothing but colours and font
types?

CSS can also be used to control the page


setup and presentation (margins, float,
alignment, width, height etc.). By regulating
the different elements with CSS you are able
to layout your pages elegantly and precisely.
<p style="padding:25px;border:1px solid red;">I love CSS</p>

Result

I Love CSS
With the property float an element can either be floated
to the right or to the left.

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing


elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi
enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat...</p>

You might also like