Introduction

Welcome, I'm assuming you're here because you want to get started using CSS. Great Choice! Assuming you have already read my article on getting starting with HTML, than lets get started. If not here is a link to it, you might want to read that before continuing. Lets start.

Basics

How might do I even link a CSS file to my HTML file? Its very simple, assuming you name the .css file "style" here is an example:

  <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
</html>

How do I format CSS? CSS can be a little intimidating to a beginning developer but with some practice it will get easier.

Here's an example of a simple div format in a .css file:

  .div {

}

As you can see CSS uses braces {} unlike HTML where you would use carrots <>. Everything between the carrots and braces will be included in the element.

To take it a step further, we are going to discuss the difference between id and class selectors.

  <!DOCTYPE html>
<html>
<div id="example"></div>
<div class="example2"></div>
</html>

  #example {
}
.example2 {
}

Above you can see the difference when using a id and class selectors. When importing a id selector into a .css file use a # before the name of the element. When importing a class selector into a .css file use a . before the name of the element. Now, you may be wondering what the difference between id and class are, well the difference between an id and a class is that an id can be used to identify one element, whereas a class can be used to identify more than one.

Inheritance

When it comes to CSS there are a few things you need to know in order to actually make quality content. Inheritance is very important when it comes to complex shapes and elements of a webpage. Inheritance is exactly what it sounds like, an element will inherit a trait from it's parent element. Here is an example grabbed from: (https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance)

  <!DOCTYPE html>
<html>
<body>
<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>
</body>
</html>

  #winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

Fonts

So what's so important about fonts? Well, fonts give the website character, if you visited a website with the default text you would not be turned on and probably would not want to return to the site because of the asthetic of the webpage. Fonts make the page POP. Here is how you can use fun fonts on your website.

A great website to use to get fonts fast and free is:

https://fonts.google.com

simply click the font you want from the list given, this is what you will see:

Copy the first box and paste it into the head of your HTML document. After, copy and paste the second box into your id or class that you used for your paragraph.

  <!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
</head>
<p class="main"></p>
</html>

  .main {
  font-family: 'Pacifico', cursive;
}

Congratulations, you've implemented your font!

Shapes

Shapes are essential when it comes to learning CSS. In order to truly design a website you need to understand the fundamentals of what shapes consist of. In the example below I will show you a square made using pure CSS. I will explain what everything means in due time.

As you can see, if you tried to read the CSS than you could see that you can adjust the height and width of the shape as well as the color. Simple. Now, where it says position: relative this is how you can position a shape on the page. It can either be relative or absolute to the page. Where it says top, bottom, left, right this is how far from the sides the shape is. So if you wanted to move the shape left 200px than you would say:

  position: relative;
right: 200px;

As you can see I used the opposite side, in this case, right to move the shape left.

Closing Remarks

Now hopefully I have enlightened you in the art of CSS and you will go on with your journey and explore the endless opportunities that it offers. To leave you with something influential and inspiring here is a Pen to show how CSS can make anything beautiful! Enjoy!


3,055 3 29