Scribd
Upload
2 views

Styling & CSS

The document provides an overview of CSS styling techniques for links, lists, tables, and positioning. It explains pseudo-classes for links, various list styles, the CSS box model, and how to style tables, including zebra striping and using CSS classes. Additionally, it covers CSS positioning properties such as static, relative, absolute, and fixed, along with the z-index and float properties.

Uploaded by

kaushal2061
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

Styling & CSS

The document provides an overview of CSS styling techniques for links, lists, tables, and positioning. It explains pseudo-classes for links, various list styles, the CSS box model, and how to style tables, including zebra striping and using CSS classes. Additionally, it covers CSS positioning properties such as static, relative, absolute, and fixed, along with the z-index and float properties.

Uploaded by

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

Styling & CSS

Styling Links
Link pseudo-classes - you can also style links differently depending on what state they are in.
There are four states:

a:link {} - Defines style for unvisited links


a:visited {} - Defines style for visited links
a:hover {} - Style for hovered links (mouse over)
a:active {} - Defines style for active links (moment clicked)

Need the order – link-visited-hover-active.

a:link { color: green; }


a:visited { color: aqua; }
a:hover { color: blue; }
a:active { color: red; }

E.g, the link changes colour depending on its current state. Can also change the text-decoration
(none, underline, overline).

a { text-decoration: none; }

Can also create rollover effect with:

a:hover { color: blue; background-color: magenta; }

<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
6 a:link { color: green; }
7 a:hover { color: blue; background-color: magenta; }
</style>
</head>
<body>
<h1>An example of links:</h1>
<p>CSS can be used to modify the way links are displayed:
<ul>
<li><a href="nopage.html">link1</a></li>
<li><a href="nopage.html">link2</a></li>
<li><a href="nopage.html">link3</a></li>
</ul></p>
</body>
</html>

View result

Styling Lists
CSS can be applied to lists.
CSS unordered list styles: square, circle, disc (default), and none.
CSS ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal
(default), and none.
<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
6 ul { list-style-type: square; }
7 ol { list-style-type: lower-alpha; }
</style>
</head>
<body>
<h1>An example of links:</h1>
<p>CSS can be used to modify the way links are displayed:
<ul>
<li><a href="nopage.html">link1</a></li>
<li><a href="nopage.html">link2</a></li>
<li><a href="nopage.html">link3</a></li>
</ul>
<ol>
<li><a href="nopage.html">link4</a></li>
<li><a href="nopage.html">link5</a></li>
<li><a href="nopage.html">link6</a></li>
</ol>
</p>
</body>
</html>

View result

We can create a horizontal navigation bar using a HTML unordered list with CSS.

<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
6 nav li {
display: inline;
padding-right: 20px;
9 }
</style>

</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>

View result

We use "display:inline;" and use some padding to make some space between the list items.
Padding is discussed in the next section.
We also use a <nav> tag - why?

Note that by default "display:inline;" removes the bullet points from the list. We could also do this
by using:

ul { list-style-type: none; }

CSS Box Model


For CSS display purposes, every element in a document is considered to be a rectangular box.
The appearance and position of this box can be manipulated. Each box has a content area (e.g.,
the text, image etc) and an OPTIONAL surrounding: padding, border and margin.
Space properties and values

<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
body {
7 margin-left: 8%;
font-family: Arial, Helvetica, sans-serif;
}
p {
text-indent: 2em;
12 margin-left: 10%;
margin-right: 10%;
padding: 2em;
border-color: red;
border-style: groove;
17 border-width: thick;
text-align:justify;
text-transform:capitalize;
line-height:16pt;
}
</style>
</head>
<body>
<span> test1 text2 </span>
<div>text1 text2 </div>
<p>
Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text.
Some text. Some text. Some text. Some text. Some text.
Some text.
</p>

<p>
Some more text. Some more text.Some more text.Some more text.
Some more text.Some more text.Some more text.Some more text.
Some more text.Some more text.Some more text.Some more text.
Some more text.Some more text.Some more text.Some more text.
Some more text. Some more text.Some more text.Some more text.
</p>
<body>
<html>

View result

margin outer wrapping of box. The margin is transparent. Shorthand - one value
specifies all four sides:

margin: 5px;
margin: 5%;

The four sides can be set individually (margin-top, margin-bottom, margin-


left, margin-right).
The four sides are Top, Right, Bottom, Left (Use the mnemonic TRouBLe to
remember order).

border- sets the colour of an element's border.


color
border- sets the appearance of an element's border. Border-style values: solid, dotted,
style dashed, double, groove, ridge, inset and outset.
View different border styles

