Showing posts with label CSS basics. Show all posts
Showing posts with label CSS basics. Show all posts

Tuesday, March 22, 2016

CSS Positioning and Layering

CSS Positioning
CSS positioning is a lot more advanced than just top, middle or bottom!

CSS Positioning

With CSS positioning, you can place an element exactly where you want it on your page. Together with floats, positioning gives you many possibilities to create an advanced and precise layout. To help us understand imagine a browser window as a system of coordinates, as in the image below.

Browser window screen coordinates for use with CSS Positioning
Browser window screen coordinates for use with CSS Positioning

The principle behind CSS positioning is that you can position any box anywhere in the system of coordinates. Let's say we want to position a headline. By using the box model we can make a headline appear as follows...


If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS:



The result will be as follows...

CSS Positioning
CSS Positioning

As you can see, positioning with CSS is a very precise technique to place elements.

Note: The element is positioned from its top left corner.

Absolute or Relative Positioning

There are two types of positioning, absolute and relative. In the sample above we used absolute positioning . An element which is positioned absolute does not obtain any space in the document, which means that it does not leave an empty space after being positioned. To position an element absolutely, the position property is set as absolute. You can subsequently use the properties left, right, top, and bottom to place the box. As an example of absolute positioning, the CSS code below would place 4 boxes in each corner of the browser window.



The difference between absolute and relative positioning is that for an element which is relatively positioned the position is calculated from the original position of the element in the document.

To position an element relatively, the property position is set as relative. That means that you move the element to the right, left, up or down. This way, the element still obtains a space in the document after it is positioned. An example code is shown below...



Tip: When using positioning it is recommended that you use either all absolute positioning or all relative positioning, mixing the two types can lead to problems, especially when the page is being viewed in different browsers. In my opinion it is best to use relative positioning, but don't just trust me try it out for yourself.

CSS layering with z-index

CSS operates in three dimensions, height, width and depth. In this lesson, we will learn how to let different elements become layers. This means we will be able to let elements overlap one another. To do that, you can assign each element a number using the CSS property z-index. The element with a higher number overlaps on top of an element with a lower number. Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card has got a z-index:



The CSS code in the  example above would result in something like this...

CSS layering with z-index
CSS layering with z-index

The method is relatively simple but the possibilities are numerous. You can place text over images or text above text etc. Try it yourself to create effects in headlines or banners.

Next Up

Our ten steps to learning CSS has come to an end but we have a treat in store will a selection of CSS resources just for you coming soon. (sign up to our newsletter to be first to hear about their release)

http://www.onlinedesignteacher.com/2016/03/css-positioning-and-layering.html

CSS Floating

CSS Floating
The basic principles of CSS floating are displayed in this simple diagram

Floating elements with CSS

Any HTML element or <div> block can be floated to the right or to left by using the property float. That is to say that the <div> block or element, including its contents, either floats to the right or to the left in a document (or another containing box). The content which follows will fill the gap left behind. Float can be set as either left, right or none. The following figure illustrates the general principle in a little more detail than the on above.

CSS Float
CSS float in action

If, for example, we would like to have text wrapping around a picture we could float the image to the left and the following content would fill the gap (thus wrapping around it). The result would be like this...

Floating elements with CSS
CSS float example

The HTML code for the example above, look as follows:



To get the picture floating to the left and the text to surround it, you only have to define the width of the box which surrounds the picture, so none of the image is cut off, and then set the property float to left:



Floats can also be used to create columns in a document. To create two columns, you simply have to structure the desired columns in the HTML code with <div> as follows.



Now the desired width of the columns is set to 50%, and then you simply float each column to the left by defining the property float. Try it out for yourself.




Clear (Stop filling after floating)

The clear property is used to control how the elements following floated elements in a document behave. By default, the subsequent elements are moved up to fill the available space which will be freed up when a box is floated to the side. The property clear can assume the values left, right, both or none. The principle is, if clear, is set to both for a box, the top margin border of this box will always be under the lower margin border for possible floating boxes coming from above. In other words, it won't fill the gap left behind.




To avoid the text from floating up to fill the gap and sit next to the picture, we can add the following CSS, Try it out for yourself.



Next Up

Floats are useful in many situations and will often be used together with positioning. In the next section we will take a closer look at how to position html elements using CSS. There are two main types of positioning, relative and absolute, both are explained.



CSS Padding, Borders and Margin

CSS Padding, Borders and Margin
CSS Padding, Borders and Margin

Margin and Padding:

Now let's look at how you can use your knowledge of the box model to change the presentation of elements by setting the margin and padding properties as shown in the above example.

