Using External CSS Style Sheets
- tmrogers78
- Oct 12, 2021
- 5 min read
This week, I was tasked with creating an HTML5/web-based resume that relied on an external CSS stylesheet, which I also had to create Sounds easy, right?
I began by creating my CSS document because I wanted my HTML resume to look right when I opened it to check my progress. I started with some basic CSS - page color, font style, margins, and text alignment in a .txt document as seen below.
body{
background-color:#F2F2F4;
font-family:Garamond;
margin:30px;
text-align:left;
}
I then began to decide how many headings I would need. I decided I would need a main heading with my name (h1); a second heading set for the sections of my resume such as education, experience, and skills (h2); and a third heading style for subheads under the main sections of my resume (h3). I set the colors for those to align with the color scheme I had chosen for the page and the font sizes to align with each heading's place on the page. I knew I could/would likely come back and adjust all of these after creating my HTML document. I utilized the CSS page at W3Schools.com to make sure I was formatting my CSS properly.
I began to work on my HTML resume in another .txt document. I began with my page title, main heading, and second headings and progressed from there. I tied the CSS stylesheet to the HTML resume using the code below.
<head>
<link rel="stylesheet" href="TracyMRogers.css">
</head>
This project also allowed me to update some key elements of my current resume, which I desperately needed to do. After I created the main sections, I added subheadings for individual educational experiences, jobs, skill sets, etc. I have always preferred that my resume have bullet points rather than paragraphs as I find it easier to read when I'm reviewing resumes likely because of the principle of "chunking" that we learn so much about in educational technology. So, how do you make bullet points in HTML? I found the answer again at W3schools.com under HTML Lists. The code below adds bullet points and indents them in an HTML document.
<ul>
<li>Text</li>
<li>Text</li>
</ul>
I ended up with five sections for my resume - main header (h1) with address and links (h4), education (h2), work experience (h2), special skills & competencies (h2), and presentations & professional development (h2). Each section features two subheadings (h3) with 5-10 bullet points each. Once I had completed all of the text and coding for each section of my resume, I viewed the finished product as an HTML document and found I was dissatisfied with some of the formatting. I ended up adding a fourth heading (h4) for my address and links so that they would be a bit larger than the main text in the bullet points. I also played with the colors a bit more.
One of the biggest frustrations of the project came when I was unable to get the font size for my lists to change. I realized that I thought since I had put the lists inside the paragraph (p) HTML code that the lists would be formatted by that. They were not. So, I had to create the code below to format the font for my lists.
li{
color:#18191A;
font-size:24px;
}
Next, I was tasked with adding a photo to the top of my resume. Rather than have a bunch of white space (or gray, in this case) surrounding the photograph, I decided to figure out how to embed the image so that it was aligned next to the text of my resume. It turns out you can do this two ways.
You can use inline CSS at the end of your image description that reads "display:inline;" or "align:right;" according to a tutorial from the University of Vermont.
Using CSS, you can create code like that below that sets the image to float right of the text but puts specific margins so that the image fits where you want it in relation to the text, according to W3schools.com and a tutorial from Geeks for Geeks.
img{
float:right;
margin:0px 60px;
}
I chose to use the latter and build a buffer on the left and right margins to move the photo closer to my resume text and header.
I ended up with a document that had a bunch of gray space between headers and lists, so I decided to research how to get rid of that space to create a more compact resume. I found a tutorial from How To ASP.Net that showed me how. I began adjusting my bottom margins as described in the tutorial using negative pixel integers to decrease the space between headings and subheadings and between subheadings and lists. I found that each one required a bit of a different adjustment due to the font size of each element. I still had too much space though, so I also began to play with the top margins, too, until I got my spacing how I wanted it. I found an article on Understanding Pixels and Other CSS Units that helped me understand what adjusting by pixels meant. My CSS code for h1, for example, ended up looking like this:
h1{
color:#422246;
font-size:66px;
text-shadow:1px 1px;
margin-top:-6px;
margin-bottom:-24px;
}
While my code for h2 and h3 look like:
h2{
color:#633368;
font-size:42px;
text-decoration:underline;
margin-top:0px;
margin-bottom:0px;
}
h3{
color:#242526;
font-size:36px;
margin-top:-3px;
margin-bottom:-9px;
}
I did not end up having to adjust the margins for h4, my address and links heading/text. You can see from the code above that I also decided to add code for a 1-pixel shadow to my main heading and a code for underlining to h2.
After making these adjustments, I was almost ready to submit my work. In reviewing my web-based resume, I found that I liked the spacing and colors as well as how the headings, subheadings, and photo turned out. I checked the links to make sure they were working properly and found that I did not like the color scheme for the unvisited or visited links. There had to be a way to change those colors, too, right? I found the answer at W3Schools.com in a tutorial about CSS Styling Links. I used the code below to make my links complement the page colors I chose.
/* unvisited link */
a:link{
color:#422246;
}
/* visited link */
a:visited{
color:#84448a;
}
I was now ready to submit my work.
Working on this project, I learned to:
Create and format an external CSS stylesheet.
Link a CSS stylesheet to an HTML document.
Create a list using HTML.
Place an image inline with text using CSS and HTML.
Edit the spacing of an HTML document using CSS.
Change the colors of visited and unvisited links using CSS.
Comments