1

The following document is a draft for teaching DePaul writers how to use the CSS
language to customize their Digication e-portfolios. The audience for this document is
writers who are unfamiliar with CSS but want to learn more.


Your Digication e-portfolio can be customized in a variety of ways, from modifying
the background color to changing the font of your text. You can make these changes
through using the computer language called Cascading Style Sheets or CSS. Even
if you are not familiar or comfortable with website-building, you can make many
simple, but effective changes to your e-portfolio by altering a few numbers and text
in CSS.


To begin customizing your e-portfolio, you must first navigate to the Custom CSS
space.

1. Click on the Portfolios Tool tab in the top right of your e-portfolio.


2. Once the tab expands, click on Settings and it will take you to a new page.



2

3. Scroll down to the Choose a Theme subheading and click on Customize.


4. The area will expand to reveal the Customize CSS section.



5. You can modify the CSS code in this area to change the look and feel of your e-
portfolio. Before you can view the effects of any changes you make, you have to
scroll down to the bottom of the page and click Save. This will bring you back to
your e-portfolios homepage. Click on the Published tab to see the effects of any
changes you make.






3



Modifying certain structural elements in the CSS, such as the position of containers,
can cause your Portfolio Tools to become inaccessible. As a precaution, always
record your Portfolios ID number (PID) before making any changes to the CSS. The
PID can be found at the end of the URL when viewing your Portfolios Settings page.

Example: https://depaul.digication.com/portfolio/sitemap.digi?pid=123456

If you do end up having trouble accessing the settings page, including the custom
CSS, insert the above URL with your PID into your web browser. You will be able to
reset the CSS (see below).


Next to the CSS textbox, there is a reset button. Note: This reset button will revert
your CSS to the original settings! We recommend saving your current CSS to a
notepad file as a sort of bookmark in case you want to make some changes but are
not sure how they will turn out. That way, you can just copy and paste the
bookmark into the box if you want to return to an earlier version.



Almost every element in your e-portfolio can be modified with CSS, from the header
image to the navigation bar to the footer. Elements like these are controlled by
selectors in the CSS. Making changes to these selectors makes changes to the
elements they control. By doing so, you will change how your e-portfolio is
displayed.


In CSS, selectors are written in a format made up of several pieces of information.
Below is what a typical selector is made of.
Selector
{
Property: Value;
}


4


Selector - refers to the element that the code will be modifying, such as the header.
The selector is followed by two brackets. All properties listed between these two
brackets affect the element.

Property - the specific feature that you would like to make changes to in the
element. Each property ends with a colon and is followed by a value. A semicolon
must follow the value.

Value - the variable that you assign to each property, such as red for a color
property.

Below is an example of a selector which contains information that affects the div
element header_container. (You can learn more about div elements and how they
differ from class elements here).

#header_container
{
color: red;
border-width: 10px;
}

For this example, the selector is header_container, which refers to the header of
an e-portfolio. There are two properties, color and border-width. The color
property changes the text color of the header; in this case, its value is red, so the
text contained in this element will appear red. Border-width refers to the borders
of the header. Based on its assigned value, the border will now be 10 pixels wide.



5




The following is a list and explanation of the main elements that comprise your e-
portfolios layout in CSS. By modifying these elements using their selectors, you can
change the way each will appear in your portfolio.

body This is the element that contains the entire page. Any property written in this
section will affect all of the other elements UNLESS another property is defined in that
element.

For example, if color: blue is typed in the body element, then the text for the
entire e-portfolio will be blue. However, if the #header_container element has
color: red as a property and value, then the #header_container will appear blue,
not red.

#site_topnav The top navigation bar, which contains the Home and Log Out
buttons, as well as other navigational links.

#header _container This div contains the header. You can adjust the margin
around your header, as well as other properties, by modifying this selector.

#main_container Similar to the #header_container, it contains the main content in
your portfoliothat is, the stuff between your header at the top and your footer at the
bottom.

.navigation_topnav This class selector affects the navigational links just below
your banner. These links connect the different sections of your portfolio together.

#footer _container This div contains the footer. It is essentially the same as the
footer element except that it also affects the margin border around your footer.

.title Below your header, this is the area where the title of your portfolio is
displayed.

#footer This is the div that contains the footer at the bottom of your portfolio.


6

Below is an example of a bare bones portfolio, with the major elements colors
modified through CSS.



body
{
background: black;
}
#site_topnav
{
background: red;
}
#header_container
{
background:orange;
}
.title
{
background: yellow;
}


.navigation_topnav
{
background: green;
}
#main_container
{
background: blue;
}
#footer_container
{
background: purple;
}






7




While some properties can be modified by changing words, such as font names,
most properties require numeric values to modify the elements. In HTML\CSS, there
are several types of units of measurement that users can use. While the most
commonly used units are the pixel (px) and em units, other units can be useful, too.
Below is a list of these different units of measurement.