border- sets the thickness of an element's border. Value can be thin, medium, thick
width or absolute or percentage value.

border Useful border shortcut - to specify width, style and colour in one line:

p { border: thick groove red; }


h2 { border: 2px dotted blue }

The following sets these separately:

h2 {
border-style: dotted;
border-width: 2px;
border-color: blue;
}

Or set the properties for single sides (top, bottom, left, right):

border-top-width: 4px;
border-top-color: red;
border-top-style: solid;

padding space between content of element & border. Inherits background (e.g., colour )
of element. Shorthand - one value specifies all four sides.

padding: 10px;
padding: 10%;

Other properties:

line- sets the height of a line of text. Value can be a length or percentage of the
height current font-size or a point size.

Styling Tables
CSS can also be used to modify the rendering of tables:
<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
6 table {
border-collapse: collapse;
border: 5px solid yellow;
}
td {
border: 1px solid red;
padding: 1em;
}
td.dashed-blue {
border: 5px dashed blue;
}
td.solid-green {
border: 5px solid green;
19 }
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
<td> 3 </td>
</tr>
<tr>
<td> 4 </td>
<td class="dashed-blue"> 5 </td>
<td class="solid-green"> 6 </td>
</tr>
<tr>
<td> 7 </td>
<td> 8 </td>
<td> 9 </td>
</tr>
<tr>
<td> 10 </td>
<td> 11 </td>
<td> 12 </td>
</tr>
<tr>
<td> 13 </td>
<td> 14 </td>
<td> 15 </td>
</tr>
</table>
</body>
</html>

View result

The above shows how to define CSS classes.

td.dashed-blue { border: 5px dashed blue; }


td.solid-green { border: 5px solid green; }

Also, how to use these classes in the web page:

<td class="dashed-blue"> 5 </td>


<td class="solid-green"> 6 </td>

The above also shows the use of the table border-collapse property:

table { border-collapse: collapse; }

Adjacent cells collapse into a single border

table { border-collapse: separate; }

Adjacent cells have their own distinct borders (default)

View two tables - border:separate & border:collapse


Tables - another example to increase their readability - uses CSS classes

<!doctype html>
<html>
<head>
<title>Table with CSS classes</title>
<style>
table {
border-collapse: collapse;
border: 1px solid black;
}
tr.p {
text-align:center;
background-color: #ffddff;
}
tr.b {
text-align:center;
background-color: #ccffff;
}
</style>
</head>
<body>
<h2>Using CSS classes</h2>

<table width="80%">
<tr>
<th>Module Name</th>
<th>Module Code</th>
</tr>
<tr class="p">
<td> Communications and Career Management</td>
<td> ECSC400</td>
</tr>
<tr class="b">
<td> Computer Systems Fundamentals</td>
<td> ECSC404</td>
</tr>
<tr class="p">
<td> Software Development Principles II</td>
<td> ECSC405</td>
</tr>
<tr class="b">
<td> Mathematics for Computing</td>
<td> ECSC408</td>
</tr>
<tr class="p">
<td> Information Systems</td>
<td> ECSC411</td>
</tr>
</table>
</body>
</html>

View result

CSS3 - Alternative Zebra Stripe Table Rows


In the following example the CSS3 pseudo-class :nth-of-type() is used to select odd and even
rows. Then the first row is selected.

