Scribd
Upload
133 views

Css Extra Notes

This document provides an introduction to CSS (Cascading Style Sheets) including: - The basic CSS statement structure of SELECTOR { PROPERTY: VALUE } - Using CSS selectors to target specific HTML elements like paragraphs - Examples of adding internal and inline CSS code to style text and backgrounds - How CSS classes and IDs allow targeting elements with custom styles - Common CSS properties like color, background-color, and cursor icons

Uploaded by

john
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
133 views

Css Extra Notes

This document provides an introduction to CSS (Cascading Style Sheets) including: - The basic CSS statement structure of SELECTOR { PROPERTY: VALUE } - Using CSS selectors to target specific HTML elements like paragraphs - Examples of adding internal and inline CSS code to style text and backgrounds - How CSS classes and IDs allow targeting elements with custom styles - Common CSS properties like color, background-color, and cursor icons

Uploaded by

john
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

http://www.tizag.com/cssT/index.

php

CSS Basics
In a typical CSS statement you have the following:
SELECTOR { PROPERTY: VALUE }
"Property" is the CSS element you wish to manipulate and "VALUE"
represents the value of the specified property.

CSS Selector Name


The selector name creates a direct relationship with the HTML tag you want
to edit. If you wanted to change the way a paragraph tag behaved, the CSS
code would look like:
p { PROPERTY: VALUE }
The above example is a template that you can use whenever you are
manipulating the paragraph HTML element. In the next lessons, we will not
only teach where to place your CSS, but why and where you should use CSS
as well.

Internal CSS Gotta Knows

Place your CSS Code between <style> and </style>


Be sure you know the correct format(syntax) of CSS code.
CSS will literally save you hours of time... after you spend a few
getting the hang of it.

Creating Internal CSS Code


CSS code is not written the same way as HTML code is. This makes sense
because CSS is not HTML, but rather a way of manipulating existing HTML.
Below is an example of some simple, yet fully functional, CSS code.
CSS Code:
<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>

Display:

White text on a black background!

You probably noticed that in our CSS code we were altering the <body> and
<p> HTML tags. The great thing about CSS is that it is an intuitive
language. Once you understand the general format for CSS code, you are

http://www.tizag.com/cssT/index.php
pretty much set.
General CSS Format:
"HTML tag" { "CSS Property" : "Value" ; }
Back in our code example, we manipulated <p> and <body>, both well
known HTML tags. To clarify, here is a step-by-step process of what is going
on in that first line of CSS code where we played around with "p".
We chose the HTML element we wanted to manipulate. - p{ : ; }
Then we chose the CSS attribute color. - p { color: ; }
Next we choose the font color to be white. - p { color: white; }
Now all text within a paragraph tag will show up as white! Now an
explanation of the CSS code that altered the <body>'s background:
We choose the HTML element Body - body { : ; }
Then we chose the CSS attribute. - body { background-color: ; }
Next we chose the background color to be black. - body { background-color:
black; }
Until you become accustomed to using CSS code, you will probably find your
CSS code not working as you expected. A leading cause of this might be an
out of place :, ;, {, or } or it might be that you forgot to use a :, ;, {, or }
when it was required. Be sure to check back here if you ever have issues
with the correct format for CSS.

Why Use External CSS?

It keeps your website design and content separate.


It's much easier to reuse your CSS code if you have it in a separate
file. Instead of typing the same CSS code on every web page you
have, simply have many pages refer to a single CSS file with the "link"
tag.
You can make drastic changes to your web pages with just a few
changes in a single CSS file.

CSS Inline - An HTML Attribute


Believe it or not, CSS is built in to every HTML tag. If you want to add a
style inside an HTML element all you have to do is specify the desired CSS
properties with the style HTML attribute. Let's add some style to a paragraph
tag.

CSS Code:
<p style="background: blue; color: white;">A new background and
font color with inline CSS</p>

Display:

A new background and font color with inline CSS

http://www.tizag.com/cssT/index.php

