CSS – adding style to your markup

Styling with CSS

Now that you have an idea about styling your page, it is time to improve the layout of our html file.

 

Adding the style

In this article, we’ll be using internal styles. Since this is a simple webpage it is ok to add it to our head tag but it is advisable to use an external file when dealing with lots of styles.

 

Global styles

First, we need to add global styles where we need to specify the font and remove some margin and padding. We also added styles for section and section titles.

 
html, 
body { 
	color: #3d3537; 
	font-family: 'Open Sans', sans-serif; 
	font-size: 18px; 
	margin:0; 
	padding: 0; 
} 

* { 
	box-sizing: border-box; 
}

.section {
	margin: 0 auto;
        max-width:920px;
        padding: 0 15px;
                width: 100%;
}   
            
.section__title {
	font-size: 36px;
        font-weight: bold;
        letter-spacing: 1.8px;
        line-height: 66px;
        margin-top: 0;
        text-align: center;
        text-transform: uppercase;
} 

 

The Header

The next step is adding styles for the header, navigation and hero section.

.home {
	background:#00cec9;
}

.navigation {
	display: flex;
        justify-content: space-between;
        padding: 30px 0;
}

.logo {
       height: 47px;
       width: 47px;
}

.menu {
      align-items: center;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
}

.menu li a {
       color: #3d3537;
       font-weight: bold;
       padding: 15px 27px;
       text-decoration: none;
}

.menu li a:hover {
        background: #3d3537;
        border-radius: 3px;
        color: #ffffff;
}

.hero {
      padding: 70px 0 97px;
}

.hero__tagline {
     color: #ffffff;
     font-size: 60px;
     font-weight: bold;
     line-height: 66px;
     letter-spacing: 3px;
     margin:0 0 0 88px;
     text-transform: uppercase;
     width: 300px;
}

 

The Portfolio

.portfolio {
	padding: 63px 15px 67px;
}

.portfolio__row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
}

.portfolio__col {
        padding: 0 15px;
}

.portfolio__row:last-child {
         margin-bottom: 0;
}

.portfolio__image {
         height: auto;
         max-height: 251px;
         max-width: 277px;
         width: 100%
}

 

The About section

.about {
	background: #55efc4;
        padding: 67px 15px 92px;
}

.about__description {
       font-weight: bold;
       line-height: 43px;
       letter-spacing: 0.9px;
       margin: 0 auto;
       max-width: 565px; /* changed */
       text-align: center;
       width: 100%;
}

 

And finally, the footer

.footer {
	background: #3d3537;
        padding: 40px 0;
}

.footer__copyright {
        color: #ffffff;
        font-size: 15px;
        text-align: center;
}

 

All the styles combined

html, 
body { 
	color: #3d3537; 
	font-family: 'Open Sans', sans-serif; 
	font-size: 18px; 
	margin:0; 
	padding: 0; 
} 

* { 
	box-sizing: border-box; 
}

.section {
	margin: 0 auto;
        max-width:920px;
        padding: 0 15px;
        width: 100%;
}   
            
.section__title {
	font-size: 36px;
        font-weight: bold;
        letter-spacing: 1.8px;
        line-height: 66px;
        margin-top: 0;
        text-align: center;
        text-transform: uppercase;
}

.home {
	background:#00cec9;
}

.navigation {
	display: flex;
        justify-content: space-between;
        padding: 30px 15px;
}

.logo {
       height: 47px;
       width: 47px;
}

.menu {
      align-items: center;
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
}

.menu li a {
       color: #3d3537;
       font-weight: bold;
       padding: 15px 27px;
       text-decoration: none;
}

.menu li a:hover {
        background: #3d3537;
        border-radius: 3px;
        color: #ffffff;
}

.hero {
      padding: 70px 0 97px;
}

.hero__tagline {
     color: #ffffff;
     font-size: 60px;
     font-weight: bold;
     line-height: 66px;
     letter-spacing: 3px;
     margin:0 0 0 88px;
     text-transform: uppercase;
     width: 300px;
}

.portfolio {
	padding: 63px 15px 67px;
}

.portfolio__row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
}

.portfolio__col {
        padding: 0 15px;
}
            
.portfolio__row:last-child {
         margin-bottom: 0;
}

.portfolio__image {
         height: auto;
         max-height: 251px;
         max-width: 277px;
         width: 100%
}

.about {
	background: #55efc4;
        padding: 67px 15px 92px;
}

.about__description {
       font-weight: bold;
       line-height: 43px;
       letter-spacing: 0.9px;
       margin: 0 auto;
       max-width: 565px; /* changed */
       text-align: center;
       width: 100%;
}

.footer {
	background: #3d3537;
        padding: 40px 0;
}

.footer__copyright {
        color: #ffffff;
        font-size: 15px;
        text-align: center;
} 

 

The result

The final result should look like the image below. The final output works on desktop browser but will not look good since it is not mobile responsive yet. We’ll look into responsive design in our future artice.

 

 

Conclusion

In this article, we have styled our HTML file with CSS using selectors like id, class at tags. There are lots of different properties to use in order make your desired layout.

Responses

twenty − seventeen =

This site uses Akismet to reduce spam. Learn how your comment data is processed.