Scribd
Upload
51 views

Cascading Style Sheet

The document provides a lesson on using CSS to style web pages. It covers various CSS properties for formatting text, colors, backgrounds, links, grouping elements, and layout. The key topics covered include using inline, internal and external CSS, background properties like image, color, repeat and position, font properties, text properties, pseudo-classes for links, using class and ID for grouping and styling elements, and the box model properties of margin, padding and borders. The document serves as a guide to the basic and important CSS properties for beginners to learn.

Uploaded by

Gellie Anne Bernardo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

Cascading Style Sheet

The document provides a lesson on using CSS to style web pages. It covers various CSS properties for formatting text, colors, backgrounds, links, grouping elements, and layout. The key topics covered include using inline, internal and external CSS, background properties like image, color, repeat and position, font properties, text properties, pseudo-classes for links, using class and ID for grouping and styling elements, and the box model properties of margin, padding and borders. The document serves as a guide to the basic and important CSS properties for beginners to learn.

Uploaded by

Gellie Anne Bernardo
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 17

CSS

Method 1: In line (the attribute style)

<html>
<head>
<title> Example </title>
</head>
<body style="background-color:#FF0000;">
<p> This is a red page </p>
</body>
</html>

/* Method 2: Internal(the tag style) */

<html>
<head>
<title> Example </title>
<style type ="text/css">
body {background-color: red;}
</style>
</head>
<body>
<p> This is a red page </p>
</body>
</html>

/* Method 3: External(link to a style sheet) */

<html>
<head>
<title> My documents </title>
<link rel="stylesheet" type="text/css" href="style/main.css"/>
</head>
<body>
</html>

Lesson 1: Colors and Background


foreground color: the 'color' property

h1 {
color: #ff0000;
}

The 'background-color' property


body {
background-color: #FFCC66;
}

Background Images [background-image]

body {
background-color: #FFCC^^;
background-image: url("sunset.gif");
}

Notice the location of the image as url("sunset.gif"). This means that the image is located in
the same folder as the style sheet. We can also refer to imager in other folders using
url("../images/sunset.gif") or even on the Internet indicating the full address of the file:
url("http://www.html.net/sunset.gif").

Repeat background Image [background -repeat]


in the example above, by default the sunset was repeated both horizontally and
vertically to cover the entire screen. The property background-repeat controls this behavior.

Value Description
background-repeat: repeat-x The image is repeated horizontally
background-repeat: repeat-y The image is repeated vertically
background-repeat: repeat-y The image is repeated both horizontally and vertically
background-repeat: no The image is not repeated
repeat

to avoid repetition of a background image the code should look like this:

body {
background-color: #FFCC66;
background-image: url;("sunset.gif");
background-repeat: no-repeat;
}

Lock background in=mage [background attachment]


The property background-attachment specifies whether a background picture is fixed or scrolls
along with the containing element.

Value Description
background-attachment: The image scrolls with the page - unlocked
scroll
background-attachment: The image is locked
fixed