An element has four sides: right, left, top and bottom. 
The margin is the distance from each side to the neighbouring element or the outer borders of the document. As the first example, we will look at how you define margins for the document itself i.e. for the element <body>. The illustration below shows how we want the margins in our pages to be.

CSS Margins
CSS Margins

The CSS code for the above page would look like this,




Or, like background and font, you could compile the CSS code using just margin. Margin recognises the values in the order top, right, bottom, left.



You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with <p>:



Padding can also be understood as 'filling'. This makes sense as padding does not directly affect the distance of the element to other elements but rather defines the inner distance between the border and the content of the element.

The usage of padding can be illustrated by looking at a simple example where all headlines have background colours. By defining padding for the headlines, you change how much filling there will be around the text in each headline. Try out the code below yourself and see what it looks like.



Borders

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages.

border-color

The width of borders is defined by the property border-width, which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels. The image below illustrates the system.

CSS Borders
CSS Borders

border-color

The property border-color defines which colour the border has. The values are the same as with the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow".


border-style

The property border-style defines which type of border the element has. There are numerous different types of borders to choose from. Below 8 different types of borders are demonstrated, all the examples are shown with the colour "gold" and the thickness "thick" but can be shown in other colours and thicknesses.

CSS Border Styles
CSS Border Styles

CSS Border Samples

Let's look at some sample CSS codes, try these out yourself to see how they look.




It is also possible to state special properties for the top, bottom, right or left borders. The following example shows you how:



As is the case with many other properties, you can compile many properties into one using border. Let us take a look at an example:



Can be compiled into:



Next Up

In the next lesson we will learn how to float html elements using CSS.



CSS Class and Id

CSS Class and Id with div and span
class and id work together with div and span to help you make the most of your CSS

This section on CSS actually focuses on the use of HTML attributes 'class' and 'id' and the HTML elements <div> and <span>. These are very important if you are to use CSS effectively as they hold the key to giving you complete control over every aspect of your website.

Class

Sometimes you want to apply a special style to a particular element or a particular group of elements and yet not every single element of that type! Confused? Don't be. Let's say that we have two lists of links to different grapes used for white wine and red wine. The HTML code could look like this:



What if we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue? To achieve this, we first need to divide the links into two categories using the HTML attribute 'class'.

So we assign a class to each link using the HTML attribute class. We use class instead of id as class is used for multiple or group effects while id is used for single or individual effects. Let us try to specify some HTML classes from the example above:





We can then define special properties for links belonging to white wine and red wine, respectively by using .classname after the element it was used on (in this case 'a') in the style sheet of the document.



The above CSS code combined with the HTML shown earlier will result in the following...

This is a normal link

Grapes for white wine:

Grapes for white wine:

Id

In addition to grouping elements with class, you might need to identify one unique element. This is done by using the attribute id. What is special about the attribute id is that there cannot be two elements in the same document with the same id. Each id has to be unique. Now, let us take a look at an example of a possible usage of id:



The above could be headings of any document split into chapters or paragraphs. It would be natural to assign an id to each chapter as follows:



Let us say that the headline for chapter 1.1 must be in red. As shown in the example below you must define the properties in a specific element by using #id in the stylesheet of the document.



The above CSS combined with the previous HTML would result in something like the following...

Chapter 1

Chapter 1.1

Chapter 2

Chapter 2.1


Div and Span

The HTML elements <span> and <div> are used to group and structure a document and are usually used together with the attributes class and id. The difference between div and span is that <span> is used within an element (inline) while <div> is used to group one or more elements (block-level).

Span

In My Honest Opinion, <span> is not the most useful of elements as it is only used inline so it is often easier to use basic HTML code to format the part of the element (usually text within a paragraph) that you want to edit. However, with my little rant over, let's look at an example of <span> in use. Let's take a famous Benjamin Franklin phrase.



Let's say we want what Mr Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with <span>. Each span is then added a class, which we can define in our style sheet:



In order to make those tagged words red then the CSS code would simply be...



The result would be....

Early to bed and early to rise makes a man healthy, wealthy and wise.

As mentioned earlier this is a bit long-winded for something that could have been done using the HTML <font color='red'>. Anyway not to worry, as you probably won't be using <span> too often. One element you definitely will be using though is <div>, so let's look at how it is used.

Div

As mentioned earlier while <span> is used within a block-level element, <div> is used to group one or more block-level elements. Aside from this difference, the grouping with <div> works in the same way. Let us take a look at an example with two lists of relatively recent U.S. presidents divided into their political affiliations:





And in our style sheet, we can utilize the grouping in the exact same way as above:



