Connect with us

CSS Basic Tutorial – part 1


CSS Basic Tutorial – part 1

CSS Introduction

If you are looking for CSS introduction tutorial and basic CSS beginner tutorials, this is the place where you will get not only basic CSS tutorial but advanced CSS tutorials also. Our free introduction to CSS with CSS examples will give you best CSS layouts tutorials, Dreamweaver CSS tutorials, CSS menu tutorials, Joomla CSS, PSD to CSS and much more. But let’s have a CSS Basics Introduction.

What is CSS?

Cascading Style Sheet, popularly known as CSS allows you to format the layout of Web pages. Cascade means ‘interface’ and SS means ‘style sheet language’ used to describe the look and formatting of a document written in a markup language. It specifies code for formatting, both the layout and style, within a text file. It allows for separation of document content written in HTML/XHTML or a similar markup language from document presentation, including elements such as the layout, colors, and fonts. It improves content accessibility, usability, provides more flexibility and control of document presentation, enables multiple pages to share formatting, and makes websites easy to handle.

Before you apply CSS, the content to which it will apply must exist. In the basic syntax of CSS, the first part of a line of code is called the selector and this defines what HTML element is to be formatted. The second part of the code is made up of declarations which state the property and corresponding value of the HTML element. However, your website’s HTML files with appropriate tags, must already exist.

What Can You Do with CSS?

  • use the style element to control the look and feel of a website
  • link to separate style sheets
  • set page margins
  • set left and right and first-line indents
  • set the amount of whitespace above and below
  • set the font type, style and size
  • add borders and backgrounds
  • set colors with named or numeric values

Now when you have got the basic introduction of CSS, you will be able to learn a lot of new CSS topics.

Advantages of Using CSS

Learn CSS and control your web pages better. CSS helps you to specify exactly the font size, color, weight and where an element should be placed on the page. CSS can also save a lot of time, especially for maintaining a large site. Also, the World Wide Web Consortium (W3C) strongly recommends that web developers to use CSS tags as much as possible.

Moreover, CSS is the ultimate solution for fast loading of a website. CSS removes all of the style and layout tags from the html. It helps you to define and apply styles, color etc to all the pages of a website by calling just a single file. It naturally reduces the page size significantly. The CSS file is downloaded just once by the visitor’s browser and re-used for different pages on a web site. This reduces the bandwidth requirements for your server and also ensures a faster download for your visitors.

These are the reasons, why you need to know CSS advantages. This will help you concentrate better to learn from our CSS beginner tutorial, basic CSS Style sheets startup basic CSS tutorials and advanced CSS tutorials. Our free CSS tutorials with simplest of CSS examples about CSS layouts tutorials, Dreamweaver CSS tutorials, CSS menu tutorials, Joomla CSS, PSD to CSS will help you learn it, use it and take all the below given advantages:

  • Separate content from presentation
  • SEO Friendly
  • Fast loading pages
  • Small file size
  • Reduce clutter
  • Create attractive user interface with JavaScript
  • Enhance Accessibility and usability
  • Save time, Save money
  • Flexibility of design
  • Multiple media friendly like print, screen, projection, TV, etc.

Now you know the advantages of using CSS in your web pages.

CSS Selectors

Stylesheets comprise of rules, which are composed of selectors, which define how styles should be applied. Here you can learn applying multiple CSS class selectors. This will also help you in understanding advanced CSS selectors. A Selector represents a structure, which generally is a condition set to define which elements a selector matches in the document tree. You can also change body background image using CSS selector. Further, this tutorial will touch upon topics such as CSS pseduo element selectors first, css selector tables, first child pseudo css selector and much more.

Table of Contents

The selector includes majorly three types of CSS selectors like:

  • Type Selectors
  • Class Selectors
  • ID Selectors

Type Selectors

A CSS type selector(tag name) names the HTML Tag to style. To use a type selector, simply write the HTML Tag name that you want you to be styled. Similarly, the p selector selects every paragraph that is every element marked up as <p>…</p>. These are the most straightforward of all the CSS selectors, and we’ve already dealt with them quite a bit in the introduction, so we’re not going to labour the point here to style all paragraph (P) tags, you would write: The most common and easy to understand selectors are type selectors.

Type selector has a very simple form; it is just the tag that you can use to mark up an element on an HTML page. Any HTML element can be used in this way.

“body selects the <body> element”, “li selects any elements marked up as <li>…</li>” etc.

  1. h1
  2. {
  3.     Property:Value;
  4. }

Class Selectors

A CSS class selector(.) applies to many elements at once, or a sub-set of specific HTML elements. To use them, you need to edit your HTML to define the classes on the HTML elements you want to be styled. Then you define the style in your style sheet.

A class attribute value is not required to be unique; the same class name within an XHTML document may be used multiple times. If we only need tag specific CSS syntax then our first example is not necessary, but when we want a general classification that can be used for multiple elements.

  1. .ClassName
  2. {
  3.     Property:Value;
  4. }

HTML Example: “<div class=”ClassName”>……</div>”

ID Selectors

