CSS in 10 minutes

Basics

css logoCSS (Cascading Style Sheets) is a big friend of HTML. It is a simple language that describes formatting styles of HTML layout.

Now this is a powerful tool of front-end development. It provides agile and convenient way to manipulate elements’ appearance on a web-page.

Syntax

CSS is very simple. It is based on selectors (that “selects” elements on a page) and rools (that apply styles to selected elements):

some_selector {

    rule1: rule1_value;

    rule2: rule2_value;

}

Real example:

p {

    font-size: 20px;

}

This css-code is applying font size of 20 pixels to all paragraph elements.

How to use CSS code.

CSS can be attached to HTML-page within’ <link> tag with specified reference to a .css file:

<link rel="stylesheet" href="file_name.css">

or within’ <style> tag containing the css-code inside:

<html>
<head>
	<title>CSS Example</title>
	<style>
		body{
			background-color: aliceblue;
		}
		
		p {
			font-style: italic;
		}

		h1.special_header {
			font-family: monospace;
			text-shadow: 1px 1px 2px black;
		}
	<style>
</head>
<body>
	<h1> CSS Example Page</h1>
	<p>CSS basics in 10 minutes</p>
	<h1 class=”special_header”> Another header</h1>
	<p>This one shows that rules are applied for all p-tags</p>
</body>
</html>

In example above we use CSS for:

  • changing background color of document body;
  • setting style of all paragraphs text to italic.
  • changing font and describing shadow for header text with class named “special_header”;

Wait… What is a class?

A class is an attribute for HTML tag used to separate same tags between each other while “styling” them with CSS. When you specify class for an element(or a bunch of elements) you could easily access it by adding class name to a CSS-selector:

.special_header{} – selects all elements with class “special_header”

h1.special_header{} – selects only h1-tags with class “special_header”

Benefits of using CSS

  • it provides huge agility for manipulating with element’s styles comparing with attribute-based HTML formatting;
  • it encapsulates all style-related setting into one place and separates layout logic and formatting logic.

Congratulation! You’ve learned the basics of CSS in 10 minutes.

Leave a Reply

Be the First to Comment!