CSS Classes
You may be wondering if it is possible to give an HTML element multiple
looks with CSS. Say for example that sometimes you want the font to be
large and white, while other times you would prefer the font to be small and
black. CSS would not be very useful if it did not allow you to have many
different types of formats for a single HTML tag. Well, you are in luck! CSS
allows you to do just that with the use of classes.

The Format of Classes


Using classes is simple. You just need to add an extension to the typical CSS
code and make sure you specify this extension in your HTML. Let's try this
with an example of making two paragraphs that behave differently. First, we
begin with the CSS code, note the red text.
Example 1: CSS Code:
p.first{ color: blue; }
p.second{ color: red; }
HTML Code:
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that uses the p.first CSS code!</p>
<p class="second">This is a paragraph that uses the p.second CSS code!
</p>
Display:
This is a normal paragraph.
This is a paragraph that uses the p.first CSS code!
This is a paragraph that uses the p.second CSS code!
You can use CSS classes with any HTML element! However, what happens if
we had already defined a value for the default <p> tag, would this cause
any problems for classes of the paragraph tag?
Well, when this happens the CSS class for any <p> tag will override the
default <p> CSS. If the CSS class uses a CSS attribute already defined by
the default CSS, then the formatting defined by the class will be the value
that is used.
It may be easier to imagine that the CSS for a generic HTML element is the
starting point and the only way to change that look is to overwrite the
attributes using CSS classes. Please see the example below for a visual of
this tricky topic.
Example 2: CSS Code:
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
HTML Code:

http://www.tizag.com/cssT/index.php

This is a normal paragraph.</p>


<p class="test1">This is a paragraph that uses the
p.test1 CSS code!</p>
<p>

<p class="test2">This is a paragraph that uses the p.test2 CSS code!</p>

CSS Classes Exercise


<html>
<head>
<style>
p.first { background-color: gray; }
p.second { background-color: red; }
p.third {
background: purple;
color: white;
}
</style>
</head>
<body>
<h2>CSS Classes</h2>
<p class="first">This is the p.first paragraph</p>
<p class="second">This is the p.second paragraph</p>
<p class="third">This is the p.third paragraph</p>
</body>
</html>

CSS Classes vs ID

There is often confusion about when it is appropriate to use CSS IDs and
when CSS Classes should be used instead. This lesson is geared to display
the differences, as well as provide more information about CSS IDs.

What is an ID Selector?
The W3C defines class ID as "a unique identifier to an element". But what
does that actually mean? CSS IDs are similar to classes in that they define a
special case for an element. Below is an example of a CSS ID.
CSS Code:
p#exampleID1 { background-color: white; }
p#exampleID2 { text-transform: uppercase; }
HTML Code:
<p id="ExampleID1">This paragraph has an ID name of
"exampleID1" and has a white CSS defined background</p>
<p id="ExampleID2">This paragraph has an ID name of
"exampleID2" and has had its text transformed to uppercase letters. </p>
Display:

http://www.tizag.com/cssT/index.php
This paragraph has an ID name of "exampleID1" and has a white CSS
defined background.
THIS PARAGRAPH HAS AN ID NAME OF "EXAMPLEID2" AND HAS HAD ITS
TEXT TRANSFORMED TO UPPERCASE LETTERS.
Notice that an ID's CSS is an HTML element, followed by a "#", and finally
ID's name. The end result looks something like "element#idname". Also, be
sure to absorb the fact that when an ID is used in HTML, we must use
"id=name" instead of "class=name" to reference it!
Why Did They Choose Those Names??
ID = A person's Identification (ID) is unique to one person.
Class = There are many people in a class.
ID for Layout and Uniqueness
Standards specify that any given ID name can only be referenced once
within a page or document. From our experience, IDs are most commonly
used correctly in CSS layouts. This makes sense because there are usually
only one menu per page, one banner, and usually only one content pane.
In Tizag.com CSS Layout Examples we have used IDs for the unique items
mentioned above. View the CSS Code for our first layout example. Below are
the unique IDs in our code.
Menu - div#menuPane
Content - div#content
Answer: Classes vs IDs
Use IDs when there is only one occurence per page. Use classes when there
are one or more occurences per page.