body {
background-color: #FFCC^^;
background-image: url("sunset.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

Place background image [background-position]


By default, a background image will be positioned in the top left corner of the screen.
Then the property background-position allows you to change this default and position the
background image anywhere you like on the screen.

There are numerous ways to set the values of background-position. However, all of them are
formatted as a set of coordinates.

Value Description
background-position: 2cm The image is positioned 2cm from the left and 2cm down
2cm the page
background-position: 50% The image is centrally positioned and one fourth down the
25% page
background-position: top The image is positioned in the top-right corner of the page
right

The code example below positions the background image in the bottom right corner:

body {
background-color: #FFCC^^;
background-image: url("sunset.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}

Lesson 2: Fonts
Font family [font-family]

The property font-family is used to set a prioritized list of fonts to be used to display a given
element or web page.

h1{font-family: arial,verdana,sans-serif;}
h2{font-family: "Times New Roman", serif;}

Font Style [font-style]

The property font-style defines the chosen font either in normal, italic or obllique

h1{font-family: arial,verdana,sans-serif;}
h2{font-family: "Times New Roman", serif; font-style: Italic;}
Font Variant [font-variant]

The property font-variant is used to choose between normal or small-caps variants of a font. A
small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of
lower case letters.

h1{font-variant: small-caps;}
h2{font-variant: normal;}

Font weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be represented. A font can either
be normal or bold.

p {font-family: arial, vedana, sans-serif;}


td {font-family: arial, verdana, sans-serif: font-weight: bold;}

Font size [font-size]

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

Lesson 3: Text
Text Indention [text-indent]

p {
text-indent: 30px;
}

Text alignment[text-align]

th {
text-align: right;
}

td {
text-align: center;
}

p {
text-align: justify;
}

Text decoration [text-decoration]


The property text-decoration makes it is posible t add different " decorations" or "effects" to text.

h1{
text-decoration: underline;
}

h2{
text-decoration: overline;
}

h3{
text-decoration: line-through;
}

Letter space [letter-spacing]

h1{
letter-spacing: 6px;
}

p{
letter-spacing: 3px;
}

Text transformation [text-transform]

You can choose to capitalize, uppercase or lowercase regardless of how the original text is
looks in the HTML

h1{
text-transform: uppercase;
}

li {
text-transform: capitalize;
}

Lesson 4: Links
a: visited {
color: red;
}

This example gives active links a yellow background color:

a: active {
background-color: #FFFF00;
}

Pseudo-class: hover

a: hover {
color: orange;
font-style: italic;
}

Example 1: Spacing between letters

a: hover {
letter-spacing: 10px;
font-weight: bold;
color: red;
}

Example 2: UPPERCASE and lowercase

a: hover {
text-transform: uppercase;
font-weight: bold;
color: blue;
background-color: yellow;
}

Example 3: Remove underline of links


To remove underlining, simply set the value of text-decoration to none.

a{
text-decoration: none;
}

Lesson 5:Identification and Grouping of Elements


(class and id)
Grouping elements with class
Lets say that we have two lists of links of different pasta and drinks. Then we want the
pasta links to be yellow, the drinks links to be red and the rest of the existing links on the
webpage to stay blue.

< a href= ""> Menu </a>


<p> Pasta Selection: </p>
<ul>
<li> < a href="ri.htm" class="pasta">Spaghetti</a></li>
</ul>

<p>Drinks Selection: </p>


<ul>
<li><a href="cs.htm" class="drinks">Juices</a></li>
<li><a href="cs.htm" class="drinks">Iced Tea</a></li>
</ul>

We can hereafter define special properties for links belonging to pasta and drinks, respectively.

a{
color: blue;
}

a.pasta {
color: yellow;
}

a.drinks {
color: red;
}

Identification of element using id


What is special about attribute id is that there cannot be two elements in the same
document with the same id. Each id has to be unique.

<h1 id="c1"> Chapter 1 </h1>


<h2 id'"c1-1>Chapter 1.1 </h2>
<h2 id="c1.2"> Chapter 1.2 </h2>
<h1 id'"c2>Chapter 2 </h1>
<h2 id="c2.1"> Chapter 2.11 </h2>
<h3 id'"c2-1-2>Chapter 2.1.2 </h3>

Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with
CSS:

#c1-2 {
color: red;
}
Lesson 6: Grouping of Elements (span and div)
Grouping with <span>

The element <span> is what we could call a neutral element which does not add anything to
the document itself. But with CSS, <span> can be used to add visual features to specific parts of the
text in your documents.

<p> Early to bed and early to rise


makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span. </p>

The CSS belonging to it:

span.benefit {
color: red;
}

Grouping with <div>


Whereas <span> is used within a block-level element as seen in the previous example,
<div> is used to group one or more block-level elements.

<div id="students">
<ul>
<li> 1st year </li>
<li> 2nd year </li>
<li> 3rd year </li>
<li> 4th year </li>
</ul>
</div>

<div id="courses">
<ul>
<li> IT </li>
<li> Nursing </li>
<li> Engineerinf </li>
<li> HRM </li>
</ul>
</div>
We can utilize the grouping in the exact same way as above:

#students {
background: blue;
}
#courses {
background: red;
}

Lesson 7: The box model


The CSS properties are used to define the spacing in and around HTML elements, their
borders, and other positioning aspects. Border, Margin, and Padding all have four properties
each: top, right, bottom and left.

Lesson 8: Margin and Padding


Set the margin in an element
An element has four sides: right, left, top and bottom. The margin is the distance from
each side of neighboring element (or the border of the document)

<body> {
margin-top: 100 px;
margin-right: 50 px;
margin-bottom: 10 px;
margin-left: 70 px;
}

Or you could choose a more elegant compilation:

body {
margin : 100px 40px 10px 70px
}

Set padding in an element


Padding can also be understood as "filling". This makes sense as padding does not
affect the distance of the element to other elements but only defines the inner distance
between the border and the content of the elements

h1 {
background: yellow;
}
By defining padding for the headlines, you change how much filling there will be around the
text in each headline:

h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}

