CSS (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!