CSS or Cascading Style Sheets is the descriptive language used for styling the HTML document (the webpage:
body {
color: #333333;
}
nav {
background-color: #ddd;
}
.container {
margin: 0 auto;
}
.container .medium {
padding: 0 30px 25px 5px;
}
h1, h2, h3 {
color: #000;
}
nav > a {
background-color: #fff;
}Here is how we add styles to the webpages:
<!-- Inline Style -->
<tag style="property: value;"><!-- Embedded Style -->
<head>
<style type="text/css">
selector { property: value; }
</style>
</head><!-- External Style Sheet -->
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>To easily learn the CSS properties, we can use a Cheat Sheet.
Also, developer.mozilla.org will help us to exercise the selectors.
CSS Diner helps us to have a better understanding of CSS selectors. Let's play!
Create a HTML document (cv.html) with the following markup and 2 CSS files (style.css and resume-style.css) with its styles.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="resume-style.css">
<title>Resume</title>
</head>
<body>
<header class="header">
<h1 class="title">SUNNY LUTHRA</h1>
<h2 class="subtitle">Animator / Photographer</h2>
</header>
<nav class="menu">
<a class="menu-item" href="index.html"><i class="fa fa-user"></i> About me</a>
<a class="menu-item menu-item-active" href="resume.html"><i class="fa fa-file-text"></i> Resume</a>
<a class="menu-item" href="portfolio.html"><i class="fa fa-heart"></i> Portfolio</a>
<a class="menu-item" href="contact.html"><i class="fa fa-envelope"></i> Contact</a>
</nav>
<div class="resume-container">
<main class="resume-content">
<!-- Work Experience -->
<section>
<h2 class="resume-title">Work Experience</h2>
<div class="resume-info">
<h3 class="resume-subtitle">Freelance web designer</h3>
<div class="resume-date">
<time datetime="2009">2009</time> - <time datetime="2010">2010</time>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc
vel vehicula ante.</p>
<hr>
<div class="resume-info">
<h3 class="resume-subtitle">Python Programmer</h3>
<div class="resume-date">
<time datetime="2010">2010</time> - <time datetime="2011">2011</time>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc
vel vehicula ante.</p>
<hr>
<div class="resume-info">
<h3 class="resume-subtitle">Social Media Lunatic</h3>
<div class="resume-date">
<time datetime="2011">2011</time> - <time datetime="2012">2012</time>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc
vel vehicula ante.</p>
<hr>
<div class="resume-info">
<h3 class="resume-subtitle">Being Awesome</h3>
<div class="resume-date">
<time datetime="2011">2011</time> - <time datetime="2019">2019</time>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc
vel vehicula ante.</p>
<hr>
</section>
<!-- Education -->
<section>
<h2 class="resume-title">Education</h2>
<div class="resume-info">
<h3 class="resume-subtitle">NoUse School</h3>
<div class="resume-date resume-date--green">
<time datetime="2001">2001</time> - <time datetime="2002">2002</time>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc
vel vehicula ante.</p>
<hr>
<div class="resume-info">
<h3 class="resume-subtitle">Super Useless College</h3>
<div class="resume-date resume-date--green">
<time datetime="2002">2002</time> - <time datetime="2008">2008</time>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc
vel vehicula ante.</p>
<hr>
</section>
</main>
<aside class="resume-aside">
<h2 class="resume-title">Skills</h2>
<h3 class="resume-subtitle">Software</h3>
<ul class="skills">
<li class="skills-item"><span class="skills-bg photoshop">Photoshop</span></li>
<li class="skills-item"><span class="skills-bg ilustrator">Ilustrator</span></li>
<li class="skills-item"><span class="skills-bg indesign">InDesign</span></li>
<li class="skills-item"><span class="skills-bg xd">Xd</span></li>
<li class="skills-item"><span class="skills-bg sketch">Sketch</span></li>
<li class="skills-item"><span class="skills-bg office">Microsoft Office</span></li>
<li class="skills-item"><span class="skills-bg linux">Linux</span></li>
</ul>
<h3 class="resume-subtitle">Design</h3>
<ul class="skills">
<li class="skills-item"><span class="skills-bg user">User</span></li>
<li class="skills-item"><span class="skills-bg typography">Typography</span></li>
<li class="skills-item"><span class="skills-bg web">Web Applications</span></li>
</ul>
<h3 class="resume-subtitle">Programming Language</h3>
<ul class="skills">
<li class="skills-item"><span class="skills-bg html">HTML/CSS</span></li>
<li class="skills-item"><span class="skills-bg php">PHP/MySql</span></li>
<li class="skills-item"><span class="skills-bg javascript">jQuery/JavaScript</span></li>
<li class="skills-item"><span class="skills-bg ruby">Ruby</span></li>
<li class="skills-item"><span class="skills-bg python">Python</span></li>
</ul>
</aside>
</div>
</body>
</html>For the beginning, let's add the styles below in style.css file:
* {
box-sizing: border-box;
}
html {
font-family: 'Open Sans', sans-serif;
color: #555;
}
body {
background: url('https://raw.githubusercontent.com/WebToLearn/personal-page-css-workshop/master/img/background.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
}
.header {
margin-top: 30px;
}
.resume-container {
background: white;
width: 990px;
margin: 0 auto 30px auto;
padding: 30px 20px;
border: 1px solid #f1f1f1;
box-shadow: 0px 6px #c0392b;
border-radius: 0px 0px 4px 4px;
display: flex;
}At the end of all the exercises, the page should look like this image:
Let's add in our page, using Google Fonts the following fonts:
Open Sanswith a thickness of 400 and 700Latowith a thickness of 400, 700 and 900
A complete tutorial how to add Google font to our website we can find at Linux hint - How to Use Google Fonts in HTML and CSS.
Style the title (.title) of the page to have the following properties:
- its margin to be
0 - the font to be
Lato - the size of the font to be
38px - the font thickness to be
900 - the text to be written using uppercase letters
- the text to be aligned to the centre
Style the subtitle (.subtitle) of the page to have the properties below:
- the text color to be
#999 - its bottom margin to be
1em - the font to be
Lato - the size of the font to be
1.5em - the distance between rows to be
1em - the text to be aligned to the centre
Style the navigation menu to have the following properties:
The menu container (.menu):
- the width to be
990px - the margins to be
80px auto 0 auto - the text to be aligned to the centre
The menu options (.menu-item):
- the element to be of
inline-blocktype - the right margin to be
10px - the left margin to be
20px - the padding to be
10px 40px 10px 40px - the background to be white
- remove text-decoration
- the font thickness to be
bold - the text to be written in block letters
- the type of the font to be
Lato - the size of the font to be
14px - the color to be
#999 - the vertical alignment to be at baseline
The active menu option (.menu-item-active):
- the position to be relative
- the element to be lower by
1px(bottom:-1px) - the color to be
#c0392b - the padding to be
15px 40px 15px 40px; - the top margin to be
0
Style the <hr> tag to have the properties below:
- the top margin to be
25px - the border to be
1px,solidand to have the#f1f1f1color
Style the Work experience and Education sections according to the specifications and using the resume classes (.resume-title, resume-info, .resume-subtitle, etc.):
Style the Skills section according to the specifications using the skills classes (.skills, .skills-title, skills-item, .skills-bg, etc.):
You can improve the design of the Skills bar using
backgroundandlinear-gradient, like in the example below:
.skills-bg {
position: relative;
}
.skills-bg:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-image: linear-gradient(135deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
background-size: 5rem 5rem;
z-index: 1;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
overflow: hidden;
}