<style>
tr:nth-of-type(odd) { background-color: #ffddff; text-align: center; }
tr:nth-of-type(even) { background-color: #ccffff; text-align: center; }
tr:nth-of-type(1) { color: red; } /* for first row only */
<style>

Alternative Zebra Stripe Table Rows


View result

CSS3 Child Selectors


CSS3 includes specific pseudo-classes for selecting child elements. A child tag is any tag
enclosed by another tag.
1. :FIRST-CHILD Lets you select and format just the first of however many children an
element may have. E.g., to select the first <h1> tag on the page, create a selector like this:

h2:first-child

2. :LAST-CHILD This is like :first-child but just with the last child of an element. E.g., to style
the last item in a list, you use:

ul li:last-child

3. :NTH-CHILD You can style every other row in a table, every third list item, or style any
combination of alternating child elements.

Using a keyword, either odd or even, lets you select alternating odd or even child elements.
E.g., applying one background colour for each even row in a table and another background
colour of each odd-numbered row:

tr:nth-child(odd) { background-color: #D9F0FF; }


tr:nth-child(even) { background-color: #FFFFFF; }

:nth-child() can also be used in another way. E.g., to highlight every third table cell inside a
row, starting with the second table cell:

tr td:nth-child(3n+2) { background-color:#900; }

The number before the n (3 in this case) represents which child element you’re after. So, 3n
means every third element, while 4n means every fourth element.

The plus sign followed by a number (+2 in this example) indicates which element to start at,
so +2 means start at the second child element, while +5 means start at the fifth child
element.

So :nth-child(5n + 4) selects every fifth child element starting at the fourth child element.

CSS Positioning
The position property
The position property identifies how an element is positioned on a page.

static
By default every element has a position value of static, which means that it exists in the
normal flow of a document. The static value can be overwritten with a relative, absolute or
fixed value.

.static {
position: static;
}

relative
Setting the top, right, bottom, and left properties of a relatively-positioned element will
cause it to be adjusted away from its normal position. Other content will not be adjusted to
fit into any gap left by the element - there will be blank space where the relatively-positioned
element would normally be.
.relative {
position: relative;
top: -20px;
left: 20px;
width: 500px;
}

fixed
A fixed element is positioned relative to the viewport, the element remains fixed at the same
position inside the browser window. This means it always stays in the same place even if
the page is scrolled. The top, right, bottom, and left properties can be used.

.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 200px;
}

absolute
Taken out of the normal document flow. An element positioned with absolute is positioned
relative to the nearest positioned parent. If an absolutely-positioned element doesn’t have
any parent elements, then the initial document <html> will be its parent.

.absolute {
position: absolute;
top: 120px;
right: 0;
width: 300px;
height: 200px;
}

View result
absolute Inside Other Positioned Elements
When an absolute positioned element is nested inside another element which also has
some position value set, then the element with the position : absolute is positioned
absolutely inside the parent element.

#outerDiv {
position: relative;
/* top : 0px;
left : 0px; */
border : 1px solid #ccc;
padding : 10px;
}

#innerDiv {
position: absolute;
top : 0px;
right : 0px;
padding : 10px;
background-color: #ccffcc;
border : 1px solid #99cc99;
}

View result
z-index
The z-index property specifies the stack order of a positioned element using integer values
(positive or negative). The element with the highest z-index value will be at the foreground,
while the element with the lowest z-index value will be at the back.
In this example, element1 will overlap element2 as it has the highest z-index value

.element1 {
position: absolute;
z-index: 1;
}

.element2 {
position: absolute;
z-index: -1;
}

Making elements Float


We will look at two common uses for CSS float:
Images - We can float an image left or right allowing text and/or other elements to wrap
around it.
Layouts - We can also use float as a technique to achieve multicolumn layouts.

float can be set as either left , right or none (default). E.g.:


float:left Slides the element to the left while content below wraps around the right side
of the element.
float:right Slides the element to the right while content below wraps around the left side
of the element.

Floating images
We can use float to move an image either left or right. This will allow the text to flow to the side of
the floated element. The following shows how an image can be floated.

<!doctype html>
<html>
<head>
<title>float and images</title>
</head>
<body>
<h2>Example 1 - image without float (default). </h2>
<p>
<img src="image_f.gif" alt="non-floated image">
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
</p>
<hr>
<h2>Example 2 - image with style float:right.</h2>
<p>
<img src="image_f.gif" alt="float right image" style="float:right;">
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
</p>
<hr>
<h2>Example 3 - An image with style float:left.</h2>
<p>
<img src="image_f.gif" alt="float left image" style="float:left;">
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
Some text to wrap around the image. Some text to wrap around the image.
</p>
</body>
</html>

View result

Float and html forms

We can add CSS float styles to the label tag to improve the form alignment/display.

Example HTML5 form with CSS (examples/style_example10_Form.html)

Float and layouts

When using CSS float for layouts it is common to float a block-level element such as <div> (or
one of the HTML5 new elements like article , section , aside ). The floated elements will require
a width.
<!doctype html>
<html>
<head>
<title>CSS floated columns</title>
<style>

#header {
font-size: 2em;
text-align: center;
border: solid 2px blue;
color: blue;
}

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

#column2 {
float: left;
width: 60%;
}
</style>
</head>

<body>
<div id="header">
<p>Using float to create column layout</p>
</div>

<div id="column1">
<h2>Column 1</h2>
<p>
Some content for the column. Some content for the column.
Some content for the column. Some content for the column.
Some content for the column. Some content for the column.
Some content for the column. Some content for the column.
</p>
</div>

<div id="column2">
<h2>Column 2</h2>
<p>
Some content for the column. Some content for the column.
Some content for the column. Some content for the column.
Some content for the column. Some content for the column.
Some content for the column. Some content for the column.
</p>
</div>

</body>
</html>

View result

Layout approaches:

