ABOUT CSS
While there are other methods of stylizing your webpages, CSS (Cascading Style Sheets) are the most efficient when you want to apply styling to several pages. This allows your styling to be consistent throughout your pages. Changes are easy to update and implement since there is only one page to which you need to make changes.
CSS utilizes an external sheet that is linked to the HTML content that it seeks to stylize.
Each aspect of the element that you wish to change must be specified. This is called a Style Declaration.
Style Declarations follow a specific format. Each declaration must have a property and a value. A property is the element that you want to change, a value is the specific way in which you wish to change it. The Property is joined to the value with a colon : and the declaration is ended with a semi colon ;
Example Format: background-color: blue; the background color is the property and blue is the value you want to change it to. You can think of property like your own body and value as the blue , green , or red shirt you decide to wear.
Here's another example of a Style Declaration:
REMEMBER:
The "border-style" is the property that you want to change. "Solid" is what you want to change it to.Let's Learn Some More About How To Style Your Webpages!
You can choose Inline styling by using the 〈style〉 attribute in your HTML document or Internal styling by using a 〈style〉 element in the 〈head〉 section of your HTML document or you can choose the styling option we've been working on which is an External styling sheet, which will be called stylesheet.css and as we have previously learned, your external style sheet file will go in your css folder.
If you want to link your HTML document and your CSS external style sheet, this is how you do it:
The next step is to designate each element with a Class or an ID This will be within the opening and closing 〈body〉tags in your HTML document. A class will apply formatting to multiple elements, and an id will make changes to a single element. Let's look at this example:
After you have added classes and IDs to your HTML document, go to your external style sheet CSS page to apply the style formatting for the elements you want to change.
Now we will apply the Style Declarations we have already covered to Classes and IDs. Here is an example:
In your CSS stylesheet if you are using an ID you begin the declaration with a "#". If you are using a Class you must begin the declaration with a .
Example: ID= #mainBar { background-color:blue; } and this is how you would write for an ID:
Example: Your class of elements will be called mainBarGroup and you want the group of elements to have a solid background, with all fonts to have the size of 20px. This is how you would write the style declaration:
Each style declaration (with Property and Value) should go between an opening and closing curly braces { }