The above CSS code combined with the previous HTML would result in something like this...

  • John F. Kennedy
  • Lyndon B. Johnson
  • Jimmy Carter
  • Bill Clinton
  • Barack Obama

  • Richard Nixon
  • Gerald Ford
  • Ronald Reagan
  • George Bush
  • George W. Bush

These examples for <div> and <span> are very basic and are only intended to show you how to link the HTML elements with the associated CSS code. We will now look at the 'box model' which, when used with <div> and <span> and class and id, will really open up your design and layout possibilities with CSS.

Next Up

In the next lesson we look at the CSS Box Model which explains the details of how each HTML element is structures.



CSS Links

CSS LInks
CSS LInks

You can apply the CSS that you already learned to links in order to change their backgrounds, colours, fonts, text style, etc. What we will learn in this lesson is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link (hover). This makes it possible to add useful effects to help visitors navigate your website more easily. To control these effects you use what is called a CSS pseudo-class.

Links and pseudo-classes

A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. As you know, links are specified in HTML with <a> tags. We can therefore use 'a' as a selector for links in CSS. A basic example like the one seen below, simply changes the colour of all links to blue.



The css code above would result in something like this (provided the HTML is already in place)

This is a link

Unlike different elements, links can have different states. It can be visited or not visited. You can use pseudo-classes to assign different styles to links. Use a:link and a:visited for unvisited and visited links respectively. Links that are active have the pseudo-class a:active and a:hover is when the cursor is on the link. See the example CSS code below.



It is particularly popular to create different effects when the cursor is over a link. We will therefore look at a few extra examples related to the pseudo-class :hover.

CSS a:hover example 1:



When hovered over, the CSS code above will change your links from...

This is a link

to

This is a link

CSS a:hover example 2:



When hovered over, the CSS code above will change your links from...

This is a link

to

This is a link

The two CSS link a:hover examples give you an idea about the various possibilities for combining different properties. You should now try to create your own effects.

Next Up

In the next lesson we will learn the basics of using the HTML elements div and span along with the HTML attributes class and id to give you more control over editing your website with CSS.



CSS Fonts

There are so many fonts to choose from but choose carefully as they have a huge impact on your websites success

Formatting Fonts With CSS

In this lesson you will learn about fonts and how they are applied using CSS. We will also look at how to work around the issue that specific fonts chosen for a website can only be seen if the font is installed on the PC used to access the website. The following CSS properties will be explained...
  • font-family
  • font-style
  • font-variant
  • font-weight
  • font-size
  • font

font-family 

The property font-family is used to set a prioritized list of fonts to be used to display a given element such as <p> or <h1>. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found.
There are two types of names used to categorize fonts: family-names and generic families.


  • Family-name: Examples of a family-name (often known as "font") can e.g. be "Arial", "Agency", 'Verdana'.
  • Generic family: Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is Latin for 'without feet'.


The difference can also be illustrated like this...

CSS Fonts


When you list fonts for your web site, you should start with the most preferred font followed by some alternative fonts. It is recommended to complete the list with a generic font family so at least the page will be shown using a font of the same family if none of the specified fonts are available.An example of a prioritized list of fonts could is seen:



In the sample code above, text marked as paragraphs will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used. Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks.


font-style 

The property font-style defines the chosen font in normal, italic or oblique. The default setting is normal. In the example below, all headlines marked with <h2> will be shown in italics.




font-variant

The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Take a look at these examples:

If font-variant is set to small-caps and no small-caps font is available the browser will show the text in upper-case instead. In the example below all headings marked with <h1> will be shown in small-caps.




font-weight 

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. In the example below all text marked with <td> (table data) will be shown in bold text.




font-size

The size of a font is set by the property font-size. There are many different units to choose from to describe font sizes; we will focus on the most commonly used units. See the examples below.



There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit.


font (shorthand)

Using the font short hand property, just like background it is possible to cover all the different font properties in one single property. For example, imagine these four lines of code used to describe font-properties for <p>:



Using the short hand property, the code can be simplified:



Remember that one of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. CSS saves time and makes your life easier.


@font-family


With the @font-face rule, web designers do no longer have to use one of the "web-safe" fonts. In the new @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property.

Tip: Use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE!

Defining the font....

 

Implementing the font...

 

Try it out for yourself and see how much it can improve the design of your website.

Next Up

In the next lesson we learn about pseudo-classes and how to use them to create link effects using CSS.



CSS Text

CSS Text and CSS Fonts
This will be funny once you've learned about CSS Text and Fonts

Formatting Text With CSS