A CSS ID selector(#) applies to the one element in the HTMLdocument with the specified ID. Just like the class selector, the id selector is defined in the HTML. But unlike classes, each ID must be unique on the page. Theoretically, if you use the ID selector more than once on a page, the subsequent ones should be ignored by the web browser. However, this is not always the case. It is very difficult to rely on the predictability of web browsers. Therefore, when you choose to use the ID selector, be careful to use it only once.

  1. #ClassName
  2. {
  3.     Property:Value;
  4. }

HTML Example: “<div id=”ClassName”>……</div>”

Internal CSS

Internal CSS style sheets are styles that are placed in the <head> of the HTML document. These styles affect only the document they are in, and cannot be referenced by any other Web document.

CSS internal style sheet should be used when a single document has a unique style. If you are working on a large site and need to test internal styles before you load them on the site. CSS internal style can be a great tool for setting CSS internal padding, CSS internal border etc. They allow you to test the styles in the context of the entire site without breaking any page but the one you are testing.

Moreover, internal style sheets take advantage of classes, IDs, siblings, and other element relationships. This is especially useful when you’re working with things like email or kiosks where you have only one HTML file available to edit. If an internal style sheet is placed after the link to external styles, they will have a higher precedence in the cascade, and over-ride the external style sheet. Unlike its cousin, the external style sheet, the internal style sheet code is placed directly into the page it affects; therefore, it requires no additional files. Take advantage of this web styling tool.

You can write a CSS internal style sheet in the below mentioned way:

  1. <head>
  2. <style type=”text/css”>
  3. .YourClass
  4. {
  5.     Property:Value;
  6. }
  7. </style>
  8. </head>

Advantages of Internal CSS

  • They only affect only the page they are on
  • They can use classes and IDs
  • They don’t require multiple file upload
  • They have higher precedence than external style sheets.

Hopefully, CSS internal style sheet is clear to you. If you have any doubts you can always mail us your queries. Now be ready to know more about other CSS style sheets as well in our next chapter.

External CSS

External CSS is really a useful thing in CSS tutorial. It is vital to know when is it appropriate to use external CSS. CSS external style sheet allows you to control CSS external font, CSS external background image and a lot more. By linking to external CSS files, it’s possible to control the look and feel of multiply WebPages by making changes to one style sheet.

An external style sheet is simply a text file containing a list of CSS rules sets. Creating CSS external is also not a tough task. The file is saved with a .css extension and saved to any directory that can be accessed by the web pages using it. Unlike embedded style sheets, the CSS rule sets do not have to be wrapped in the <style>…</style> tags. The link element can be used to specify that a web page should use an external style sheet. The link element only requires a start tag <link> and is inserted in between the <head>…</head> tags of your web page. A CSS external example is given below to give a better idea:

  1. <head>
  2. <link href=”URL.css” rel=”stylesheet” type=”text/css” />
  3. </head>

Importing an external stylesheet works much the same as linking. Firstly make your text .css file and simply call it with @import syntax.

  1. <head>
  2. <style type=”text/css”>
  3. @import url(“URL.css”);
  4. </style>
  5. </head>

You can add multiple .css files into one file, just by adding a @import url(“URL.css”); in the one common .css file. But keep remember that this method doesn’t support all browsers, specially older versions.

Advantages of External CSS

External style sheets have many advantages of external CSS over embedded CSS:

  • It keeps your website design and content separate.
  • It’s much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the “link” tag.
  • You can make drastic changes to your web pages with just a few changes in a single CSS file.
  • It allows a single style sheet to control the rendering of multiple documents. This results in a time-savings for the author, a savings of space for the web server, and less download time for the user.
  • This method can be used in HTML, XHTML and HTML5.

In our chapters ahead we will discuss many topics such as CSS embedded external inline pros and cons, CSS embedded external inline comparisons and much more.

Inline CSS

As opposed to a linked style sheet or embedded style sheet, an inline CSS is included within an HTML document. CSS inline is directly associated with a particular element, and the appearance of the document cannot easily be changed. CSS inline style allows you to do CSS inline block, CSS inline list, CSS inline hover, CSS Color, Font, Text and much more. Now days, there are many Inline CSS editors available which are really easy to handle and are best suited for learning inline CSS style.

Using inline CSS style, the presentation of the document can be separated into the <head> tag, and HTML can be used more appropriately for the document’s structure. Using an inline style sheet at the beginning of the document allows the style and rendering to be modified without changing the HTML. On the other hand, using a linked style sheet can be more efficient for a set of pages, because a linked style can be defined through a single file.

An inline style in CSS loses many of the advantages of style sheets by mixing content with presentation. Our CSS learners are advised to use them sparingly. To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property.

  1. <div style=“color:#0033cc; font-size:14px;”>Your Text</div>

Advantages of Inline CSS

Inline style sheets are best suited to scripting that creates animation effects, where there is a need to apply certain styles. There are plenty of benefits of using inline CSS, they are:

  • They have the highest precedence. So if you can’t change the external style file, use this to override them all.
  • They can be quickly applied
  • There is no need of an additional file that has to be created

NOTE: But there are some limitations as well like you can’t set the a:hover property while using inline css.

In our next chapters we will elaborate on many topics such as inline list style CSS property, CSS block versus inline, CSS display block vs. inline image layout tricks and much more.

Continue Reading
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

More in solution

    About Me:

    Szabi Kisded

    Hey there, I'm Szabi. At 30 years old, I quit my IT job and started my own business and became a full time WordPress plugin developer, blogger and stay-at-home dad. Here I'm documenting my journey earning an online (semi)passive income. Read more

    Sign up for my newsletter and get the YouTube Caption Scraper WordPress plugin for free
    (worth 29$)!

    All My Plugins In A Bundle:

    My AutoBlogging Plugins:

    My Online Courses:

    A Theme I Recommend:

    Featured Posts:

    To Top