Lesson 9: Borders
Borders can be used for many things, for example as a decorative element or to underline a
separation of two things.

The width of borders [border-width]


The width of borders is defined by the property border-width which can obtain the values
thin, medium, and thick, or a numeric value, indicated in pixels.

h1 {
` border-width: thick;
border-style: dotted;
border-color: gold;
}

h2 {
` border-width: 20px;
border-style: outset;
border-color: red;
}

It is possible to set properties for top, bottom, right, or left borders.

h1 {
` border-top-width: thick;
border-top-style: solid;
border-top-color: red;

border-bottom -width: thick;


border-bottom-style: solid;
border-bottom-color: blue;

border-right-width: thick;
border-right-style: solid;
border-right-color: green;

border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Lesson 10:Align
Center Aligning Using the margin Property

Block elements can be aligned by setting the left and right margins to "auto"

Setting the left and right margins to auto specifies that they should split the available margin
equally. The result is a centered element

.center
{
margin-left: auto;
margin-right: auto;
width: 70%
background-color: #b0e0e6;
}

Lesson 11: Image Opacity


Creating a Transparent Image

<img src="webdev.jpg" width="150" height="113" akt="web" style="opacity:


0.4;filter:alpha(opacity=40)" />

In IE (filter:alpha(opacity=x)) x can be a value from 0-100. A lower value makes the element
more transparent.

Image Transparency - Mouseover Effect

<img src="webdev.jpg" style="opacity:0.4;filter:alpha(opacity=40)"


onmouseover="this.style.opacity=1;this.filters.alpha,opacity=100"
onmouseover="this.style.opacity=0.4;this.filters.alpha.opacity=40" />

We have added an onmouseover attribute an onmouseout attribute. The onmouse attribute


defines whatwill happen when the mouse pointer moves over the image. In this case we want
the image to NOT be transparent when we move the mouse pointer over it. When the mouse
pointer moves away from the image we want the image to be transparent again. This is done
in the onmouseout attribute.

Text in Transparent Box

<html>
<head>
<style type="text/css">
div.background
{
width:500px;
height:250px;
background:url(webdev.jpg) repeat;
border: 2px solid black;
}

div.transbox
{
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #fffffff;
border: 1px solid black;
}

div.transbox p
{
margin: 30px 40px;
font-weight:bold;
color: #0000000;
}
</style>
</head>

<body>
<div class="background">
<div calss="transbox">
<p>
HelloHello HelloHello HelloHello HelloHello HelloHello HelloHello
HelloHello HelloHello HelloHello HelloHello HelloHello HelloHello
HelloHello HelloHello HelloHello HelloHello HelloHello HelloHello
HelloHello HelloHello HelloHello HelloHello HelloHello HelloHello
</p>
</div>
</div>
</body>
</html>

We create a div element (class="background") with a fixed height and width, a background
image, and a border. Then we create a smaller div(calss="transbox") inside the first div
element. The "transbox" div have a fixed width, a background color and a border and it is
transparent. Inside the transparent div, we add some text inside a p element.

Lesson 12: Grouping/Nesting Selectors


In a style sheets there are often elements with the same style.

To minimize the code, you can group selectors. Separate each selector with a comma.

h1, h2, p
{
color:green;
}

It is possible to apply a style for a selector within a selector. In the example below, one style is
specified for all p elements. one style is specified for all elements with class="marked", and a
third style is specified only for elements with class="marked":

p
{
color:clue;
text-align:center
}
.marked
{
background-color:red;
}
.markedp
{
color: white;
}

Lesson 13: Dimension


Setting the width [width]

With the width- property, you can define a certain width of an element.

div.box {
width: 200px;
border: 1px solid black;
background: orange;
}

Setting the height [height]


div.box {
height:500px;
width: 200px;
border: 1px solid black;
background: orange;
}

Set the maximum width of an element using percent


<head>
<style type="text/css">
p
{
max-width: 20%;
background-color: yellow;
}

</style>
</head>
<body>

<p> This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text. </p>

</body>

Setting the line height

<html>
<head>
<style type= " text/css">
#caption
{
line-height: 25px;
}

div {
background: red;
max-width: 25%;
}
</style>
</head>
<body>
<div>
<p id="caption">
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
</p>
<div>
</div>
</body>
</html>

Lesson 14: Display


Hiding an Element - display:none or visibility:hidden

Hiding an element can be done by setting the display property to "none" or the visibility to
"hidden"
However, these two methods produce different results:

visibility:hidden hides an element, but it will still take up the same space as before. The
element will be hidden, but still affect the layout.

h1.hidden (visibility:hidden;}

display:none hides an element and it will not take up any space. The element will be hidden,
and the page will be displayed as the element is not there:

<html>
<head>
<style type="text/css">
h1.hidden {display: none;}
</style>
</head>

<body>
<h1>This is a visible heading</h1>
<h1 class="hidden"> This is a hidden heading </h1>
<p> Notice that the hidden heading does not take up space </p>
</body>
</html>

Lesson 15: Floating Elements (floats)

If we would like to have a text wrapping around a picture, the result would be
like this:

<div id="picture">
<img src=" Hydrangeas.jpg" alt="flower">
</div>
<p> causas naturales et antecedentes, idciro etiam nostrarum voluntatum... </p>
To get the picture floating to the left and the text surround it, you only have to define the width
of the box which surrounds the picture thereafter set the property to left:

#picture {
Float:left;
width: 100px; }

Another example: columns


Floats can also be used for columns in a document. To create the columns, you simply
have to structure the desired columns in the HTML code with <div> as follows:

<div id="column1>
<p> Haec disserens qua de agatur et in quo causa consistat non videt... </p>
</div>

<div id="column2>
<p> causas naturales et antecedentesm idciro etiam nostrarum voluntatum... </p>
</div>

<div id="column3">
<p> nam nihil esset in nostra potestate si res ita sehaberet... </p>
</div>

Now the desired width of the columns is set to e,g, 22% and then you simpy float each column to the
left by defining the property float:

#column1 {
float:left;
width: 33%;
}

#column2 {
float:left;
width: 33%;
}
#column3 {
float: left;
width: 33%
}

float can be set as either left, right or none.

The property clear

The cleat property is used to control how the subsequent elements of floated elements in a document
shall behave.
<div id="picture">
<img src="bill.jpg" alt="bill gates">
</div>

<h1> Bill Gates </h1>

<p class="floatstop"> causas naturales et antecedentes, idiciro etiamnostrarum voluntatrum... </p>

To avoid the text from floating up next to the picture we can add the following to our CSS.

#picture {
float:left;
width:100px;
}

.floatstop {
clear:both;
}

Lesson 16: Positioning of elements


With CSS positioning you can place an element exactly where you want it on your page.

Principle behind CSS positioning


Imagine a browser window as a system coordinates. The principle behind CSS
positioning is that you can position any box anywhere in the system of coordinates.

Absolute positioning
An element which is positioned absolute does not obtain any space in the document.
They means that it does not leave an empty space after being positioned.

To position an element absolutely, the position property is set as absolute You can
subsequently use properties left, right, top and bottom to the box

As an example of absolute positioning we choose to place 4 boxes in each corner of the


documents.

You might also like