CSS
101
Syntax, brackets, semicolons, colons, quotes
and line spacing is very important. Forget or misplace one and nothing
might work right.
I give a few assignments as we get into CSS. They will be in bold green.
Don’t miss any of them. Practice on your own also. Contact me if you
have problems and I will try to help. I will do everything I can to
help you master CSS. My email address is george1936@charter.net/ Let
your subject be tutorials. My phone number if you get really stuck
is 209
985-4985. Now go learn how to be a programmer.
CSS is a language that deals mostly with how your page will look. It is usually
located in the header to affect the style and looks of the both the header
and body .
Dealing
with color, allignment and display, CSS improves greatly on HTML’s performances.
You will never be sorry you learned CSS programming. We will be starting
at the very beginning (basic) and proceed into more General CSS and finally
go into some amazing advanced stuff.
————————————————————————————————
A
style sheet is some CSS code that styles specific targets.
Dozens of style sheets are scattered thru-out this tutoial and are written
in purple text to stand out.
‘Cascading style sheets‘ is the ability provided by style
sheet languages such as CSS to allow style information from different sources
to work together. These could be, for instance, style guidelines, styles common
to a group of documents, and styles specific to one document.
————————————————————————————————
CSS can be embedded directly into your HTML document between
style brackets. No script brackets needed. Because some web sites have many
pages linked to them they can write external CSS files and then call them
from the html file when needed. This tutorial deals only with embedded CSS.
We will be using external CSS files in the advanced CSS tutorials
————————————————————————————————
CSS describes how HTML elements should be displayed.
At the below web site the colors and number codes are listed. I use familar
color names but you can also use the # and 5 letter codes.
< http://htmlcolorcodes.com/color-names/
————————————————————————————————
Remember
how html can manipulate styles?
<p style="color:red;">I am red</p> and what ever is
between the brackets is red text. When using CSS you set the styling in the
<head> element and include a different kind of bracket in the code.
The
‘curley’ bracket as it is sometimes called, surrounds the CSS styling which
targets spcific elements.. The syntax is very specific but also consistent
so take special notice to it. With CSS the stylie brackets inclose the
styling and targets specific elements. <p1>, <p2>, <p ect> all target specific
elements.
<style>
body {
background-color:purple;
}
</style>
Try
this out yourself
Notice you don’t use script backets around the CSS brackets. The above code
will turn the entire page or pages purple.
You can control
how entire blocks of elements look with CSS. When you are writting lots of
codes this can save you
loads of time.
In the below example
I have included the entire code for you to copy and paste into a text file,
then don’t close it but ‘save as’ a html file. Keeping the file open allows
you to make changes in code and save it directly into html andview it with
your browser. Don’t forget to refresh your web page to see changes you make
with your open file.
————————————————-
Notice below all
the CSS is in the header but affects data in the body and head elements.
You can change <hx> elements but are limited on text size
control and number of changes. With <p> you can let CSS control the size
and attributes of specfic parts of your page. Paragraph elements or p brackets
are not limited as H elements are like h1-h6 to control font size. <p24> is
ok as long as you close it out with </p24>. CSC syntax lets you select
the element you wish and then with the <style> brackets enclose all the
CSS attributes you need.
Notice that
you usually define the individual elements in the head element and then whereever
they appear they conform to your definitions. p1 may be on page 26 or page 1
of your screen but it will still have the attributes you gave it
.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
h1 {;
color: purple;
text-align: center
}
p {
font-family: arial;
font-size: 20px;
}
p4 {
color: red;
text-align: center;
background-color: purple
}
</style>
</head>
<body>
<p4>Hi there Rhett</p4>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
After
copy and pasting and then viewing the above in html on your browser, make
changes in colors , backgrounds, text types and allignments. Later on you will
learn about <div> or divisions which allow specific CSS attrubutes
for a particular division section in your programming.
CSS Syntax
In
the following example all <p> elements will be center-aligned, with
a red text color:
The selector points to the HTML element you want to style. Like h, p, body,
div etc)
The language and syntax of CSS
the color:blue; font-size:12px; are both declarations.
h3 { color:blue; font-size:12px; } syntax example
Color and font-sizes are both properties. the property color, has a value of
blue and the property font-size has a value of 12px.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
—————————————————————————————————-
In the following example all <p1> elements will be center-aligned,
with a red text color:
<style>
p1 {
color: red;
text-align: center;
}
</style>
<p1> What a day!</p1> With
this in the header all p1 paragraphs thru-out your webpage will be center
alligned with a red font color. In the above example only font color and
allignment are affected. Other attributes can be added to the p1 statements
or another elements.
<style>
p1 {
color: red;
text-align: center;
background-color:
}
</style>
—————————————————————————————————-
You can apply attributes to more than one element. In the below example you
have the same allignment and font color applied to all h1, h2, p1, and p2 data
thru out your web page.
<style>
h1, h2, p1 p2 {
text-align: center;
color: red;
}
</style>
——————-———————————————————————————
Some different attrubutes to apply; Text allignment, font color, background-color,
border size and border color, font-families and there are others.
<style>
h1 {
border-style: solid;
border-color: lime;
}
div {
border-style: solid;
border-color: green;
}
</style>
—————————————————————————————————-
Try out the below and then practice making changes
in the colors, background and borders.
<!DOCTYPE
html>
<html>
<head>
<style>
h1 {
background-color: pink;
border-style: solid;
border-color: blue;
border-width: 12px
}
p2 {
background-color:lime;
border-style: solid;
border-color: coral;
border-width: 5px;
}
</style>
</head>
<body>
<h1>A heading with a colored border</h1>
<p2><strong>Note:</strong> The border-color property can
add real class to a page. Use the border-style property to set the border.the
width of the above paragraph border is width: 5px</p2>
<p4>Wow</p4>
</body>
</html>
It’s time for more practice; With the HTML and CSS you have in your head make
a web page for a sport’s store. Email it in for a critique and suggestions. This property specifies what kind of border to display: A dotted border. A dashed border. A solid border. A double border. A groove border. A ridge border. An inset border. An outset border. No border. A hidden border. A mixed border.
I have styled individual elements in the next example using simple HTML: For
short and less frequently used styles just do the few styles you wish. If you
have a lot of styles in a particular element cluster them between style brackets
using CSS.
<h3 style="color:Tomato;">"Should I get up or lie here
for 10 more minutes?</h3>
<p style="color:DodgerBlue;">It is a cold day at the baseball
game today and my team is losing. Color my dodgers blue.</p>
<p style="color:MediumSeaGreen;">A great day on the ocean.
The sea is a great medium green. What a day!!p>
Border types are varied an many which gives you new ways of presenting your
web pages. Copy paste and observe results: This is a typical CSS Style Sheet.
The CSS code is in the head element and the results in the body. Notice the
specific syntax for border types. Spend some time and try out each of these.
Notice how the styles are set in the <head> section but you see the effects
in the body.
The border-style Property
<html>
<head>
<style>
p.dotted {border-style: dotted; color:red}
p.dashed {border-style: dashed;}
p.solid {border-style: solid; background-color:cyan}
p.double {border-style: double;}
p.groove {border-style: groove; border-color:green; border-width:10px}
p.ridge {border-style: ridge; border-color:gray; border-width:15px}
p.inset {border-style: inset; border-color:gray; border-width:15px}}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Padding is another attribute that CSS can use. It’s the white space around
your text. Copy paste the next example and check it out in your browser. After
checking the syntax change of the styles to see their affect.
<!DOCTYPE html>
<html>
<head>
<style>
div {
padding: 20px;
border: 15px solid purple;
}
</style>
</head>
<body>
<div>This element has a padding of 10px.</div>
</body>
</html>
CSS Divisions;
In the above example we introduced divisions. Check out the
syntax.
CSS Division or <div> is used to group related items . You can group
data together for scripting or styling purposes. a division can be very helpful
with code organization. We will be seeing quite a few division examples as
we
proceed.
A
division can have it’s own background color thru-out the divison enclosed by
the <div> brackets.
In this next example I gave the padding(white space around text) a vaue of
zero. I wanted to point out some of the hazards of attribute mixing. Try changing
the padding and watch how the borders exspand into each other.
<!DOCTYPE
html>
<html>
<head>
<style>
div1 {
padding: 0px;
border: 10px solid purple;
}
div2 {
padding: 0px;
border: 10px solid red;
}
</style>
</head>
<body><div1>This element has a padding of 5px.</div1><br><br>
<div2>This element has a padding of 2px.</div2><br>
<h3> Whats this..no borders! Opps I stepped out of my division.</h3>
</body>
</html>
Divisons can help to make a beautiful web page.
————————————————————
<table>
<h1>Tables and Images</h1>
<div1 align="left">
<table border="5px" bordercolor="black">
<tr>
<th><img src="images tutorials/Duck2.JPG" alt="" duck1.jpg
height=100 width=100></th>
<th><img src="images tutorials/bird4.JPG" height=100 width=100></th>
<th><img src="images tutorials/Mallard.jpg" alt="" duck1
height=100 width=100></th>
</tr>
<tr>
<td><img src="images tutorials/car.JPG" alt="" duck1
height=100 width=130></td>
<td><img src="images tutorials/people.JPG" alt="" duck1
height=100 width=100></td>
<td><img src="images tutorials/car.JPG" alt="" duck1
height=100 width=130></td>
</tr>
<tr>
<td><img src="images tutorials/pool.JPG" height=100 width=100></td>
<td><img src="images tutorials/windows.jpg" height=100 width=100></td>
<td><img src="images tutorials/bird4.JPG" height=100 width=130></td>
</tr>
</table>
Try to make your own table with 2 rows and
2 columns all with images. Save and observe then change it to
4 rows and 4 columns. Call me if you need to.
————————————————————————
Colorful Tables:
Lets add some color to our tables.
Tables and Images
The quite colorful table below has some terms you haven’t used before.
 |
 |
 |
