The Syntax.. 5
Comments. 5
CSS Selector.. 5
The Element Selector. 6
The id Selector. 6
The Class Selector. 6
The Group Selector. 6
Inserting a Style Sheet.. 7
External Style Sheet. 7
Internal Style Sheet. 7
Inline Styling. 7
Cascading and Inheritance. 7
Background Styles. 8
Background Colour. 8
Background Image. 8
Text Styling.. 8
Text Colour. 8
Text Alignment. 8
Text Decoration. 9
Text Transformation. 9
Indentation. 9
Font Styling.. 9
Font Families. 9
Font Style. 9
Font Size. 10
List Styling.. 10
Link Styling.. 11
Table Styling.. 11
The Box Model. 12
Border Styling.. 12
Outline Styling.. 13
Margin Styling.. 13
Padding Styling.. 13
Dimension.. 13
Display.. 13
Max-Width vs Width.. 14
Position Styling.. 15
Static. 15
Relative. 15
Fixed. 15
Absolute. 15
Overlapping Elements. 16
Float and Clear.. 16
Inline-Block.. 17
Alignment.. 17
Center Aligning. 17
Right and Left Alignment. 18
Combinators. 18
Descendant Selector. 18
Child Selector. 19
Adjacent Child Selector. 19
General Child Selector. 19
Pseudo-Classes. 20
Anchor Pseudo-Classes with URLs. 20
First Child Pseudo-Class. 20
Pseudo-Elements. 21
Navigation Bars. 23
Vertical Navigation Bar. 23
Horizontal Navigation Bar. 23
Image Transparency.. 24
Image Sprites. 24
Media Types. 24
[Attribute] Selectors. 25
Attribute Selector. 25
[Attribute=Value] Selector. 25
[attribute~=”value”] Selector. 25
[attribute|=”value”] Selector. 26
[attribute*=”value”] Selector. 26
[attribute^=”value”] Selector. 26
[attribute$=”value”] Selector. 27
Other Selectors. 28
What is CSS?
CSS is a language used for describing the look and formatting of a document written in a markup language. CSS stands for Cascading Style Sheets, CSS is essentially a language used to specify how HTML elements should be displayed on a webpage. Styles were implemented with HTML 4.0. CSS was created as it was a nightmare to style using HTML only, as it would take up a lot of time and work to individually style each element. But with CSS, you are able to style multiple elements at once with ease as CSS saves up a lot of time and work. Note that external style sheets are stored in CSS files, meaning they must be saved using the .css extension.
In this example, the CSS states that everything in the <body> tag will have a font size of 21 pixels, and the colour of the text will be green
Comments
Comments in CSS are defined used the following syntax. Like in other programming languages any comments will be completely ignored by the browser, and will not be taken into consideration when displaying the webpage but they can inflate file sizes and effect performance.
CSS Selector
CSS Selectors allow you to select the certain tags in which you want to manipulate their visual appearance. This can be done based on their id, class, group, and more.
The Element Selector
This type of selector selects all the elements based on their name. If a style for the <p> tag was made, then that style would apply to all <p> tags throughout the document. The following is an example in which the <p> tag is the selector, and all <p> tags will be styled with the text being aligned to the right, and their colour changed to orange.
The id Selector
The id selector uses the id attribute to select a specific individual element to be styled. Rather than having all paragraphs styled, you can select just one specific paragraph to be styled individually. Properly structured webpages should a unique name for any id attributes.
The Class Selector
This selector is very similar to the id selector, but instead you identify the class attribute of the element. The selector is stated as a period, then the class name you specify.
The Group Selector
If there happens to be many different elements that have the same styles, you can select them all in a group, instead of selecting then individually. You can group the elements into one by separating each element with a comma.
Inserting a Style Sheet
There are three different ways to insert a style sheet into your HTML document
External Style Sheet
By editing one css file, you can change the look of your webpage by just editing one file. The file being linked must have the file extension .css and must be defined in the <link> tag in the <head> tag. Note that you can create a CSS file in any text editor, and this file should not contain any HTML tag within it.
Internal Style Sheet
An internal style sheet can also be used, and will be the way we show you how to style. By doing this, you have to state all your styles in between the <style> and </style> tags which should be in the <head> tag at the start of your HTML document.
Inline Styling
The last type of styling is called inline styling; this styling is done by using the style attribute after the opening element tag. This makes it so that one tag only get the styling applied, but note that is also possible with the use of an internal style sheet.
Cascading and Inheritance
When you specify a style for a parent element that style will flow down into its children so a div tag inside of the body tag which you specified to have a red font will flow downwards, this is known as inheritance. When using multiple styles priority is given to where that style is set the highest priority is given to an inline style, internal style sheet, external style sheet and browser defaults which will give a style if none are given. There are other things to consider as well when using a CSS, the way we use the selectors also carry weight an inline style has more because it’s specific but when using sheets either external or inline weight is given to a selector calling on an ID, then a class and last the element itself. Keep in mind that these can be combined so the more specific a style is for an element the more weight in generally carries. One last thing to consider is applying the !important property, this will increase the value of a particular style within a selector.
Background Styles
Background Colour
The background colour can be changed using the background-colour property to change the background of a particular element. The colour can be changed in three different ways, and this applies to all styles that change the elements colour:
Background Image
Using the background-image property, you are able to define an image to be used as a background. The image by default will be repeated across the screen as tiles. Also by default, the image gets repeated vertically and horizontally to cover the entire page, like tiles on a floor. If you want to repeat the image horizontally or vertically, you use the property background-repeat: repeat-x or y. You use x for horizontal, and y for vertical. If you want the background image to only be shown once, use background-repeat:no-repeat. If you want to position an image relative to the corners of the screen, use background-position: right top. Other positional words include left, center, and bottom. To shorten the code, you can state all properties by using just the background shorthand property. You have to state all values in order of colour, image, repeat, and position.
Text Styling
Text Colour
To edit the colour of text, use the color property to change text into any colour. Note that the value of colour can be in three different formats:
- Regular colour name “blue”
- RGB value “rgb(0,50,255)”
- HEX value “FF00FF”
Text Alignment
To set the alignment of test, use the text-align property. The value of the property can be center, to align centrally, right to align the text to the ride side of the page, left to align to the left (default), or justify to make each line stretch so that all lines have the same width like in newspapers and magazines.
Text Decoration
Use the property text-decoration to make any changes to the decorations on text. Use text-decoration: none to get rid of any that are default (ex. Remove the underline of a link). This property can also be used to decorate text as well, you can change the value to overline, to add a line above the text, line-through to put a line through a piece of text, and underline to put a line under the desired text.
Text Transformation
To specify if a piece of text should be uppercase, lowercase, or capitalize the first letter of each word, use the text-transform property. The following values can be used: uppercase, lowercase, and capitalize.
Indentation
To indent, use the text-indent property with the value being any number with px (pixels) at the end.
Font Styling
Font Families
A font family is defined using the font-family property. Font families are used to set up backup fonts in case a browser doesn’t support your desired font. Font families are set up in an order that goes like this: Desired font, Backup font, Font family (serif or sans-serif). If you are setting up a font in which its name has spaces, you must put it inside quotation marks (ex. “Times New Roman”).
Font Style
To style your font normally or italicized, use the font-style property. The value of the property could be normal, italic, or oblique. Oblique is the same as italic, but is less supported by browsers.
Font Size
To size the font of the text, use font-size. The value of the font-size can either be an absolute size, or a relative size. An absolute size sets the text to a specific size, and does not let the user change the text size in all browsers. Relative size sets the size of the font relative to its surrounding elements, and it allows the user to change the text size in the browser. You can set the font size in three different ways, in pixels, in em, and in percentages. If you set the size in pixels, the declaration would look like this, font-size: 25px. If you set it in em, the declaration would look like this, font-size: 1.87em. Note that 1 em = 16 pixels, the formula for size in em is pixels/16 = __ em. Lastly, you can represent the size value as a percent. Specifying the font-size as a percent and em displays the same size in all major browsers.
List Styling
The property for changing the style of a list is list-style-type. Two possible values to change the item marker in an unordered list are circle or square. You can specify several different style types for ordered lists, using different types of numbering or alphabetical types. To make the item marker into an image, you use the property list-style-image, with the value to the property being url(“FileNameHere.jpg”). 
Link Styling
Links can be styled depending on their four different states, link (unvisited), visited, hover, and selected. The following example changes the colour of their four different states. Note that the order of the styles laid out should be link, visited, hover, and active (from top to bottom).
The text-decoration property is usually used to remove underlines from links displayed on the page. The background-color property can also be used to add a background for the different states.
Table Styling
By using the border property, you are able to edit how thick you want the border to be or what colour. Due to the default border having two borders for each table and, <td> and <th> tags, you are able to collapse the borders into one whole border by using the border-collapse property, with the value being collapse.
The width and height can be adjusted used the width and height properties, which can have a value of a number of pixels, or as a percentage of the browser window. By default, the text in 
<th> tag will be centered, to align to the left of the cell, we use the following declaration: text-align: left. In <td> and <th> tags, the text by default will be vertically aligned to the middle, to fix this, we use the following declaration to align the text to the top of the box, vertical-align: top. To add padding between the border and the content, we use the property padding and it value can be a number measured in pixels. By using the property background-color, you can change the background of that particular cell.
The Box Model
HTML elements can be considered as individual boxes. The box model is used to explain the design and layout of that element will have on a webpage. The box consists of margins, borders, padding, and the content itself. The following diagram demonstrates how a box model is displayed:
Example:Content is where the HTML content will appear, it is the center of the box. Padding is an area that goes around the content and is invisible on the webpage. Border is what is displayed and goes around the padding and content. Margin is similar to the padding, but goes around the border and separates itself from other elements, and is invisible on the webpage when displayed.
If you wanted to set up <p> tag to have a total width of 400px, the following is an example of how you would code it using the box model.
You have to take into consideration on how much width you want your content to be, for the sake of this example, suppose you want your content to be 350px, meaning you have 50 pixels to distribute among the border, margin, and padding. Note that the value you define as border, padding, and margins are the value for one side of the box. To check if you got the correct width, you add your width of 350px + 20px (left and right borders combined) + 10px (left and right border) + 20px (left and right margins) = 400px if done correctly.
Border Styling
By using the border-style property, you are able to identify the type of border you are going to use. The following is an example of a few you can try to use as the value to the property, none, dotted, solid, double, groove, ridge, inset, and outset. You can also style the thickness of the border by using the border-width property. Colour styling is also possible by using the border-color property. It is also possible to style each side individually by using the border-top-style property. You can do this for top, bottom, left, and right.
Outline Styling
Outlining is drawn around elements outside of its border; the outline does not impact the element’s dimensions. You can style the colour by using the outline-color property. You are able to define what type of outline you want (dotted, dashed, etc.) by using the outline-style property. You can also set the width of the outline itself by using the outline-width property.
Margin Styling
The margin is used to specify, a space around an element. Margins are defined using the margin-top, margin-bottom, margin-right and margin-left. Their values can be a value in pixels, it can be a percentage of the width of the containing element, or you can set it as auto and the browser will calculate a margin. By just stating margin, you can set the margin to be the same value for all four sides.
Padding Styling
Padding is an area that goes around your content and separates the border and content. Paddings are defined using the padding-top, padding-bottom, padding-right, and padding-left.
Dimension
The dimension properties allow you to manage the height and width of an element. The following properties allow you to set a height, maximum, and minimum height, the same applies for the width. The possible properties are the following: height, max-height, min-height, width, width-height, and width-height. The value of all these properties can be a length in pixels, a percentage, or set it to auto and the browser will then set the height/width.
Display
With using the display property, you are able to manipulate inline and block elements. An example of using this property is to make a horizontal list by turning the <li> tag from a block-level element into an inline element.
As a block element:
As an inline element:
You are also able to set the value of display to none to hide something from appearing on 
the page, as if it’s not even there in the code.
Max-Width vs Width
By specifying the width of a block-level element, the width will contain it from stretching out to the edges of the page. By also specifying the margin to be auto, it will horizontally center it. But if you were to make the browser window smaller, the width will always be the same as stated, and will make a horizontal scroll bar to appear to view the content. If you use max-width instead of width, the results are a lot different; the width of the box will decrease to accommodate the smaller size of the window, making it easier to handle on smaller devices that are used for viewing this content.
Position Styling
Position styling defines how an element should be positioned
Static
By default, HTML elements are always placed as static. Static elements are not affected by the top, right, left, and bottom properties. These elements are not positioned in a special way.
Relative
Using the relative value will cause the element to be positioned relative to its normal location. Using the top, left, bottom, and right properties will move the image away from its normal location.
Fixed
With using the value fixed, the element will be placed in a fixed location, meaning it will not be moved from that position, regardless of the page being scrolled. The top, right, left, and bottom properties are used to position the element on the page. Note that a fixed element will not leave a gap in the page where it would normally be. The following example will place the contents inside the <div> tag into the bottom left corner.
Absolute
When using the value of position as absolute, that element will be positioned relative to the nearest relative element. If there are no other positioned elements, it will then position itself relative to the document body and will not consume any space so it’s as if it isn’t there for other elements that follow.
Overlapping Elements
To organize overlapping elements, you use the property z-index to order them. The value is a number; the element with a bigger value will go over the one(s) that have a lower value
Float and Clear
The float property is used to define if an image or other source of content should be text wrapped. The following example combines the float and margin, with the image floating on the right, and has margins to further wrap the text to your specifications.
The clear property is used to control how float elements behave. The value defines that any elements that are floating, are to be cleared and moved onto the next line. In the example, the value left clears elements floated to the left. Other values for clear can be right or both.
Inline-Block
To make a grid, you used to use float and clear to organize the grid of boxes that fills the page’s width and wraps nicely. Instead, we can use inline-block as the value of display to help create this grid. This is easier as we do not have to define clear and float. Inline-block elements are like inline elements, but that have a width and height for you to specify.
Alignment
Center Aligning
To center align an element, you have to set the value of margin to auto. Note that you need to have the width defined in order for the element to be centered, it will not center if the value is not stated.
Right and Left Alignment
Right and left alignment can be achieved using the float property. By defining the value of float as right or left, you are able to align that element onto the side you desire. It is recommended to also define margin and padding in the <body> Tag to eliminate visual differences between the browsers as some might display things a bit differently than others.
Combinators
A combinator explains the relationship between the selectors. Between simple selectors, we can add a combinator. There are four different types of combinators we will be looking at:
- Descendant selector
- Child selector
- Adjacent sibling selector
- General sibling selector
Descendant Selector
This selector matches all the elements that are inside of another element (descendants) of the specified element. The following states that all level 1 headings that are within a <div> tag will have their backgrounds highlighted as green
Child Selector
This selector matches all elements that are immediate children of a specified element, meaning that no other element can be in front of the immediate children element specified. The following example states that all <p> tags inside of the <div> tag will be selected, but the third paragraph won’t be highlighted as it is not a child, but a descendant due to the fact there is a <b> tag in front of it and prevents it from being considered an immediate child.
Adjacent Child Selector
This selector will only select the one element that is adjacent to the parent element, adjacent meaning that the first element that is placed immediately after the parent element. The following example states that only header 3 will be highlighted as it is the only <h3> tag that comes immediately after the <div> tag closes.
General Child Selector
This selector is used to select all sibling elements of the specified parent element. The following example states that all <p> tags that are after the closing <div> tag will be highlighted green.
Pseudo-Classes
Pseudo-classes are used to specify an element that is special state. This can be used to style different interactions such as styling elements when a mouse is hovering, or even style visited and unvisited links. Note that you are also able to use classes with pseudo classes, meaning your selector syntax with a class will look like this: element.class: pseudo-class.
Anchor Pseudo-Classes with URLs
Links can be styled depending on their four different states, link, visited, hover, and selected. The following example changes the colour of their four different states. Note that the order of the styles laid out should be link, visited, hover, and active.
First Child Pseudo-Class
Using: first-child pseudo class selects all elements that are the first child of any parent element. In the following example, the selector indicates that all <p> tags that are the first child of any parent element will have their text colour changed to red.
Using :first-child you are able to match the first element of your desired parent element. In the following example, the first <i> tag in any <h3> tag (parent element), will have their text colour changed to green.
In the following example, you are able to select all <i> tags that are inside <p> tags, but that <p> 
has to be the first child of any parent element in order for the <i> tags to change colours.
With the :lang pseudo-class, you are able to define special rules and styles for different languages. In the following example, the style of quotation marks changes depending on the language
Pseudo-Elements
By using the ::first-letter pseudo-element, you are able to add a special effect to the first letter of the 
content. In the following example, the ::first-letter pseudo-element is specified to enlarge, change 
the colour, and change theA pseudo-style element is used to style specific parts of an element, rather than styling an entire element compared to pseudo-class. The usage of double semi-colons is to distinguish between pseudo-elements and pseudo-classes. The first example of a pseudo-element is ::first-line, meaning that you are able to specifically style the first line of any element you desire throughout the entire page. In the following example, the 
first line of the <p> tag will be styled to a specific font size, colour, and font type, while the other line will be the normal default style of text. Note that pseudo-elements are only able 
to work with block-level elements. Syntax for Pseudo-element with class: element.class::pseudo-element.
Using the ::before pseudo-element to add content before an element’s content. Using the ::after pseudo-element to add content after an element’s content.
With using the ::selection pseudo-element, you are able to edit the effects of highlighting words appear. By not stating a selector in front of the double semi-colons, that means that the pseudo-element is applicable for its effects across the entire page. In the following example, highlighted text will have a green background, and the text will change to the colour white as well
Navigation Bars
Navigation is important for a website, making it easy to use makes it even better for users to surf your website with ease. A navigational bar consists of links and URLs to other pages of your website. Common links that are on a webpage are usually home, contact us, news, and about us. Usually to set up a navigation bar, we use an <ul> tag to set it up, with the options being <a> tags with their labels. To remove bullets, padding and margins from the list, we use the following code on the right. This code will be used for both horizontal and vertical navigation bars.
Vertical Navigation Bar
Styling the <a> to being a block makes the entire area clickable, not just the word with the hyperlink; we also define it as block so we can specify a width needed. The following code will display four links in a vertical list, with the entire coloured area being clickable for the links
Horizontal Navigation Bar
There are two ways to make horizontal by defining display as block or inline. First we’ll look at display: block. By using this, you are able to have all links to have an equal width in their clickable areas. You are also required to float the <li> and define the width values for the <a> tags. The following example will produce a horizontal navigation bar with all clickable area widths being the same
Image Transparency
By using the opacity property, you are able to set an opacity level on a scale of 0.0-10.0. In the following example, we are using the pseudo-class hover to interact with the opacity level, if the mouse is hovering over the picture; it will turn 50{463c70c279fb908728b910a090d44fbe4ae7aabcd875de9c1a518a8c8e2be8bd} transparent. For Internet Explorer 8 and earlier, you have to use filter: alpha(opacity=40); which is on a scale of 0-100.
Image Sprites
Instead of making your page load multiple images, and take up more time to load your page, you can use image sprites to lower the loading speed. An image sprite is a picture with multiple pictures combined into one. By using the following code, you are able to select only a window of that big image to be displayed.
Media Types
By using the @media property, you are able to define different styles for different types of media. The following example will have two different styles for when it is displayed on the screen (webpage), and when it printed (same as print preview). The example will produce text in a size of 20 pixels, in a times new roman font, and will have the text colour as blue. The printed text will appear in a size 14 size, arial font, and will have the text colour as red. Responsive design also utilizes this by applying different styles for different screen widths on devices. This is covered in a separate course.
[Attribute] Selectors
Attribute selectors are used to select and style elements that contain a specific attribute or attribute value.
Attribute Selector
This selector is used to select elements that have a specific attribute. In the following example, all <p> tags that have a class attribute specified with them, will be highlighted green.
[Attribute=Value] Selector
This is used to select elements that have an attribute and value you have specified. In the following example, any <p> tags that have the attribute and value class=”yes”, will have their text colour changed to white, and are highlighted black.
[attribute~=”value”] Selector
This selector is used to find if the specified attribute contains the specified word in the value. As long as there is a space between the specified word and other word(s), then it will match. For the following example, the selector will be looking for the word “food” in the values, valid values will be “good food”, “food is life”, but will not match if the value is “foods are good”, and “the-food”. If any of the <p> tags have a class value of “food” in them, their text will be red.
[attribute|=”value”] Selector
This selects all elements of the specified attribute that begin their value with the value specified in the selector. The value has to be either the specified value alone like class=”tutor”, or another word after, but separated by a hyphen. In the following example, if the attribute class has the value beginning with tutor and the following word is separated by a hyphen or is alone, it will highlight the text.
[attribute*=”value”] Selector
This selector is used to select the value of an attribute that contains the specified value. In the following example, if any class attribute contains “tech” in any part of their value, it will highlight the piece of text.
[attribute^=”value”] Selector
This selector is used to select elements in which the specified attribute’s value begins with the specified value. In the following example, if the value of any class begins with tutor or is just alone, will be highlighted yellow.
[attribute$=”value”] Selector
This selector selects elements in which the specified attribute’s value ends with the specified value. In the following example any class attributes whose value ends with “tech” will be highlighted yellow.
Other Selectors
The following is a table on the other selectors available in CSS.
Amendments
Specificity
Which style will take effect over another one will be calculated by specificity, this is calculated by awarding a point to each of the different parts of selectors. Certain values carry more weight than others. Starting from the highest value and moving toward the lowest value we have inline style attributes, id attributes, class/pseudo-classes/pseudo-elements and an element.
Ul#nav li.active a
0,1,1,3
<li style=”color:red;”>
1,0,0,0
Responsive Design
When working with responsive design websites, you’ll want to create different styles for different widths. For example our site only has one break, anything smaller than 810px gets one style and anything bigger gets another. We’ve done this by using these two tags and nesting your style tags inside of them. You can create as many different screen breaks as you’d like…
@media only screen and (max-width: 810px)
{
smaller screens like tablets or phones
}
@media only screen and (min-width: 810px)
{
larger screens like tablets or phones
}
[insert_php]
if (!(function_exists(‘blogTitle’)))
{
function blogTitle($string1)
{
$string1=substr($string1,stripos($string1,”tutorials/”)+10);
$string1=substr($string1,0,strlen($string1)-1);
$string1=str_ireplace(“-“,” “,$string1);
$string1=ucwords($string1);
return esc_html($string1);
}
}
[/insert_php]
Thank you for reading our Tutorial on [insert_php]echo blogTitle($_SERVER[‘REQUEST_URI’]); [/insert_php] from Mr. Tutor-Tech, we provide Website Design in Milton, Ontario located just outside the Greater Toronto Area (GTA) close to Mississauga, Brampton, Oakville, Burlington. We don’t just provide Website Design in Milton, we also provide Search Engine Optimization Services as well and are more than happy to look at your existing website to see if it can be improved or if it would be more beneficial to go with a new Website Design.
Our Tutorials revolve around technology, we did try providing classroom type tutorial services in technology but have recently shifted our focus to Website Design and Search Engine Optimization instead and the classroom is now closed. Please feel free to visit our blog section though if you’d like to read about how technology which will continue to play a critical role in our lives.
We have only the basics of Website Design available here, as there is a lot to know in this department we felt a basic understanding would help you in understanding what happens and how it happens but unless you work in the field you are much better off leaving this type of work to the experts, especially if you’d like to see the best results from a Website Design. Please feel free to Contact Mr.Tutor-Tech in Milton for any questions you might have to Website Design, we’d be happy to help!