px Short for pixels. This is the default unit, if no measurement is specified.
em Relative to the current font size. If the font size is 12, then 1 em is equal to 12
pixels.
% Percentage from 0 to 100. If set to 100%, the property will be 100% of the size
specified in its parent (i.e., the element where the size is specified by a numeric
value).
mm millimeter
in inch
cm centimeter
ex Similar to em, but instead relies on the height of the font, instead of the overall
size.
pt point. 1 point is 1/72 of an inch
pc pica. 1 pica is equal to 12 pts
To use one of these units, type your numeric value, followed by the specific unit
type. Below is an example code that uses various units of measurement..
#footer
{
margin: 3em;
border-width: 30px;
}



8

In the above code, we are modifying the margins of our footer. We will make the
margin three times the size of current font size. At the same time, we are specifying
that the footer border is to be 30 pixels wide.





Each element of a Digication portfolio, from the text to the background, can be
assigned a color. In CSS, colors can be designated three ways: hexadecimal color
code, RGB, and color names. Below is an example of how to define green using all
three of these methods.

body
{
background: #00FF01; [hexadecimal]
background: rgb(0,256,33); [RGB]
background: green; [color name]
}

All three make the body background green, but each refers to different shades of
green. While color names are by far the simplest nomenclature, there are a limited
amount of colors that can be named. On the other hand, Hex and RGB allow for 16
million different colors to be defined by unique combinations of numbers.

In RGB, colors are defined by a combination of three colors: red, green, and blue.
Each of these colors strength can be increased from 0 to 256. If all three colors have
a value of 0, then the color output is black. If all colors are at max value, 256, then the
output will be white.



Here is a list of several properties that involve color and what they modif:

background-color: Changes the background color of your designated element

color: Changes the font text color


9


border-color: Changes the border color

To learn more about colors and CSS, see the excellent resource at W3schools.com.

Adobe Kuler is a free resource that allows you to create and share custom color
palettes, as well as calculate different color codes.


Even though every section of your e-portfolio can have its own font, you can also
specify a default font by including in the body element, it will change your entire e-
portfolio into that font. Fonts are defined by typing a name of a font in the font-family
property.
Not all browsers have the same types of fonts. As a safety precaution, you should
type several font names into the font-family property. If the browser does not
support the first font, it tries the next font.
As a suggestion, input at least three fonts for the property. Begin with a font you want
most and end with a generic family font. If your font is more than one word, it must
be in quotation marks, for example, "Times New Roman."



Below is a list of generic font families. All browsers will have definitions for fonts with
these three features. A generic font is your safety net because they are guaranteed
to be valid.

serif-fonts with small lines at the end of each letter

san-serif-fonts without lines at the end

monospace-fonts where all characters are the exact same width.


In addition to defining fonts, CSS allows users to modify their fonts with several other
properties. Below is a list of those properties.



10

Font-size-Modifies the size of the font.

Font-weight-Makes the font thinner or thicker. The acceptable values are; normal,
bold, bolder, and lighter.

Font-style-Italicisizes the font. The acceptable values are normal, italic, and oblique.
Below is an example of changing the font for one element.
#main_container
{
font-family: Algerian, Comic Sans, Sans-serif;
font-weight: bold;
font-size: 20;
}

For more information on fonts, W3 SCHOOL




You can add borders to most sections of your e-portfolio. Border properties can only
be added to container elements, they do not work in simply header, but the
header_container. Apart from color, mentioned above, there are two major
properties that you can modify when it comes to borders; border-width and border-
style.

Border-style refers to the type of border that surrounds your container. Below is a list
of border-styles. By default, borders are at solid. The other styles include; dotted,
dashed, double, groove, ridge, inset, and outset.


Each border has four sides. By inputting only one value, all four sides are affected.
However, each side of the border can have its own width and style depending on
how many values have been inputted. Up to four values can be given, each with a
space between them to indicate their separation.

one value- all four sides are affected
two values-top and bottom are first value, left and right are second
three values-top is first value, left and right are second, bottom is third
four values-the order goes top, right, bottom, left


11


The following is an example of adding a border for the header. We will adding a red
border with dotted sides, but a solid top and bottom.

#header_container
{
border-style: solid dotted;
border-width 10;
border-color: red;
}

For more information on borders, W3 SCHOOL



With CSS, the position of all elements can be moved, adding more white space or
putting things closer together. By increasing these properties for each object, you
will essentially increase the white space.



There are two similar properties for increasing the white space; margins and
padding. The biggest difference is that padding alters the white space between the
element and its border, while margins affect the white space between the element
border and the other elements in your portfolio. Below is an image that
demonstrates the different areas that margins and padding affects.




12


Similar to the border-style and border-width properties, both the margin and
padding property accept up to four values, separated by a space. If only one value is
given, all four sides are affected etc.



The float property places elements such as text and images as far left or as far right
as they can depending on which value you give them. If two images have the float:
left property for example, than they will be as close as left they can be without
overlapping each others margins.

The align property effects the alignment of content within the element. There are
four values; right, left, center, and justify. Similar to magazine print, justify stretches
the text lines so that each of them is the same width.

As an example, we want our header container to be 40px away from other elements.
We want the text and images to be 20px away from the border sides.

#header_container
{
padding: 40px;
margins: 20;
align: center;
}

For more information on spacing, W3 SCHOOL