CSS Ids Exercise


<html>
<head>
<style>
p#exampleID1 { background-color: blue; }
p#exampleID2 { text-transform: uppercase; }
</style>
</head>
<body>
<p id="exampleID1">This paragraph has an ID name of "exampleID1" and
has a blue CSS defined background.</p>

http://www.tizag.com/cssT/index.php
<p id="exampleID2">This paragraph has an ID name of "exampleID2" and
has had its text transformed to uppercase letters.</p>
</body>
</html>

CSS Extras
CSS Cursor Icons
With CSS you can make it so different mouse icons appear when people visit
your site. NOTE: You should know that some people find web pages that
change mouse cursor icons annoying, so consider that when playing around
with this CSS property!
In this lesson we will show how to change the mouse cursor icon for a few
different HTML elements. Below is a list of the most commonly accepted
cursors:
default - Display the normal mouse cursor icon
wait - The mouse icon to represent the computer "thinking"
crosshair - A cross hair reticle
text - An "I" shaped icon that is displayed when selecting text
pointer - A hand icon that you see when you hover over an HTML link
help - A question mark (usually)
CSS Cursor Code
Now let's try these puppies out. Here are a few cursor code examples that
should help you customize your site.
CSS Code:
p { cursor: wait }
h4 { cursor: help }
h5 { cursor: crosshair }

CSS Background Color


As you have seen throughout Tizag Tutorials, many different background
colors are present. These varying backgrounds were obtained without using
tables! Below are a couple examples of CSS backgrounds.

CSS Code:
h4 { background-color: white; }
p { background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }

Display:
This is a <h4> with a white background
This is a <p> with a background using the hexadecimal value of #1078E1
This is an unordered list
with an RGB value of 149, 206, 145

