What Beginners Need To Know About CSS

CSS, also called Cascading Styles Sheets, is a method used to present HTML. HTML is usually the content while the style sheet is the presentation of that particular document.

Applying CSS

There are three main ways to apply CSS to present HTML: inline, internal and external.

Inline

While using the inline style to present HTML, styles are plonked in a straight manner to the HTML tags using the style attribute. They may look like

                        <P style= color: red” >text</

                        p>

When that is done, the particular paragraph will be in entire red. However, the best practice is that the HTML should be a stand-alone presentation free document therefore in-line styles should be avoided as much as possible.

Internal

Internal styles, also called embedded, are used for an entire page. In the head element, the style tags surround all styles for the page. However, is it usually preferable to keep the HTML and the CSS files separately.

            <! DOCTYPE HTML>

            <html>

            <head>

            <title> CSS Example< /title>

            <style>

 

            P {

                        Color: red;

            }

            a {

                        color: blue

   </style>

When this is done, all the paragraphs in the page will be red and the links will be blie.

 

External

This styles are used for the whole, multiple-page website. There is a separate CSS file

            p {

                        Color: red

            }

            A {

                        Color: blue

            }

If the above file is saved as “atyle.css” in the same directory as HTML page, it can be linked in the HTML as:

            <!DOCTYPE HTML>

            <html>

            <head>

                        <title> CSS Example< /title>

                        < link rel=” stylesheet”

            Href=” style.css>

 

Application

Since this is a css tutorial, it would be advisable to try coding as you read each point. So let us go together, start a new file with your text editor and save the blank document as “style.css” in the same directory as your HTML file. Then change the file so that it looks similar to this one:

            <!DOCTYPE HTML>

            <html>

            <head>

                        <title> My first web page< /

     title>

                        < link rel=” stylesheet”

            Href=” style.css>

 

Save the HTML file. By doing this, you will have linked it with the CSS file which is currently empty so no changes are needed so far. As you go on, you will be able to add to and change the CSS file and see the results by refreshing the browser window that has the HTML file in it, just like we previously done.

 

Selectors, Properties and values

Unlike HTML which has tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. In this CSS tutorial, a lot of emphasis will be made on HTML selectors. HTML selectors are HTML tags. They are used to change the style of a specific type of document.

Each selector has properties in curly brackets. They normally take the form of words like color, font-weight or background color. A value is given to the property that follows a colon. Semi-colons are used to separate the properties.

            Body [

                        Font-size: 14px

                        Color: navy

            }

 

This applies the given values to the font and color properties to the body selctor. TThis means that when it is applied to an HTML document, text between body tags will be in 14 pixels in size and navy in color. The body tags are basically the context of the whole window.

 

Lengths and Percentages

There are many property-specific units for values used in CSS. However, there are general units which are used by some properties and since this is a CSS tutorial, we should familiarize with them.

  • px (such as font size: 12px) is the unit for pixels.
  • em (like font size: 2em) is the unit for the calculated size of a font. 2em will therefore mean two times the current font size.
  • pt (like font size:12pt) is used for points, for measurements typically in printed media.
  • % (like width: 80%) is the unit for percentages.

 

Other units are:

  • pc- picas
  • cm-centimeters
  • mm-millimeters
  • in-inches

 

When a value is zero, it is not stated as a unit e.g. if you want to tell that no border is needed, it is border: 0.

< does not necessarily mean pixels which are the little squares that make up a computer’s display. Modern browsers allow zooming in and out of pages so that even if specification of the font size: 12px or height: 200px is needed, they will increase with the user’s preference. Font size:12px and height: 200px are the genuine specified size on a non-zoomed browser.

CSS is a method used to present HTML. There are three main ways of coding HTML: inline, internal and external. Internal and inline styles of presentation only represent parts therefore external is the most recommended one.

 

CSS is a vital method used together with html in making of website. It adds spice to HTML. Every HTML learner needs to know how to use HTML when coding.