info@webjar.nl

CSS Basics

CSS stands for cascading style sheets and is the language for styling a webpage. With CSS you can change the boring and plain-looking HTML pages to beautiful websites with interesting layouts.

First of all, you need to know CSS Syntax

The CSS Syntax exists of the following elements.

  • Selector
  • Declaration
    • Property
    • Value
CSS Syntax

Different types of CSS selectors

There are numerous different ways to use CSS Selectors the easiest is to point to a plain HTML element by selecting for example “h1” You could also nest this by only selecting every “span” element inside an “h1” by selecting “h1 span”.

Another way and the most used way to use CSS Selectors is with Classes and ID these are properties you give to your HTML elements.

class=“class-name-1 class-name-2”
id=“id-name”

Keep in mind an element can have multiple class names and there can be multiple elements with the same class name on your web page. But for IDs there only can be one. To use these selectors you need the following CSS Selectors.

.classname Or #idname

The declarations with their properties and values can be written the same for every selector.

How to write CSS inside your HTML file

To write CSS inside your HTML page you need to use the HTML <style></style> elements on your page. These will be put inside your <head></head> tags.

Inside the <style></style> tags you can write the CSS you need this will look like the following code:

<style>
h1 {
	font-size: 36px;
	color: green;
	text-align: center;
}

.class-name {
	width: 300px;
	height: 300px;
	background-color: black;
}
</style>

Inline CSS

You could also write inline CSS this option is typically only used when you change styling on the fly with something like Javascript or generate certain CSS for certain elements with PHP inside WordPress this way of writing CSS is called Inline CSS because it is written inline with your HTML. The syntax stays the same for CSS and it looks like this:

<h2 style=“font-size: 26px; color:green;”>This is inline CSS</h2>

Link your CSS files and HTML files

As you could probably see by now the two ways of writing CSS you learned about thus far will look a bit messy when you start writing thousands upon thousands of lines of CSS for your web pages this is why front-end developers opted for the third method of writing CSS and that is inside a dedicated .css file or even multiple structured .css files. Those can be linked inside the <head></head> of your html page with the following code:

<link rel="stylesheet" href=“styles/style.css”>
  • rel is used to let your webpage and HTML know what type of file it is linking too in this case a stylesheet.
  • href is used to specify the path to your CSS file in this case it is put inside a styles folder with the filename style.css.

Linking your CSS files is the most used way of writing CSS and is considered the best and most structured way.

Now that we know what CSS is and how we could use it let’s talk about the different styling options and possibilities

Lets learn about css properties now

It is great to know what CSS is and how to use it but how do you style your webpages with it?

Style your text

Let’s talk about styling the text put on your page there are a lot of different properties to choose from and even more values you can put in but these are the most popular:

  • color: #ff0000;
    The color property is used to give color to your text, later on in this post there will be more information about the different types of color you can use.
  • font-family: 'Helvetica', sans-serif;
    In order to select a specific font for the text you need the font-family property, you can put in specific default fonts like “helvetica” or tell the webpage to use a sans-serif font the web user has installed.
  • font-size: 16px;
    How big do you want your text to be? With font-size you can specify the size of your text and this way you can give for example all your h1 element the same size.
  • text-transform: uppercase;
    If you want your headers to be in uppercase or maybe lowercase you can use the text-transform property.
  • text-align: left;
    Do you want to align your text at the left, right or center of your page?
  • line-height: 1.4;
    With line-height you can define the space between the text lines, you can use this notation which is relative to the font-size you specified or you can use the px notations if you want it fixed to a certain amount of pixels.
  • letter-spacing: 5px;
    For letter-spacing is the same as line-height but with the space between the letter instead of the lines.
  • text-decoration: underline;
    text-decoration is use to give decoration to you text like a little underline or cursive or maybe even bold.
  • text-indent: 50px;
    Text indent lets your text start from x amount of pixels from the start. Personally I almost never use this on my websites but it is good to know it exists.

Spacing your elements

You can add different spacing to your elements these are called padding and margin. And there is a distinct difference between these two elements.

  • Padding is used as spacing inside the element.
  • Margin is used as spacing outside and between multiple elements

The best way to show the difference is with a background color like this:

Borders

You can also give borders to your elements like this:

border: 1px solid gray;

Inside this property, you will specify the width of your border, the type of border you want, and the color of your border. These are the different border types.

You can also specify if you want a border at the bottom, top, left, or right by specifying the following properties.

border-bottom: 3px solid blue;

Border radius is the last property you can use to give your borders rounded corners. With this property, you need to specify the number of pixels you want your round over to be.

border-radius: 5px;
border-top-right-radius: 0px;

Width and height

You can give your elements a fixed or responsive width or height with the width and height properties. You can specify this with pixels, percentages, or even viewport properties.

The viewport property will be a percentage of the browser window of the user. This is different from the percentage property because this will only select the percentage of the element your property is in.

width: 400px;
height: 400vh;

Opacity, Colors, and background colors

There are a lot of ways to give color to your webpages the most popular are color for things like text and background color for elements. Within these properties, you can use different ways to specify the color you want. 

  • Red – Give a default color like Red
  • Hex – values are written like #ffffff
  • RGA – values are written like RGB(255, 255, 255)
  • HSL – (hue, saturation, lightness) written like this: hsl(0, 100%, 50%)

All of these ways are great to use and most people will move towards their preference for me it is the HEX value because I find it the most flexible but RGB values are very easy to get used to as well. I would recommend staying away from HSL unless you need to because this can become quite hard to read sometimes and most design programs don’t show you these values. You can use these color values with the color and the background-color properties.

Opacity

There are multiple ways to show opacity to your elements you can use the property opacity.

opacity: 0.5;
opacity: 70%;

But you can also do this inline with your color or background color in the following ways.

color: rgba(255, 0, 0, 0.5); // the a stands for alpha channel which is your opacity.
background-color: #0000ffaa; // the aa in this hex value specifies the alpha channel as well.

Conclusion

CSS (Cascading Style Sheets) is used for styling your webpage and it is a must for everyone who wants to be a front-end developer to master this language. In this post, I only skimmed the service of this amazing and fun language and there will be more posts about CSS and in-depth guides on the Webjar academy. The most important part of learning CSS is to just go for it try to use all the selectors and properties you know and figure out want you like and how to use them. There are a million different combinations and possibilities and developing in CSS is not about knowing them all but about using the right tools for the design problem you encounter. But the most important part is to have fun and keep going. There are a lot of different ways to write CSS that give the same result so don’t be discouraged if your CSS doesn’t look the same as that of a professional.

Tags

Gerelateerde berichten