css overview
CSS stands for Cascading Style Sheets, it describes how HTML elements are to be displayed. It is used to style and layout web pages. To alter the size, colour, font and spacing of the content. CSS adds animation and other features to enhance web page style. Splitting content into multiple columns. CSS has many more attributes than HTML so it can give a far better look to HTML pages than HTML attributes. CSS can be written once and the same sheet can be reused in multiple HTML pages to save developing time without repeating the same code. Making global change is pretty straightforward, changing style will affect all web pages connected to that stylesheet. Cascading means that the style applied to the parent element applies to its children's elements. For example, if you set the style for the font in the HTML body all elements within the body will inherit that style unless you specify some other styles for those elements. The browser read properties from top to bottom so if you style the same element multiple times bottom one will take precedence.
There are three ways to include CSS in HTML documents: inline, internal and external.
Inline style is used to style a single element using the style attribute.
<p style="color: green">This is paragraph with green text</p>
Internal style is used to style a single HTML page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: grey;
}
h1 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
In the <head> section of the HTML page, within <style> element internal CSS is defined. Using CSS selectors body will get grey background color, <h1> element text color will be blue, and all the <p> elements text will be green.
An external style sheet is a file with a .css extension. In the following example, it is placed in the same folder as the HTML file. This is not required but if it is somewhere else href attribute within <link> element must be set to point to it.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
<p>This is another paragraph</p>
</body>
</html>
Style.css file looks like this. It contains only CSS code and it can be used in many HTML pages. Changing this file affects all the pages that are linked to it. This is the most common usage of CSS because it saves developing time and eliminates code duplication.
style.css
body {
background-color: grey;
}
h1 {
color: blue;
}
p {
color: green;
}
In the first example we did not use CSS selectors because we were styling a single element and the style is in the element itself. However, in the other two examples, we have to use selectors so the CSS knows which element to style. CSS selectors define the pattern to select elements to which a set of CSS rules are then applied. This time we'll cover basic selectors.
The first one is a universal selector. It selects all elements in a document. In the example below it resets all elements margins and paddings to zero. It is useful to that when start styling because some elements have default margin and padding and you want to use your own style and avoid colision of styles.
* {
margin: 0;
padding: 0;
}
Type selector we used in above examples. This selector selects all elements in the document with given name.
Class selector selects all element with given class attribute. Second and third paragraph will be selected in the example bellow. Syntax for CSS is .classname.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
<style>
#para {
color: blue;
}
.red {
color: red;
}
[target] {
background-color: yellow;
}
</style>
</head>
<body>
<p id="para">This is paragraph</p>
<p class="red">This is another paragraph</p>
<p class="red">This is yet another paragraph</p>
<p><a href="#" target="_blank">New page</a></p>
</body>
</html>
ID selector selects single element based on the value of its id attribute. There should be only one element in the document with the given id because Id is unique attribute. Syntax is #id. In the above example <p> element with id attribute para (id="para") is selected.
Attribute selector selects all elements that have given attribute. [target] above will select <a> element and set backgound color to yellow.
These were just basic examples and CSS selectors are very powerfull. They can be grouped and combined in many ways to fine tune every aspect of styling documents.