Easy to Learn CSS for Beginners

• Introduction
• What is CSS?
• Syntax of CSS
• CSS selectors
• Selector Combination of CSS
• How to Link HTML to CSS
• What are the main CSS properties?
• Conclusion

Introduction

  Hello everyone, in this article I’m going to teach you everything you need to know about CSS for beginners. You can use CSS to turn your bland HTML into something beautiful. I will not be covering all property in CSS has to offer because there are hundred’s, but I will covering main concepts for CSS for beginners

What is CSS?

  CSS is actually a styling language is used for modifying the appearance of the content of web pages. The fact that CSS is used for the presentation and design there are many ways to do the same thing. HTML on the hand has set elements for most things which means that there is usually only one correct way to do things in HTML. The ability to do things in many different ways is the reason most people either love or hate CSS. It gives you freedom to do things how you want. Now we need to discuss the syntax of CSS.

Syntax of CSS

  Luckily the syntax is straight forward and easy to understand.

Selector {
property1: value;
property2: value;
}

  The first part of the syntax is the selector, there are many different types and combinations of selectors. A CSS style starts with a selector to apply the style.

  The next comes an opening and closing curly bracket that are used to denote the start and end of the styles that apply to the selector. Every thing in between these curly brackets will be styles that are applied to the HTML elements that match the selector.

  Lastly inside the curly brackets is one or more property and there value pairs. Each of these pairs defines a property such as color, font size, width etc., and a value for the property.

CSS Selectors

  CSS contains many different types of selectors, but the main selectors are element, class and ID selector.

Element Selector

Syntax:

element selector:
h1 {
color: blue;
}

  In this type of element, I will be setting the text color of all elements to blue. Any HTML element can be used as a selector and this style is defined for that selector will apply to all HTML elements of that type.

Class Selectors

Syntax:

.class-name {
property : value;
}

  By far the most common and useful is the class selector. If you remember from my HTML series all HTML elements can have attributes assigned to them such as the ‘href’ for an anchor tag. A class is an attribute that all HTML elements can have and is used with CSS for beginners to distinguish elements for the specific styling. It is most common selector used because they are amazing for creating reusable components.

For example :

.btn {
padding:10px;
colro: white;
}

.btn-1{ background-color: green; }
.btn-2 { background-color: blue; }
.btn-3 { background-color: purple; }

<button class="btn btn-1">button 1</button>
<button class="btn btn-2">button 2</button>
<button class="btn btn-3">button 3</button>

  A site with three different types of buttons, that all share the same styling but different background-color. The class of button to define all styles shared between all buttons. You can then have three other classes that define the specific color for the button. Then all you need to do is add both the base button class and your color specific class to HTML button element and I have all the styles defined in the base button class and color specific class.

ID Selector

Syntax:

#id {
padding:10px;
color: white;
}

  It is an HTML attribute, but a element can have one ID while have multiple classes. An ID also should be unique across the entire web page but HTML does not actually enforce this. You can simply need to use a hash sign(#) to be followed by the ID name. ID’s are supposed to be unique across the webpage and each element can only have one ID. In 99% of all my CSS I use class selectors and avoid using HTML and ID selector as much as possible.

CSS Selector Combinations

.selector-1.selector-2{
property: value;
}

 On top of having many different selectors CSS has multiple different ways to combine selectors together to make your selectors more specific. The first way to combine  selectors is to specify multiple selectors that an element must have in order to be style. To be write different selectors with no spacing between them.

* {
font-family: Arial;
}

 There is also one other form of selector the everything selector that is used to select every element on the entire web page. This selector is defined as the asterisk symbol and is only really used to set some defaults for your entire webpage.

How to Link HTML to CSS

  If you use a separate CSS file and link to it from the HTML. All the styles for the entire webpage can be defined in one or more CSS files and they can be added to any web page by using a simple link element inside the <head> tag in HTML.

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

  The link element is use to link files to the HTML and its main use is to link CSS files. It is also an empty element that uses the “rel” attribute, which stands for relationship to define the relationship between the linked file and the HTML document. In the case of CSS the “rel” attribute will be stylesheet for the HTML. Other attribute that we need to define is the “href” attribute , this attributes works exactly the same as the “href” attribute of an anchor tag and should point. Using external CSS files like this is the best way to use CSS for beginners, since it separates the presentation and contents of websites and allows reusability of styles across the website .

Main CSS Properties for Beginners

 CSS has many different properties, 10 important and CSS useful properties of them I will say.

Width:

 It allows to set the width of an element and you can’t set the width on most inline elements, such as anchor tag or spans.

Height:

 It allows to set the height of an element and much like width you’re unable to set the height on most inline element.

Margin:

 The margin property allows you to add space between the target element and its surroundings this is actually a shorthand property. So you’re able to set the margin for all four sides at once that being top, right, left and bottom.

Padding:

 Padding is the cousin to margin with padding you’re setting space between the element content and it’s border. By default padding is going to increase the width and height of an element.

Font family:

 It allows you to set a list of font families for your element it’s separated by commas. Which means if the browser can’t find the first font in the list it’s going to To fall back to the second and the third and then so on.

Font Size:

 Font size is use for increase or decrease your test in the element. Most of use pixel values for font size. But the (em) unit is best way to used for relative sizes meaning that 2em is two times the current font size.

Text-align:

 Text align has to be a crowd favorite with text align you’re aligning the text within an element. This is commonly use to create centered text.

Border:

 The border property allows you to set a border around your element. To apply border you can set three values, first is width second is style and third is color. Keep in mind that this is a shorthand property and will set all four sides at once.

Border Radius:

 It is probably one of the most loved CSS properties, this one is going to give you rounded corners on your elements and you can set a pixel value. It will have shorthand property will set all four corners at once.

Box Shadow:

 The box-shadow property allows you to set a shadow behind your elements. You have to give 4 values they, are set the horizontal offset, vertical offset, blur amount and color.

Conclusion

 It has everything you need to know to get start with CSS for beginners. I know we’ve cover a lot in this article and we’re still missing a lot of what their is to do in CSS, but these simple rules you can get start.

How to Create Responsive website on CSS : Click here