Formatting and adding style to text is a key issue for any web designer. In this lesson you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be explained:
  • text-indent
  • text-align
  • text-decoration
  • letter-spacing
  • text-transform

text-indent

The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with <p>:



The above CSS code will result in all paragraphs being effected like this in the browser...

This is a paragraph of text which has been indented. This is a paragraph of text which has been indented.


text-align

The CSS property text-align corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the left, to the right or centred or you can justify the text, which will stretch each line so that both the right and left margins are straight. In the examples below the text in table headings <th> is aligned to the right while the table data <td> are centred. In addition, normal text paragraphs are justified.




text-decoration

The property text-decoration makes it is possible to add different "decorations" to text.

For example, you can underline the text, have a line through or above the text.

In the following example, <h1> are underlined headlines, <h2> are headlines with a line above the text and <h3> are headlines with a line though the text.




letter-spacing

The spacing between text characters can be specified using the property letter-spacing. The value of the property is simply the desired width. For example, if you want a spacing of 3px between the letters in a text paragraph <p> and 6px between letters in headlines <h1> the code below could be used.




text-transform

The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. There are four possible values for text-transform...
  • Capitalize: Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".
  • Uppercase: Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE"
  • Lowercase: Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe"
  • None: No transformations - the text is presented as it appears in the HTML code.

As an example, we will use a list of names. The names are all marked with <li> (list-item). Let's say that we want names to be capitalized and headlines to be presented in uppercase letters.



The CSS Code above will result in this...

THIS IS AN UPPERCASE HEADING

  • This Is An Capitalised List Item
  • This Is An Capitalised List Item
  • This Is An Capitalised List Item
  • This Is An Capitalised List Item

Next Up




CSS Backgrounds

You can use CSS to add any type of background to a web page or web element
You can use CSS to add any type of background to a web page or web element

In this tutorial we will learn how to apply background colours to your website and parts of your website. We will also look at advanced methods to position and control background images. The following CSS properties will be explained, (note the American spelling of color and not colour is used in these codes).

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
  • background
  • gradient backgrounds

background-color

The color property describes the foreground colour of an element. For example, imagine that we want all headlines in a document to be red. The headlines are all marked with the HTML element <h1>. The code below sets the colour of <h1> elements to red.



Colours can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colours ("red") or (Red, Green, Blue) RGB-values (rgb(255,0,0)).

The background-color property describes the background colour of elements. The element <body> contains all the content of a HTML document so if we want to change the background colour of an entire page, the 'background-color' property should be applied to the <body> element. Note how the two words background and color are joined with a hyphen, this is the case with all CSS properties that are made up of two or three words, they must always be joined with a hyphen.

You can also apply background colours to other elements including headlines and text. In the examples below, different background colours are applied to <body> and <h1> elements.



Notice that we applied two properties to <h1> by dividing them by a semicolon. Just like with HTML, where we could add multiple attributes, we can also add multiple properties in CSS.

background-image

The CSS property background-image is used to insert a background image. To insert an image as a background image for a web page, simply apply the background-image property to <body> and specify the location of the image.



Notice how we specified the location of the image as url("images/sample.gif"). This means that the image is located in a subfolder called images. You can also refer to images on the Internet indicating the full address of the file: url("http://www.onlinedesignteacher.com/images/css.gif").


background-repeat

If you tried out the example code above, you would have noticed that by your image was automatically repeated both horizontally and vertically to cover the entire screen? The property background-repeat controls this default setting. Below the four different values for background-repeat are explained.

  • {background-repeat: repeat-x;} - The image is repeated horizontally
  • {background-repeat: repeat-y} - The image is repeated vertically
  • {background-repeat: repeat} - The image is repeated both horizontally and vertically
  • {background-repeat: no-repeat} - The image is not repeated

For example, to avoid repetition of a background image the code should look like this:




background-attachment

The property background-attachment specifies whether a background picture is fixed or scrolls along with the containing element. A fixed background image will not move with the text when a reader is scrolling the page, whereas an unlocked background image will scroll along with the text of the web page. Below the two different values for background-attachment are explained.


  • {Background-attachment: scroll;}  - The image scrolls with the page - unlocked 
  • {Background-attachment: fixed;} - The image is locked 


For example, the code below will fix the background image.




background-position


As you can see from testing these codes out, a background image will automatically be positioned in the top left corner of the screen. The property background-position allows you to change this setting and position the background image anywhere you like on the screen. There are different ways to set the values of background-position.