http://www.tizag.com/cssT/index.php
In the above example we used three different formats for defining a color: a
color name, hexadecimal values, and RGB. Check out the the list of supported color
names. Hexadecimal form is a pound sign (#) followed by, at most, 6 hex
values (0-F). RGB defines the individual values for Red, Green, and Blue.
Example form: rgb(Red, Green, Blue); with the range of 0-255 for each
value.

CSS Background Image


Need an image to repeat left-to-right, like the gradient background that
appears at the top of Tizag.com? Or maybe you would like to have an image
that remains fixed when the user scrolls down your page. This can be done
quite easily with CSS and more, including:
choosing if a background will repeat and which directions to repeat in.
precision positioning
scrolling/static images
Let's begin with a default CSS background image.

CSS Code:
p { background-image: url(smallPic.jpg); }
h4{ background-image: url(http://www.tizag.com/pics/cssT/smallPic.jpg); }

Display:
This <p> has a background image using a local path to the picture.

This <h4> has a background image using the complete url path.

Background Image Repeat


You can have a background image repeat vertically (y-axis), horizontally (xaxis), in both directions, or in neither direction.
CSS Code:
p{
h4 {

background-image: url(smallPic.jpg);
background-repeat: repeat; }
background-image: url(smallPic.jpg);
background-repeat: repeat-y;}

ol {
ul {

background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
background-image: url(smallPic.jpg);
background-repeat: no-repeat;}

Display:
This <p> has a background image repeating in both directions (default repeat). If you use
this option, make sure that your image was designed to be repeated.

http://www.tizag.com/cssT/index.php
This <h4> has a background image repeating vertically (y). You
could this to add a style to the side of your element.
1. This is an ordered list
2. With a background that repeats
3. Horizontally (x)
This is an unordered list
With a background that repeats
in neither direction.

CSS Fixed Background Image


You may choose to have your background scroll naturally, or to have it in a
fixed position. Note: This feature does not work properly in most browsers
when placed within a textarea, except Internet Explorer 6.0, which displays
it correctly.

CSS Code:
textarea.noScroll {
background-image: url(smallPic.jpg);
background-attachment: fixed;
}
textarea {
background-image: url(smallPic.jpg);
background-attachment: scroll;}

Display:

Bottom of Form

CSS Background Image Positioning


If you would like to define where exactly an image appears within an HTML
element, you may use CSS's background-position. Please take note that
there are three different ways of defining position: length, percentages, and
keywords. We recommending using lengths -- specifically, pixels.

CSS Code:
p{
}
h4 {

background-image: url(smallPic.jpg);
background-position: 20px 10px;
background-image: url(smallPic.jpg);
background-position: 30% 30%;

http://www.tizag.com/cssT/index.php

}
ol {
background-image: url(smallPic.jpg);
background-position: top center;
}

Display:

This <p> has a background image positioned with pixel values.

This <h4> has a background image positioned with percentages.


1. This is an ordered list
2. With a background that was positioned
3. using keywords.

Note: When using pixels, the location of the image will be (A)px from the
left of the screen and (B)px from the top of the screen, where A and B are
integers. Note: When using percentages, the location of the image will be
(A)% from the left of the screen and (B)% from the top of the screen, where
A and B are integers. Note: Available positioning keywords are: top, right,
bottom, left, and center.

CSS Gradient Background


If you would like to create a gradient background like the one that appears
at the top of Tizag.com, you must first create an image inside a painting
program (Photoshop, Draw, etc) like the one you see below.

Necessary Image:

Notice that the image is very slim. We are going to be tiling the image
horizontally, so you can make the image skinny as possible. As long as the
image is 1 pixel or wider, you will be fine.
Using the repeat attribute, we set the value to repeat-x which causes the
image to span left to right across the specified element. This example adds a
gradient background to the paragraph element.

CSS Code:
p{
}

background-image: url(http://www.example.com/gradient.gif);
background-repeat: repeat-x;

http://www.tizag.com/cssT/index.php

Display:
This paragraph has a gradient background. The gradient background was
first made in a painting program and then repeated horizontally across the
paragraph element. It makes for a neat effect that also loads quickly!
Because the image is very skinny, the file size is also very small. You could
also create a gradient that changes color left to right and repeat it in the
vertical direction to have a gradient on the side of your web page.

CSS Text
While CSS Font covers most of the traditional ways to format your text, CSS
Text allows you to control the spacing, decoration, and alignment of your
text.

Text Decoration
Have you ever wondered how a website removed the underline that usually
accompanies a link's text? This is done by removing text-decoration from
the link. To learn how to create these types of links, please check out our CSS
Links tutorial. Besides the utility with links, text-decoration allows you to add
horizontal lines above, below, or through your text.

CSS Code:
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }

Display:
This header has a line through the middle
This header has an overline
This header has an underline
This is a link without an underline - See our CSS Link tutorial for more information

Text Indent
CSS text-indent is a great way to indent your paragraphs without having to
use preformatted HTML tags, (<pre>), or inserting spaces manually
(&nbsp;). You may define your indentation with exact values or percentages.
We recommend using exact values.

CSS Code:
p { text-indent: 20px; }
h5 { text-indent: 30%; }

http://www.tizag.com/cssT/index.php

Display:
This is a paragraph that uses a text indentation with the value of 20px. This is the
recommended usage of text indentation.

This is a header that uses a text indentation of


30%. Tizag does not recommend indenting your text with percentages.

Text Align
By default, text on your website is aligned to the left, like most literature
and other forms of media you read. However, sometimes you may require a
different alignment and it can be specified using the text-align attribute.

CSS Code:
p { text-align: right; }
h5{ text-align: justify; }

Display:

This paragraph is aligned to the right side of the HTML element. If you ever find a use for
using right justify, please let us know. Just kidding, we don't really want to know.

This header is justified. We recommend that you either align your text to the
left, which is the default setting, or justify your text. But feel free to
experiment with all the available alignment options that are at your disposal.

Text Transform
Text-transform is a quick way to modify the capitalization of your text.
CSS Code:
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }

Display:

Hi, I am happy to see you.

HI, I AM HAPPY TO SEE YOU.


Hi, I am happy to see you.
Note: All sentences below originally were, "Hi, I am happy to see you." With
the use of the text-transform CSS attribute we were able to modify the
capitalization.

CSS White Space


The white-space attribute allows you to prevent text from wrapping until you
place a break <br /> into your text.

CSS Code:
p { white-space: nowrap; }

http://www.tizag.com/cssT/index.php

Display:
This paragraph will not wrap until I tell it to with a break tag. As you can see, it makes the
page look
quite ugly.

In the above paragraph the page break occurred after "... page look", which
caused the text to resume on the following line.
Note: We set a CSS overflow property, above, so that the example could be
shown more readily.

CSS Word Spacing


With the CSS attribute word-spacing you are able to specify the exact value
of the spacing between your words. Word-spacing should be defined with
exact values.

CSS Code:
p { word-spacing: 10px; }

Display:

This paragraph has a word-spacing value of 10px.

CSS Letter Spacing


With the CSS attribute letter-spacing you are able to specify the exact value
of the spacing between your letters. Letter-spacing should be defined with
exact values.

CSS Code:
p { letter-spacing: 3px; }

Display:

This is a paragraph with letter-spacing of 3px.

CSS Padding
With CSS Padding you will be able to change the default padding that
appears inside various HTML elements (paragraphs, tables, etc). But first, let
us make sure we understand the definition of padding. A padding is the
space between an element's border and the content within it.
Please see the example below for a visual representation. Note: The border
has been made visible, for each element, so you may more readily see the
effects of padding.

CSS Code:
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}

http://www.tizag.com/cssT/index.php

Display:
This is a paragraph that has a padding of 15 pixels on every side: top, right, bottom, and
left.

This header has no padding, which places the text right against the border!
There are several ways to go about defining the CSS Padding attribute. We
will show you every possible way and let you know which ways are the best.

CSS Padding: 1 Value


As you saw in the example above, padding can be uniform inside an
element. Specifying one value will create a uniform padding on all sides:
top, right, bottom, left. In addition to using exact values, you may also
define the padding with the use of percentages.

CSS Code:
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}

Display:
This is a paragraph that has a padding of 5 pixels on every side: left, top, right, and bottom.

This header has no padding. It is only spaced away from the paragraph
because the paragraph has a padding of 5 pixels!

CSS Padding: padding-(direction):


Each HTML element actually has 4 different paddings: top, right, bottom,
and left. It is possible to define these individual paddings simply by adding a
direction suffix to the padding attribute. Example form: padding-(direction).
Defining only one direction will leave the other 3 default paddings
untouched.

CSS Code:
p { padding-left: 5px; border: 1px solid black; }
h5{
padding-top: 0px;
padding-right: 2px;
padding-bottom: 13px;
padding-left: 21px;
border: 1px solid red;
}

Display:
This paragraph had one padding specified(left), using directional declaration.

http://www.tizag.com/cssT/index.php
This header had each padding specified separately, using directional
declaration.

CSS Padding: 2 & 4 Values


Four padding values can be declared at once by either specifying two or four
values. When only using two values, the first will define the padding on the
top and bottom, while the second will define the padding on the left and
right.
When using the four value padding specification, the corresponding
directions are: top, right, bottom, left. To help you remember what the order
is, just remember that it starts at the top and then moves clockwise until it
reaches the left. The examples below shows partial (2) and complete (4)
padding usage.

CSS Code:
p{
padding: 5px 15px;
border: 1px solid black;
}
h5{
padding: 0px 5px 10px 3px;
border: 1px solid red;
}

Display:
This paragraph has a top and bottom padding of 5 pixels and a right and left padding of 15
pixels.

This header has a top padding of 0 pixels, a right padding of 5 pixels, a


bottom padding of 10 pixels, and a left padding of 3 pixels.

You might also like