Guide to Styling & CSS

The Geekiest One
Mar 29, 2019 · 15 min read
Photo by Pankaj Patel on Unsplash

CSS Syntax

CSS works with HTML to define the way content is presented. Styles can be specified:

  • in the head of a HTML document — embedded style sheet;
  • in a separate style sheet — external style sheet;
  • directly into individual HTML elements — inline styles.

Embedded Style Sheets

The styles are included within style elements inside the head of an HTML document.

HTML & CSS:

<!doctype html>
<html>
<head><title>An Introduction to Style Sheets</title>
<style>
/* Here is a CSS comment */
/* Another CSS comment
over multiple lines */

h2 {
color: #800080;
font-style: italic;
}
p {
text-indent: 2em;
text-align: justify;
}
</style>
</head>
<body>
<h2>An Introduction to CSS</h2>
<p>We have been using HTML to define the basic
structure of our web pages. We will now use
Cascading Style Sheets (CSS) to define the
appearance of our web pages.</p>
<p>We will review three different methods for
incorporating style into HTML documents (embedded
style sheets, external style sheets and inline
styles).</p>
</body>
</html>

Displayed by browser:

HTML5 only requires style for the opening tag of an embedded style sheet:

<style>

Earlier versions of HTML require an additional attribute in the opening tag:

<style type="text/css">

Note that this method is used for styles that are to be applied to a single HTML document.

External Style Sheets

An external style sheet is a separate text file containing all your CSS rules. Note that the text file does not contain the <style> tag and you need to end the file name with the extension .css.

The style sheet can be applied to any number of HTML files. When you make a change to an external style sheet, all the pages that reference it are automatically updated as well.

HTML5 example:

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style1.css">
</head>

Earlier versions of HTML require an additional attribute in the opening tag:

<head>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>

Keywords

Style sheets:

  • A set of instructions for rendering HTML elements
  • The browser’s default style is overridden.

Keywords:

  • Rule: a single instruction. E.g. p {text-indent: 2em;}. The Rule contains two parts: the Selector and the Declaration
  • Selector: the HTML element to which author-specified effects are to be applied
  • Declaration: specifies how the Selector should be rendered. The Declaration contains two parts: the Property and the Value, always separated by a colon.
  • Property: the aspect of a Selector to be affected.
  • Value: how the property aspect should be rendered.

Note that a Selector can have multiple Declarations, separated by semi-colons as in the example:

h2 {
color: #800080;
font-style: italic;
}

Inline Styles

It only applies to the element that contains the inline style. This method can also be used to override any previously declared styles. For example:

<h2 style="color: green;"> A green H2 </h2>

The earlier embedded example rewritten with inline styles would be as follows:

<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
</head>
<body>
<h2 style="color: #800080; font-style: italic;"> ... </h2>
<p style="text-indent: 2em; text-align: justify;">
...
</p>
<p style="text-indent: 2em; text-align: justify;">
...
</p>
</body>
</html>

Inline styles are good for testing. However, inline styles are rarely used for final versions of a website. Why?

General Page Styling

<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
body {
font-family: Arial, helvetica, sans-serif;
}
h2 {
color: #800080;
font-style: italic;
}
h3 {
font-style: oblique;
text-decoration: overline;
}
h4 {
text-decoration: line-through;
}
h5 {
text-decoration: underline;
}
h6 {
font-weight: 900;
}
p {
text-indent: 2em;
text-align: justify;
text-transform: capitalize
}
</style>
</head>
<body>
<h2> h2 - Text Color and Italic Text</h2>
<h3> h3 - Oblique Text with Overline </h3>
<h4> h4 - Line Through Text </h4>
<h5> h5 - Underlined Text </h5>
<h6> h6 - Font-Weight:900 </h6>
<p>This page shows some examples of using basic syle properties and values.
The paragraph has text indent, text-align jusify and text-transform capitalize.</p>
</body>
</html>

