Posts

Showing posts with the label T-CSS

CSS

-
What is CSS? 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! HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look. What is the difference between CSS and HTML? HTML is used to structure content. CSS is used for formatting structured content. Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon. Back in the good old days when Madonna was a virgin and a guy called Tim Berners Lee invented the World Wide Web, the language HTML w
Post a Comment
Read more

CSS syntax

-
Image
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: body {background-color: #FF0000;} Applying CSS to an HTML document There are three ways you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external. Method 1: In-line (the attribute style) One way to apply CSS to HTML is by using the HTML attribute   style . Building on the above example with the red background color, it can be applied like this: <html> <head> <title>Example</title> </head> <body style="background-color: #FF0000;"> <p>This is a red page</p> </body> </html> Method 2: Internal (the tag style) Another way is to include the CSS co
Post a Comment
Read more

Place background image in CSS

-
Place background image [background-position] By default, a background image will be positioned in the top left corner of the screen. The property   background-position allows you to change this default and position the background image anywhere you like on the screen. There are numerous ways to set the values of   background-position .  However, all of them are formatted as a set of coordinates. 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 table below gives some examples. Value Description Example background-position: 2cm 2cm The image is positioned 2 cm from the left and 2 cm down the page Show example background-position: 50% 25% The image is centrally positioned and one fourth down the page Show example background-position: top right The image is positioned in the top-right corner of the page Show example The code example below positions the background im
Post a Comment
Read more

Compiling in CSS

-
Compiling [background] The property   background   is a short hand for all the background properties listed in this lesson. 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: background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Using   background   the same result can be achieved in just one line of code: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; The list of order is as follows: [background-color]   |   [background-image]   |   [background-repeat]   |   [background-attachment]   |   [background-position] If a property is left out, it will automatically be set to its default value. For example, if   background-attachment   and   background-position   are taken
Post a Comment
Read more

Lock background image in CSS

-
Lock background image [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. The table below outlines the two different values for   background-attachment . Click on the examples to see the difference between scroll and fixed. Value Description Example Background-attachment: scroll The image scrolls with the page - unlocked Show example Background-attachment: fixed The image is locked Show example For example, the code below will fix the background image. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
Post a Comment
Read more

Background images IN CSS

-
Background images [background-image] The CSS property   background-image   is used to insert a background image. As an example of a background image, we use the butterfly below. You can download the image so you can use it on your own computer (right click the image and choose "save image as"), or you can use another image as you see fit. the background-image property to   <body>   and specify the location of the image. body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
Post a Comment
Read more

Repeat background image in CSS

-
Repeat background image [background-repeat] In the example above, did you notice that by default the butterfly was repeated both horizontally and vertically to cover the entire screen? The property   background-repeat   controls this behaviour. The table below outlines the four different values for   background-repeat . Value Description Example background-repeat: repeat-x The image is repeated horizontally Show example background-repeat: repeat-y The image is repeated vertically Show example background-repeat: repeat The image is repeated both horizontally and vertically Show example background-repeat: no-repeat The image is not repeated Show example For example, to avoid repetition of a background image the code should look like this: body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; } h1 { color: #990000; background-color: #FC9804; }
Post a Comment
Read more

Foreground color in CSS

-
Foreground color: the 'color' property The   color   property describes the foreground color of an element. For example, imagine that we want all headlines in a document to be dark red. The headlines are all marked with the HTML element   <h1> . The code below sets the color of   <h1>   elements to red. h1 { color: #ff0000; }
Post a Comment
Read more

background-color in CSS

-
The 'background-color' property The   background-color   property describes the background color of elements. The element   <body>   contains all the content of an HTML document. Thus, to change the background color of an entire page, the background-color property should be applied to the   <body>   element. You can also apply background colors to other elements including headlines and text. In the example below, different background colors are applied to   <body>   and   <h1>   elements. body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Post a Comment
Read more

Font size in CSS

-
Font size [font-size] The size of a font is set by the property   font-size . There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include: h1 {font-size: 30px ;} h2 {font-size: 12pt ;} h3 {font-size: 120% ;} p {font-size: 1em; }
Post a Comment
Read more

Compiling IN CSS

-
Compiling [font] Using the   font   short hand property 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> : p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Using the short hand property, the code can be simplified: p { font: italic bold 30px arial, sans-serif; }
Post a Comment
Read more

Font variant IN CSS

-
Font variant [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. Confused?  If   font-variant   is set to   small-caps   and no small-caps font is available the browser will most likely show the text in uppercase instead. h1 {font-variant: small-caps;} h2 {font-variant: normal;}
Post a Comment
Read more

Font weight in CSS

-
Font weight [font-weight] The property   font-weight   describes how bold or "heavy" a font should be presented. A font can either be   normal   or   bold . Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font. p {font-family: arial, verdana, sans-serif;} td {font-family: arial, verdana, sans-serif;  font-weight: bold; }
Post a Comment
Read more

Font style in CSS

-
Font style [font-style] The property   font-style   defines the chosen font either in   normal ,   italic   or   oblique . In the example below, all headlines marked with   <h2>   will be shown in italics.  h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic; }
Post a Comment
Read more