This section will only be helpful if you know the basic understanding of HTML.
What is CSS?
CSS (Cascading Style Sheets) is the standard way of presenting and formatting a web page. The middle word, Style, basically describes its purpose. Think of CSS as a theme, kind of like a theme applied to your computer, phone, a blog or even your email. CSS will provide the look and feel of that theme, and that theme being applied to your web page. CSS is mostly applied to HTML and XHTML written pages, it can also be used to style XML formatted pages.
Types of CSS Application
CSS can be applied to a page in several ways. There are three main applications or types of CSS implementation, each type works the same way. The difference is how it’s applied to the pages. The style can be embedded into the HMTL code itself or it can be written in a separate document and attached to the HTML page. Each type has a different priority, meaning one style can override another style. Below are the three main types of CSS application, they are listed in priority.
Inline Style: used inside the HTML code, applied to a specific tag or element, it’s applied using the “style” attribute
Embedded Style: used inside the HTML code-normally in the header, usually a block of CSS styles to be applied to that page only
External Style: blocks of CSS written in a separate document (.css file), attached to the HTML page, it can be attached to multiple pages
There is also another form of style that we cannot see but is used. That is the ‘User’ type. Generally this style is implemented by the web browser with default settings. It has the lowest priority. Every browser will have their own set of default settings, the settings will vary by browser and browser version.
Syntax
No matter what type of application you use, Inline, Embedded or External, the syntax will be the same. CSS comes with many properties that cover just about anything needed to style a web page. The styling is made up of two main parts, the selector and the declaration.
In the declaration, it will have properties and values. A list of CSS properties can be found at the W3Schools.com website.
The property and value are separated by a colon “:” and each declaration, or set of properties, is separated by a semicolon “;”.
Application of CSS
A specific style can be applied several different ways. Below are the three main types of CSS application.
Element: You can apply a style to HTML elements like paragraphs, headers, divs, and tables. Here is an example of style applied to a paragraph element using an embedded, external and inline type of application.
p {color:red;font-size:12px;}
This will apply a red font color and font size of 12px to any <p> tags in the html document. (embedded or external style)
<p style="color:red;font-size:12px;">
This will apply a red font color and font size of 12px also, using the “style” attribute, but only to this particular paragraph. (inline style)
ID Selector: You can apply a style to a unique element using the ID attribute. The name of the ID can be whatever you like. You can set the style using the embedded or external type of application. You apply the style to the element using the “id” attribute. Here is an example of how to style using the ID Selector either embedded or from an external style sheet.
#mystyle {
color:blue;
text-align:center;}
The ID selector is defined by a “#”. Any ID that you create will need to have “#” to define it as an ID.
Here is how to apply it to a unique element.
<div class="mystyle">
This applies the style of “mystyle” to this particular div, it will make the text blue and align it to center.
Class Selector: You can apply a style to multiple elements, as many as you like, using the Class attribute. The name of the Class can be whatever you like. You can set the style using the embedded or external type of application. You apply the style to the element using the “class” attribute. Here is an example of how to style using the Class Selector either embedded or from an external style sheet.
.redstyle{
color:red;
font-size:13px;}
The Class Selector is defined by a “.”. Any Class that you create will need to have “.” to define it as a Class.
Here is how to apply it to multiple elements.
<p class="redstyle">My Text</p>
<h1 class="redstyle">My Text</h1>