Selectors (to include classes and ids)

The following shows different ways of defining selectors (some can be combined).

  1. Selecting elements by name:
h1 { color: blue; }
  1. To add additional rules use semi-colon:
h1 { 
background: white;
color: blue;
}
  1. Selecting groups of elements. Note group selectors are separated by a comma:
h1, h2 { color: blue; }    Same as:   h1 { color: blue; }
h2 { color:blue; }
  1. Selecting elements by context (descendant selector) to select a tag that is nested inside another specified tag. Note contextual selectors are separated by whitespace:
p em { color: green; }<body> 
<h1>Heading <em>text1</em> </h1>
<p>Paragraph <em>text2 green</em></p>
</body>
  1. Selecting elements by class. When you want to give one or more elements a style that is different to related tags on a web page:
.official { color: blue; }<body> 
<h1 class="official">Some heading </h1>
<p class="official">Some text </p>
<p>Some more text </p>
</body>
  1. Selecting elements by id. When you want to give one element a style that is different to related tags on a web page:
#intro { color: green; }<body> 
<p>Some text </p>
<p id="intro">Some more text </p>
</body>
  1. Combining selectors.
div.summary { color: green; }<div class="summary">Some div text that should be green</div>p#new { ... }
  1. Universal selector — targets all elements on the page.
* { color: blue; }
  1. Link pseudo-classes: selecting elements based on their state (see next section):
a: hover { background-color: silver; }

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>
a:link { color: green; }
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>

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>
ul { list-style-type: square; }
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>

Another way to use CSS with lists is to change the list item markers to an image:

<!doctype html>
<html>
<head>
<title>An Introduction to Style Sheets</title>
<style>
li { list-style: url(claretball.gif) circle; }
</style>
</head>
<body>
<h3>Places to go:</h3>
<ul>
<li>London</li>
<li>Paris</li>
<li>New York</li>
<li>Tokyo</li>
<li>HongKong</li>
<li>Milan</li>
</ul>
</body>
</html>

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>
#navlist li {
display: inline;
padding-right: 20px;
}
</style>
</head>
<body>
<ul id="navlist">
<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>
</body>
</html>

We use “display:inline;” and use some padding to make some space between the list items. Padding is discussed in the next section.

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; }

<span> and <div> elements

  • <span> element is a grouping element. Its primary purpose is to apply CSS rules or id attributes to a block of text. It is an in-line level element, which means it is displayed in line with other text and with no line breaks.
  • <div> is a similar element but displayed on its own line, with margins above and below. It is a block-level element

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 {
margin-left: 8%;
font-family: Arial, Helvetica, sans-serif;
}
p {
text-indent: 2em;
margin-left: 10%;
margin-right: 10%;
padding: 2em;
border-color: red;
border-style: groove;
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>

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>
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;
}
</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>

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)

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>

CSS Positioning

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">
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" 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" 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>

Float and html forms

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

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>

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%;
padding: 2%;}
#column2 {
float: left;
width: 60%;
padding: 2%;
}

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 */ }

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;
}

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;
clear:both;
}

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;
-moz-border-radius: 20px; /* Old Firefox */
border-radius: 20px; /* for current browsers */
}
<div id="radiusBorder">
If supported the browser will display this as a box with rounded corners
</div>

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;
-moz-border-radius: 20px;
border-radius: 20px; /* current browsers */
}
<div id="radiusBG">
If supported the browser will display this as a box with rounded corners
</div>

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;
-moz-box-shadow: 10px 10px 5px #888888; /* Old Firefox */
box-shadow: 10px 10px 5px #888888;
padding: 10px;
}
<div id="bs">
If supported the browser will display a box with box-shadow
</div>

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>

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>
The Geekiest One

Written by

I like big brains and I cannot lie! | Computer Enthusiast | Geek | From Planetary Science to Computer Science — ayran.dev

More From Medium

More from The Geekiest One

More from The Geekiest One

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade