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

Introduction To CSS

Uploaded by

Aliyu Ibrahim Sulaiman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
24 views

Introduction To CSS

Uploaded by

Aliyu Ibrahim Sulaiman
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Introduction to CSS

Why CSS?
• CSS Provides Efficiency in Design and Updates
• CSS relatively easy to use
• Can give you more flexibility and control
• Faster loading pages
• Increased consistency
• Brings more sophistication to web design
• CSS is designed primarily to enable the separation
of document content from document
presentation.
Why CSS? (continued)
• W3C standard, started in 1996
• Improves accessibility
– Tables not required for elegance
• Reduces the complexity of pages
– Which in turn has led to more sophistication…
• It’s open up the way for other technologies to be
built on and be supported by CSS. There are dozens,
and still growing.
• Example, “Bootstrap”, which is an open source
framework that combines CSS, HTML and Javascript
CSS Overview
• CSS (Cascading Style Sheets)
• CSS defines HTML display
• Styles were added to HTML 4.0 to solve a
problem
• External Style Sheets are stored in .css files
CSS Syntax
• Selectors
• Declaration
• Properties
• Values
Selectors
• A “selector” is an instruction in a CSS rule set
that tells the browser what elements to
‘select’ for styling.
• Here are some that we will look at:
– element Selector
– id Selector
– class Selector
– grouping Selectors
Element or Tag Selector

• This selector selects tags by tag or “element”


name.
• This selector must match one or more HTML
elements of the same name.
• Easiest to use
Element Selector

p {
text-align: center;
color: red;
}
HTML
<p>UAlbany is one of the SUNY
centers.</p>
ID Selector
• The ID selector as a unique identifier to an element.
• The id selector is used if you want to select a single,
unique element.
• CSS uses a hash or pound sign (#) to indicate it’s ID
• ID's are unique
– IDs in theory, are only supposed to be used once per
page
– In other words, a page would not be validate by W3C
standards.
• Anytime we see ID in the computer world, think
“unique”.
The id Selector

#text1 {
text-align: center;
color: green;
}
<h1 id="text1">Think Spring!</h1>
Class Selector
• This selector allows you to style content
irrespective of what tag you apply it to
• Classes are NOT unique
– Use same class on multiple elements.
– Use multiple classes on the same element.
The class Selector
.center {
text-align: center;
color: green;
}
<h1 class="center">Think Spring!</h1>
<p class="center">Think Spring!</p>
CSS Grouping

• When several selectors share the same declarations, they may be


grouped into a comma-separated list.

• Take this

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }
And, do this:

h1, h2, h3 { font-family: sans-serif }


CSS Comments
• As with other computer languages, CSS allows
for comments
• Comments remind you and tell fellow coders
what your CSS does
• Allows you to “flag” code for further review
• Indispensable for large website and
programming projects
CSS Comments
h1 { font-size: 24px; font-
weight: bold; border: 1px solid
black; color: pink; }
/* This will make all <h1>
headers big, bold, pink, and
inside of a thin black
rectangle! */
Ways to Insert CSS
• Externally
• Internally
• Inline styles (inside tags)
Inline Styles
• Insert CSS style right within the HTML tag that
you want to apply them too.
• Very quick
• However, difficult to maintain
• Use sparingly
<h1 style="color:blue;margin-
left:30px;">Think Spring!</h1>
Internal (or Embedded) CSS
• Placed right on top of the page that it will
affect
• As with DTDs, you can internally create a
stylesheet
• They are more convenient for small webpages
• Mixing content and style will cause your pages
to become unwieldy over time.
Internal CSS stylesheet
<html>
<head>
<style type="text/css">

p {color: white; }
body {background-color: black; }

</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
</html>
External Stylesheet
• Why use an external stylesheet?
– It keeps your website design and content separate.
• CSS code is easier to reuse.
• Instead of typing the same CSS code on every
web page you have,
• Merely have many pages refer to a single CSS file
with the "link" tag.
• You can make massive alterations to your web
pages with just a few changes in a single CSS file
External CSS Stylesheet
In your .XSL file, you will link out using this
command:

<head>

<link rel="stylesheet" type="tex


t/css" href="mystyle.css“/>
</head>
Browsers and CSS3
To be
replaced by
project
“Spartan”

You might also like