CSS Dilemma - From Where to Start

CSS contains a huge resource of styling properties and even more values that makes a beginner ask questions like which ones I should learn? Which one I can skip? Going through all the topics before you could even start is not a good idea when you have tons of things to know.

So, here, you will find the list of basic CSS topics you should learn before actually starting to work on web design.

CSS - Layout

The first thing you should know in CSS is to create multiple columns is a row to define a layout. CSS properties display, float and clear are needed in order to achieve that.

<div class="table">
  <div class="table-left">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
  <div class="table-middle">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
  <div class="table-right">
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  	consequat.</p>
  </div>
</div>	

<style>
.table{
  display: table;
  background: #151f28;
  padding: 30px;
  box-sizing: border-box;
  color: #222;
}
.table-left, .table-middle, .table-right{
  width: 30%;
  float: left;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
}
.table-middle{
  margin-left: 5%;
}
.table-right{
  float: right;
}
.table p{
  text-align: justify;
}
</style>

CSS style rule display: table with width 100% helps you get a base container that takes up as much height as its child elements do without a need to define height for the container. Without table property, parent element will not take the height in relation to its content but only take up as much height as its padding and height property defines. Defining width 100% is a good idea along with the table as it prevents the parent container take up less width when the chidl elements do not have much width to cover.

CSS property background helps you define the background of an HTML element while padding helps you create spacing around the border and the actual content inside.

CSS style rule box-sizing: border-box forces the element to include paddings and margins within the total defined width and height which would by default increase the total width and height and make a horizontal scroll bar appear at the bottom of the screen. Without box-sizing border-box defined any element with width 100% and a padding of 30px would make the total width 105% or 110% or anything close to them. With box-sizing defined the total width remains 100%.

Text colors can be defined on the parent element using CSS property color and the texts in child elements will be affected.

CSS property float forces HTML block elements like <div> take up only the defined width and allow other elements line up next to them. Float value left forces the element to take up available space on the parent container starting from the left end while value right forces element to take up space on the right end. Since the first two floated elements will stay attached to each other on the left while the third element floats on the right, a 10% space of the total width will appear in between the second and third floated element whereas the first two are attached. CSS property margin is used to move the second floated element to the right by 5% making the space on its left and right be eqaul to 5% of the parents total width.

To make the paragraph content look better, CSS style rule text-align: justify is added which makes the paragraph text aligned properly on both ends.

So, the CSS properties used in the example above helps you get going. What next then?

Now, you can add up a bit more style properties to your knowledge base which are shown below.

CSS Navigation

Another important part you might want to learn faster is navigation. Here is an example on CSS navigation.

• home
• about us
• services
• gallery
• blog
• contact us

<ul class="css-navigation">
  <li><a href="#">home</a></li>
  <li><a href="#">about us</a></li>
  <li><a href="#">services</a></li>
  <li><a href="#">gallery</a></li>
  <li><a href="#">blog</a></li>
  <li><a href="#">contact us</a></li>
</ul>

<style>
.css-navigation{
  padding: 10px;
  background: #272727;
  display: flex;
  list-style: none;
}	
.css-navigation li{
  width: 100%;
  text-align: center;
}
.css-navigation li a{
  color: #fff;
  text-decoration: none;
}
.css-navigation li a:hover, .css-navigation li a:focus{
  color: #ccc;
}
</style>

CSS style rule display:flex makes the <ul> element flexible enough to accomodate all child elements within a row where the total width of the parent element <ul> is divided equally to those child <li> elements. CSS style rule list-style: none removes the default list styles.

CSS style rule width: 100% in <li>s defines the maximum width it can occupy while the texts inside<li>s are centered.

Since <a> elements are styled by browsers by default, color for the links are defined along with the style rule text-decoration: none which makes the underline below links disappear.

Finally, link color is defined to be changed when a user moves his mouse over any link item or click those links.

Once you understand these basic CSS style rules, you can go through all other properties with great ease.

---

Try It Yourself »

---

0 Like 0 Dislike 0 Comment Share Tweet