Skip to main content

Posts

Showing posts with the label css

Lesson 11: Borders css

Lesson 11: 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-width border-color border-style border The width of borders [border-width]

Lesson 10: Margin and padding css

Lesson 10: Margin and padding In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the  margin  and  padding properties. Set the margin in an element Set the padding in an element Set the margin in an element An element has four sides: right, left, top and bottom. The  margin  is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in  lesson 9  for an illustration.

Lesson 9: The box model css

Lesson 9: The box model The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed: The box model in CSS

Lesson 6: Links css

Lesson 6: Links You can apply what you already learned in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing 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. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo-classes. What is a pseudo-class? A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. Let's look at an example. As you know, links are specified in HTML with  <a>  tags. We can therefore use  a  as a selector in CSS

Lesson 5: Text css

Lesson 5: Text 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 described: text-indent text-align text-decoration letter-spacing text-transform Text indention [text-indent]

Lesson 4: Fonts css

Lesson 4: Fonts 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 described: font-family font-style font-variant font-weight font-size font Font family [font-family]

Lesson 3: Colors and backgrounds css

Lesson 3: Colors and backgrounds In this lesson you will learn how to apply colors and background colors to your websites. We will also look at advanced methods to position and control background images. The following CSS properties will be explained: color background-color background-image background-repeat background-attachment background-position background

Lesson 2: How does CSS work?

Lesson 2: How does CSS work? In this lesson you will learn how to make your first style sheet. You will get to know about the basic CSS model and which codes are necessary to use CSS in an HTML document. Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely recognize many of the codes. Let us look at a concrete example. The basic CSS syntax Let's say we want a nice red color as the background of a webpage: Using  HTML  we could have done it like this: <body bgcolor="#FF0000"> With  CSS  the same result can be achieved like this:

Lesson 1: What is CSS ?

Lesson 1: What is CSS? Maybe you already heard about CSS without really knowing what it is. In this lesson you will learn more about what CSS is and what it can do for you. CSS is an acronym for  C ascading  S tyle  S heets. What can I do with CSS? CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images, advanced positions and many other things. Just wait and see!

Introduction - Free CSS Tutorial

Introduction - Free CSS Tutorial Cascading Style Sheets (CSS) is a fantastic tool to add layout to your websites. It can save you a lot of time and it enables you to design websites in a completely new way. CSS is a must for anyone working with web design. This tutorial will get you started with CSS in just a few hours. It is easy to understand and it will teach you all the sophisticated techniques. Learning CSS is fun. As you go along through the tutorial, remember to take enough time to properly experiment with what you learn in each lesson. Using CSS  requires basic experience with HTML . If you are not familiar with HTML, please start with  our HTML tutorial  before moving on to CSS. Which software do I need?