Css Basics
If HTML gives structure to a website, then CSS is what makes it pretty. CSS is cascading style sheets- in other words- it's layers of styling that you can apply to different HTML elements.
Inline CSS will go into style attribute. There, in double quotes (") you can specify all the styling you want.
For example:
<p style="color:green; font-size:20px">Inline CSS</p>Will be rendered as:
Inline CSS
Inline styling have 2 massive problems:
- What if we want to apply the same style consistently?
- We're mixing style and structure
Normally, CSS and HTML will be separated into at least 2 different files. For very simple websites, such files usually are index.html and main.css.
The usual way of defining CSS is through rules defining through selectors.
For example:
p {
color: green;
font-size: 20px;
}
h1{
/* More styling... */
}Is equivalent to the previously rendered paragraph style. Everything before { is a selector- in this case we select all paragraphs. Stuff in between {} is the formatting that will be applied to it.
color and font-size are CSS properties.
We can have the same CSS spanning accross multiple elements. For example, if we wanted all headings to be the same size, we could:
h1, h2, h3, h4, h5, h6{
font-size: 30px;
}In other cases, we might want to apply the same styling for elements inside another element. For example if we wanted all paragraphs within a 2nd level heading to be of color darkkhaki, we could:
h2 p{
background-color: darkkhaki;
}There are cases when content is neither a paragraph, nor a header. In that case, we can define our own CSS class:
.introduction {
border: 1px solid;
}You can even apply CSS whenever some action happens. For example:
h1: hover{
text-decoration: underline;
}This will underline the h1 heading whenever you hover your mouse over it. The same can applied to specific patterns, like the first line, firt word, etc.
In HML, through attributes you can give id to individual elements. For example:
<p id="test"></p>Selectors can be applied to an element with a specific id as well. For example:
#test{
}Selector for any attribute in general. Given we have:
<p title="test"></p>The following selector will select the above paragraph:
[title="test"] {
}More info can be found in this tutorial.
-
{}- holds styling for selected elements - We seperate a property and a value using a colon (
:)-attribute:value - Different properties are separated using semicolon (
;) -
h1- selects a single elements -
h1, h2- selects multiple elements - Different selectors don't need any separator as long as they appear in a new line
-
/**/- comment -
:next to a selector specifies what action will make the style change -
.is used to specify a custom element
We can give meaning to HTML elements beyond the typical p, h1 and so on. This is done using a class attribute.
For example:
<p class="introduction">Introduction Content</p>With this CSS:
.introduction {
border: 1px solid;
}Will apply the above styling to Introduction Content.
A more common way of doing this will be using a <div>. <div>- is an HTML tag that is used to group other HTML elements. It is a perfect target to apply CSS class, because it carries little to no styling of its own.
Introduction might not be considered as a paragraph, therefore it might make more sence to call it a simple div:
<div class="introduction">Introduction Content</div>Meta is anything that is not a part of content on page. This includes stylings, title and extra script files. In order to separate meta from actual content, we use a <Head> and <Body> tags.
Place page metadata in here. This separation is useful, because head is loaded before the body. Inside a head, we can load all the meta and then apply it to the body.
Head also includes the title of page (which will appear on the tab opened).
A head with title:
<head>
<title>My title</title>
</head>Renders as:
As mentioned, head loads all the resources before body is loaded. In order to add a stylesheet as a resource, we will need to use a link element.
For example:
<head>
<link type="text/css" rel="stylesheet" href="main.css">
</head>rel specifies a relationship between the current document and a link. rel=stylesheet means that the file specified is a stylesheet of the current document.
type="text/css" specifies a MIME type (Multi-Purpose Internet Mail Extensions)- equivalent to a file extension- which the browser will use to interpret the data. Normally, every link should come with its own type, but for stylesheets this could be ommited (and is actually recommended).
Lastly, href="main.css" specifies how to locate the resource. In our case it's main.css file right next to this file. Consider href to be an equivalent of src, but for links.
Place all page content in here.
So if we have this on a page:
<h1>Hey!<h1>
<p>Content should be inside page body.</p>Convert it to:
<body>
<h1>Hey!<h1>
<p>Content should be inside page body.</p>
</body>This adds to the structure of a document and supports a better lifecycle of what is loaded after what.
html tag should contain all other HTML- it signlas that the code inside it is html and will help browser understand it.
<!DOCTYPE html> is a tag that specifies which HTML version should be used. If none specified- it will use the latest (as of time of writing- 5).
Therefore, all things in consideration, a typical HTML document will always have the following structure:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>The elements we know so far fit into one of 2 categories: they either fit inside a box or they don't.
Block-level elements have a context box around them. By default, the box will stretch through the whole width of a page and won't allow any elements appear next to it. Examples: <p>, <body>, <br>, <div>...
Inline elements are something that fits in a line or next to it. There is no magic box and it will try to appear next to another inline element. Examples: <s>, <b>, <i>, <img>...
Block-level elements can contain both block-level and inline elements. However, inline elements cannot contain block-level elements- they can only contain other inline-elements.
Using styling, you can override the default placement of elements with block tags. This is done using a Display styling property.
-Display: block
-Display: inline
And a few other values can control the way elements will be laid out.
li by default is a block level tag. If you wanted to inline them, you could:
<ul>
<li style="display:inline">Test</li>
<li style="display:inline">Test</li>
<li style="display:inline">Test</li>
</ul>- Test
- Test
- Test
Block-level items are always placed inside a content box. There are 3 ways you can format the content and the box. That is best illustrated by this image:
- Padding- space between content and a border;
- Border- contour of content box;
- Margin- space between border and the next content box or end of page.
The below is self explanatory:
border-width: 1px;
border-style: solid;
border-color: green;And can be shorthanded:
border: 1px solid green;Centering can be done using an auto value value of a margin. For example:
If you have content without constraints- you can center it by simply using text-align.
For example:
<h4 style="text-align: center">Center</h4>If the content is with a constraint (specified width, note 50px below), then you can use auto margins to stretch it.
<p style="width: 50px; margin: 0 auto 0 auto">Center</p>Center
It's worth explaining the order of margin. This:
margin: 1 2 3 4Is the same as:
margin-top: 1;
margin-right: 2;
margin-bottom: 3;
margin-left: 4;There are a few more tricks for placing images.
<img src="images/month2/FailedMerge.png" width="40px" style="float: left">
<h3>Fat Trunks</h3>
<p>Result of a failed merge</p>
<div style="width: 280px; height: 300px; background: url(images/month2/Electro.png) top left no-repeat">
<p>Testing background image</p>
</div>
A form is a content box for user input. For example a contact form which has an input box and a button to send an email to.
Input, as the name implies, is a tag for user input.
For example, here is how a login form could look like:
<input type="text"/>
<input type="password"/>
<input type="submit" value="Login">A full list of different kinds of input can be found here.
Label is a special tag- a label is for something. We specify what the label is for using an id passed through for attribute.
The login form above lacks labels- indicators what is each field for. Let's add it!
<label for="Username">Username</label>
<input id="Username" type="text"/>
<label for="Password">Password</label>
<input id="Password" type="password"/>
<input type="submit" value="Login">
This works, but looks awful. Usually, labels and input boxes are one per each line- block level in other words.
<label for="Username" style="display: Block">Username</label>
<input id="Username" type="text" style="display: Block"/>
<label for="Password" style="display: Block">Password</label>
<input id="Password" type="password" style="display: Block"/>
<input type="submit" value="Login" style="display: Block">