using percentages for the widths creates a fluid (or liquid) layout that skrinks and expands
depending on the size of the browser window.
fixed layouts use pixel-based widths - the layout does not change when viewed on
smaller/larger devices.

What happens if we add some padding to each column?:

#column1 {
float: left;
width: 40%;
4 padding: 2%;}

#column2 {
float: left;
width: 60%;
9 padding: 2%;
}

View result
Example shows float drop - one column has dropped down. Why – because there is not enough
room for the column. Note: the width of an element displayed in the browser window is not the
same as its width property.

The displayed width of any element is a combination of its width, left and right border sizes, left
and right padding and left and right margins.

Width of Column 1 = 40% plus left padding (2%) plus right padding (2%) = 44%
Width of Column 2 = 60% plus left padding (2%) plus right padding (2%) = 64%

For the columns to fit the browser window / containing block must accommodate the combined
total of all these widths. How can we solve this?

Solution 1 - Reduce column widths:


Column 1 = 36% plus left padding (2%) plus right padding (2%) = 40%
Column 2 = 56% plus left padding (2%) plus right padding (2%) = 60%

or

Solution 2 - Use CSS3 box-sizing property. This includes the width and any paddings and borders
within the width of the column (reduces the column width). Need prefix for Firefox.

{ -moz-box-sizing:border-box; /* for Firefox */


box-sizing:border-box; /* for other browsers */ }

View the source of those examples


View result - Solution 1
View result - Solution 2

clear property
As we know, with CSS float an element can be pushed to the left or right, allowing other elements
to wrap around it.

The CSS clear property instructs an element to not wrap around a floated element. By clearing
an element you can force it to drop down below the floated item.

You have three options - clear:left; clear:right; clear:both. Many people choose to use clear:both
since it clears elements floated left and/or right.

Example - We add the following footer to the web page:

<div id="footer">
<p>Some content for the footer. Some content for the footer.
Some content for the footer. Some content for the footer.</p>
</div>

We add the following CSS to our embedded style:

#footer {
border: solid 2px blue;
color:blue;
}

View result

The results are not as expected - the footer is trying to wrap around the floated columns! We
need to force the footer to drop down below the floated items by adding clear:both to the CSS:

#footer {
border: solid 2px blue;
color: blue;
4 clear:both;
}

View result

CSS3
The CSS3 specification is still under development. However, many of the new CSS3 properties
have been implemented in modern browsers.

While waiting for the CSS3 specification to become final, browser makers added (often
nonstandard) features and prefixed the property names:
Firefox uses -moz-
Chrome uses -webkit-
IE uses -ms-
Opera uses -o-

The following will discuss border-radius and illustrate the use of vendor prefixes
border-radius
To specify rounded corners to rectangular shapes. Supported in IE9+, Firefox 4+, Chrome, Safari
5+, and Opera. To round all four corners equally:

border-radius: 20px;

Example border-radius with vendor prefix

#radiusBorder {
border:2px solid blue;
padding: 30px;
width: 275px;
5 -moz-border-radius: 20px; /* Old Firefox */
6 border-radius: 20px; /* for current browsers */
}

<div id="radiusBorder">
If supported the browser will display this as a box with rounded corn
</div>

If supported the browser will


display this as a box with
rounded corners

Remember to have a border (as above) or a background colour (as below) so that the rounded
corners can be seen.

#radiusBG {
background: aqua;
padding: 30px;
width: 275px;
5 -moz-border-radius: 20px;
6 border-radius: 20px; /* current browsers */
}

<div id="radiusBG">
If supported the browser will display this as a box with rounded corn
</div>

If supported the browser will


display this as a box with
rounded corners

box-shadow
To implement multiple drop shadows on box elements, specifying values for size of offset blur
and colour.

box-shadow: 10px 10px 5px #888;

Accepts the horizontal offset (from left), vertical offset (from top), optional blur distance and
optional colour value. Outer shadow is the default. Optional inset keyword creates an inner
shadow.
Example box-shadow with vendor prefixes

#bs {
width: 300px;
height: 100px;
background-color: lightblue;
5 -moz-box-shadow: 10px 10px 5px #888888; /* Old Firefox */
6 box-shadow: 10px 10px 5px #888888;
padding: 10px;
}

<div id="bs">
If supported the browser will display a box with box-shadow
</div>
If supported the browser will display a
box with box-shadow

text-shadow
The text-shadow property applies shadow to text. Accepts offset from left, offset from top, blur
distance and colour. IE does not support the text-shadow property.

<h1 style="text-shadow: 3px 3px 1px #888;">


If supported the browser will display this with text shadow
</h1>

If supported the browser will


display this with text shadow

Accessibility statement (/accessibility)

You might also like