For example, the value '100px 200px' positions the background image 100px from the left side and 200px from the top of the browser window. The position can also be indicated as percentages of the width of the screen, fixed units such as pixels, centimetres, etc. or you can use the words top, bottom, center (not the American spelling), left and right. The image below, from www.html.net, shows how it works.

For example the code below positions the background image in the top right corner:



Shorthand CSS (background)

So far we have used many different properties related to the background of an element. In order to make things easier, and our code shorter we can compile the code using the property background which is short hand for all the properties listed so far. With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read.

For example, look at these five lines:



Using background the same result can be achieved in just one line of code:



The computer is able to recognise what property is needed based on the type of value that is used. For example #cccccc is obviously for background-color, just be sure to keep a space between each value you enter, no semi colon is needed until the last value is entered. So to apply this code to the body of a HTML page the code would be...




NOTE: If a property is left out, it will simply be set to its default value.

CSS Gradient Background:

The background attribute is also used to create gradient backgrounds. Unfortunately as gradient backgrounds are a relatively new addition to CSS they require slightly different code for each browser type to ensure they are fully cross browser compatible, and even then it is recommended to include a fall-back of a standard background colour as older browsers will not render the gradients.

The example below is for a top to bottom gradient from black to white on an element with the id 'linearbg', see the result below the code.




Next Up

In the next tutorial we will learn how to edit text using CSS.


Introduction To CSS

CSS is an acronym for Cascading Style Sheets
CSS is a style language that defines the layout of HTML documents. 

What is CSS?

CSS is an acronym for Cascading Style Sheets. It is a style language that defines the layout of HTML documents. CSS covers fonts, colours, margins, lines, height, width, background images, positioning an d many other things. HTML is often used to add layout to websites, but it is only intended to add content to pages and give the content basic formatting. As the Web gained popularity, designers started looking for possibilities to add layout to online documents. CSS was invented to remedy this situation by providing web designers with sophisticated layout opportunities supported by all browsers.

The benefits of CSS include... 

  • Control layout of many documents from one single style sheet. 
  • More precise control of layout. 
  • Apply different layout to different media-types (screen, print, etc.). 
  • Numerous advanced and sophisticated techniques. 

Many of the properties used in CSS are similar to those of HTML. So, if you are used to use HTML for layout, you will most likely recognize many of the codes. If you are not familiar with HTML I recommend you look at the section on HTML first. 

The CSS Syntax

Let's look at the CSS syntax...

The CSS Syntax
The CSS Syntax

A working example of this syntax is seen below; the example code would change the background colour of the web page to red. In this example CSS code below, body is the selector, background-color is the property and red is the value.




But where do you put the CSS code? There are 3 main options of how to implement the CSS in order for it to effect your HTML elements.

  • in-line CSS
  • internal CSS 
  • external CSS

*With all of these examples the CSS code is essentially the same code just located in a different place relative to the HTML that it is effecting.

In-Line CSS

The in-line method involves using the HTML attribute style. Using the above example with the red background colour again, with the in-line method would be applied like this:



This method is very simple but it would also require that every individual element is styled one at a time. With a large website this would be a mammoth task.

Internal CSS

The second method is the internal method. This method involves placing the style instructions for each web page in the 'head' section of that page and within the element 'style', sees the example below.



This method is again very simple but it would also require that every page is styled one at a time and with a large website this would still be a large task. 

External CSS (Recommended)

The third and recommended method is to link to a so-called external style sheet. Throughout this tutorial series we will use this method in all our CSS examples. An external style sheet is simply a text file saved with the extension .css and saved alongside the rest of your web pages.

What you must first do is create a link from the HTML document to the style sheet (in this case called style.css) by placing the code below into the head section of the HTML document.



Notice how the path to the style sheet is indicated using the attribute href. This link tells the browser that it should use the layout from the CSS file when displaying the HTML file. The key thing is that unlimited HTML documents can be linked to the same style sheet so one CSS file can be used to control the layout of many HTML documents, which saves you time, guarantees a consistent design across the website and allows you the opportunity to quickly and easily test different layouts and colour schemes for the website.

Unlike HTML, your CSS document does not have a set structure and will simply be a list of instructions to the connected web pages on how to layout the information within them. These instructions will all be 'read' simultaneously so it does not matter what order they are in. All you need to know now is the CSS attributes that will allow you to layout the pages. Let's remind ourselves of the CSS syntax again as all 'instructions' will use this structure.

The CSS Syntax
The CSS Syntax

Next Up

Now that we know the basics of CSS we have completed the first of our 10 steps to learning CSS. Over the next 9 steps we will learn all the main CSS properties and selectors. The first examples will be editing backgrounds using CSS.



close
Banner iklan disini