|---|---|---|
 |
 |
 |
 |
 |
 |
Notice that I have inserted CSS brackets { which
may be new to you.
There is no javascript or script brackets in this code. We
have the entire table inside of the table brackets and inside this
are the style brackets which enclose the CSS script.
The padding property adds space between the
border and the content in a table. This table contains some advanced
CSS code. tr:nth-child(even)
{ and causes even and
odd styling
features to a table. We will be covering this in more detail
later in JS 201.
Another
new property is border-collapse: collapse; Notice
the syntax and where it is in the code.
Examine the below code carefully.
<table border="20px" bordercolor="cyan">
<style>
<!–This
is where the CSS is inserted –>
<Table>
{
width: 40%;
border-collapse: collapse;
align: center
}td, th {
border: 10px solid orange;
padding: 10px;
}tr:nth-child(even) {
background-color: pink;
}
tr:nth-child(odd) {
background-color: yellow;
}
</style>
<tr>
<th><img src="images tutorials/Duck.JPG" alt="Duck1.JPG" height=100
width=143 /></img></th>
<th><img src="images tutorials/Duck2.JPG" alt="Duck2" height=100
width=130></img></th>
<th><img src="images tutorials/Bird1.JPG" alt="" "duck3" height=100
width=130 /></img></th>
</tr>
<tr>
<td><img src="images tutorials/Bird2.JPG" alt="" duck2=3
height=100width=130 /></img></td>
<td><img src="images tutorials/bird3.JPG" alt="" Duck2=3
height=100 width=130></img></td>
<td><img src="images tutorials/bird4.JPG" alt="" Duck2=3
height=100 width=130></img></td>
</tr>
<tr> I just had to throw this one in. We will be doing some of these
in CSS 102
<td><img src="images tutorials/flowers1.JPG" alt="" duck2=3
height=100 width=143 /></img></td>
<td><img src="images tutorials/flower2.JPG" alt="" duck2=3
height=100 width=130 /></img></td>
<td><img src="images tutorials/flower.JPG" alt="" Duck2=3
height=100 width=130></img></td>
</tr>
</table>
| Firstname | Lastname | State |
|---|---|---|
| John | Brown | Georgia |
| George | Newman | California |
| Rhett | Smith | Utah |
| Sally | Lewis | Oregon |
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>State</th>
</tr>
<tr>
<td>John</td>
<td>Brown</td>
<td>Georgia</td>
</tr>
<tr>
<td>George</td>
<td>Newman</td>
<td>California</td>
</tr>
<tr>
<td>Rhett</td>
<td>Smith</td>
<td>Utah</td>
</tr>
<tr>
<td>Sally</td>
<td>Lewis</td>
<td>Oregon</td>
</tr>
</table>
</body>
</html>
————————————————————
Classes;
A very strict
syntax but easy to manipulate. You can style bits of data specifically.
Cats
A great companion and doesn’t park all night.
Dogs
Man’s best friend.
Ferrets
Cute small and great company.
In this example, CSS styles all elements with the class name “pets”.
Back to Tutorials
Go to Beginning of
this web page
In this example, CSS styles all elements with the class name “pets”.