CSS course is designed to introduce various selectors, properties and values required to style a web page. This course will help you to learn CSS through hands on approach.
- Style webpages based on a given requirement
- Apply uniform style to group of webpages using external CSS
- Selectively style webpages for different devices using media query
- Enhance the user experience of a webpage using CSS box model
Can this be done using only HTML elements?
No, it cannot. HTML was developed with the purpose of creating the content and structure of a webpage. Though styling can be done with HTML elements, its functionality is limited. Also there will not be a clear separation between style information and the HTML content on which style is applied.
This is where CSS comes into play. CSS (or Cascading Style Sheets) is a language/technology that is used for defining the presentation of an HTML page.
It was introduced primarily to separate the page content from the presentation. This provides greater flexibility and control over the styling. It helps in separating the style information and the HTML content.
Basic Syntax
Syntax basically has three main components, as given below:
Syntax:
selector {
property: value
}
|
Selectors are used to declare which of the HTML elements a style applies to.
The property is the style attribute you want to change. It could be color or border etc.
Each property has a value which can be in the form of string, number, length, percentage, URL, color etc.
Each property has its own restrictions on the value both syntactically and semantically.
In order to bind the specified style with HTML elements, name of the selector should match either the element name or the value of class attribute or the value of id attribute of the corresponding HTML element.
Example:
h3 {
font-family: verdana;
color: red;
}
|
There are three basic types of selectors:
css1
When we have same element, id and class selectors in different stylesheets, and all are included in a particular page, then the common properties will be overwritten by the last stylesheet included.
Here font-family is overwritten by stylesheet2.css.
is used for providing a similar style for a block, but if we need some special style for a section of the div we should use span
- Type selector: Any HTML element can be a type selector like tag p, h1, body, title etc.
Example:
h1 {
font-family: verdana;
color: red;
}
|
All h1 tags will have its content displayed in verdana font and red color.
- Class selector: Class selector represents a class of style. In a class selector, class name is mentioned using period notation (.) i.e. .nameOfClass. The class attribute allows the HTML element to associate with a named class of style.
Example:
.dazzle {
color: #FF0000;
}
|
Every element with class = "dazzle" will have its content displayed in red.
- ID selector: ID selector represents a unique style to be applied to an HTML element. In an id selector, id is mentioned using number sign (#) i.e. #elementID. The id attribute allows the HTML element to associate with a named id of style.
Example:
#blueShade {
color: #0000FF;
}
|
Every element with id="blueShade" will have its content displayed in blue.
Descendant Selector
Now imagine, that you want to apply the style only to those tags which are inside a
.
How will you go about this?
DemoSelectors.html
html
head
style
p {
color: red;
}
/style>
/head>
body
p I don't want styling here/p>
div
p I want styling here/p>
/div
/body
/html
|
Output:
css2
As you can see in the output for the given html code, the styling for p is applied to all p tags, no matter where they are inside the body.
If you replace the style tag code with this, you will see that the style applies only for the desired p tags
div p {
color: red;
}
|
Output:
These type of selectors are also called Descendant selectors.
The syntax for descendant selectors is as follows:
selector1 selector2 {
property: value;
}
|
It combines two selectors in such a manner that elements which match selector2 are selected, only if their ancestor element is selector1 i.e, selector2 should be a descendant of selector1.
Style:
div span {color: olive;} span { color: black;}
html
span I am not a descendant /span div span I am a descendant /span /div div h1 I am also a span descendant /span /h1 /div
css3
Example for Specificity of Selectors
css4
For the first p tag, the font color is green, because using type selector we have defined the same.
For the second p tag, two selectors are possible i.e. type selector and class selector. As we can see from the output, the font color is red, which means class selector was chosen over type selector.
For the third p tag, again two selectors are possible i.e. type selector and id selector. In this case, the font color being blue, we can conclude that id selector was chosen over type selector.
For the fourth p tag, three selectors are possible i.e. type, class and id. This time the id selector was chosen over type and class selector, since the font color in output is blue.
Specificity of Selectors
Thus we can see that when multiple selectors are used at the same time for the same property, only one is chosen.
This happens because CSS gives priority to the selector which is more specific*.
So we can conclude that id selector is more specific than a class selector, class selector is more specific than type selector and id selector is more specific than type selector.
Type selector < Class selector < ID selector
Usage of Id and Class Selector
As we know for styling we can use both class and id selector.
Now the question arises, if both are capable of doing the same thing, then which one to choose?
Class selector can be used multiple times in html tags which are having class attribute.
Where as id selector should be used once. This is because every HTML element has an id attribute which specifies element's unique identifier. Thus it’s value should be document-wide unique for every html page for DOM manipulation*.
After learning how to apply style for HTML elements, lets explore some more style properties.
Note: If a style needs to be applied many times in a page, one should go for class selectors.
If a style needs to be applied only once in a page, one should go for id selectors.
CSS Properties
We have already seen some of the CSS properties like font-family and color.
As you must have observed, font-family property specifies the font of an element and color specifies the color you want to apply to the font.
Example:
font-family : verdana/"Times New Roman"/Calibri/etc.
color : red/#RRGGBB (where RR(red),GG(green),BB(blue) values should range from 00 to FF)/rgb(r,g,b) (where r,g,b values should range from 0 to 255)
css5
font-style : italic | normal |oblique
Adding CSS to HTML
There are three ways for adding CSS to an HTML page:
- Defining and applying the style for an HTML element using its style attribute is referred as Inline CSS. The style attribute can contain any CSS property.
head /head body element style="Enter CSS property here" This is Inline CSS/element /body |
- Style information of an HTML document can be embedded within the document itself. It is referred as Embedded CSS. Styles are defined within the style tag element and embedded within the head tag element.
head style !-- Style definition will go here -- /style> /head> body /body> |
- Style can be defined and placed in an external file with extension '.css'. This file is referred to as external style sheet. External style sheet is then included in HTML document using link element.
head link rel="stylesheet" href="path_to_the_css_file" type="text/css" / /head? body /body>
Inline, Embedded and External CSS
Inline CSS is used for very small web applications where you are using very little CSS styles.
Embedded CSS is used for medium size web applications where you need to separate HTML content from CSS style, but keep them in same page, making modifications easier.
External CSS is used for large web applications when the same layout needs to be maintained for all web pages. This can be done by adding the links of the stylesheets in all the pages, enabling reuse of existing styles.
For adding CSS file in HTML page you should use link tag:css6
Scenarios Explained
External CSS / Embedded CSS < Inline CSS
External CSS / Embedded CSS (The one specified last will be chosen)
External CSS / Embedded CSS (The selector with the higher priority will be chosen)
|
Multiple External Stylesheets
stylesheet1.css
h1 {
color: red;
font-family: Times new Roman;
}
| stylesheet2.css
h1 {
font-family: Monotype Corsiva;
font-weight: bold;
}
|
demo.html html head link rel="stylesheet" href="stylesheet1.css" type="text/css" / link rel="stylesheet" href="stylesheet2.css" type="text/css" / /head> body h1 h1 with style properties from two different stylesheets/h1> /body> /html> |
When we have same element, id and class selectors in different stylesheets, and all are included in a particular page, then the common properties will be overwritten by the last stylesheet included.
style
h1 {
color: red;
font-family: Monotype Corsiva;
font-weight: bold;
}
/style>
|
Here font-family is overwritten by stylesheet2.css.
Output:css8
Div and Span
Often times we may need to apply the same style to a group of HTML elements. This can be done either by using span or div element
css7
css7
Inside the div but outside of span
Inside the span
Media Queries
Till now we have learnt CSS to create webpages only for desktops. The same page may not be feasible for optimal viewing in media/devices like mobiles, tabs etc.
To enable optimal viewing on all resolutions(responsiveness), @media queries were introduced in CSS.
Syntax:
- For Embedded CSS
@media not|only mediatype and (media feature:value) {
selector {
properties: value;
} }
only keyword prevents the old browsers that do not support media queries from applying the given style and not keyword is used to negate the whole media query.
|
- For External CSS
link rel="stylesheet" media="not|only mediatype and (media feature:value)" href="mediaStylesheet.css"
Note: Both only and not are not compulsory to use.
Let us now understand the syntax of media queries
Every media query should start with @media.
If a query is true then that particular style will be applied, otherwise not.
css9
Example:
@media only screen and (max-width: 500px) {
body {
background-color: silver;
}
}
|
In the above example, the style specified for body will be applied when the mediatype is a screen and max-width of the screen is less than or equal to 500 pixel.
As we can only provide and operator in between mediatype and media feature, so if any of the condition fails, that particular style (if External CSS, then stylesheet) will not be applied.
Media Queries Using External CSS
link rel="stylesheet" href="mediaStylesheet1.css" media='screen and (min-width:701px) and (max-bwidth:900px)' / link rel="stylesheet" href="mediaStylesheet2.css" media='screen and max-width: 500px)' /
Note: We can combine multiple media queries by separating them using ' , ' operator which acts like an 'or' operator. It will return true if any one of the media queries return true.
"not " will negate the entire media query/queries when it is applied to a comma separated list of media queries irrespective to which particular query it has been applied
CSS Box Model
Every element in HTML is treated as a rectangular box. Be it a p tag, or an h1 tag.
Now imagine the h1 tag as a box.
css11
This box is now used for everything, for the content, for the margin, for the border and for the padding.
This scenario of considering every HTML element to be surrounded by a box is called CSS Box Model.
This scenario of considering every HTML element to be surrounded by a box is called CSS Box Model.
CSS box model describes a rectangular box with specified dimensions and positioning scheme for each element
- Properties for box like size (width, height), border, margin and padding helps us in knowing the overall dimension of the box
- The attribute position helps to specify the positioning scheme of the box
Following are the areas present inside a CSS Box :
css10
Boundary of each area is called an edge.
Follow these steps to explore box model:
- Select some text or image, right-click on the webpage and select Inspect option
- On the right hand side you will see box model of the selected element
- Select other elements and observe the changes
Example
p {
font-size: x-large;
margin: 200px;
padding: 50px;
border: 25px solid navy;
}
body p Just CSS!!/p /body
css12
Margin and Padding
css13-16
css13-16
CSS Units
Units such as px are used for length values for properties like width, margin, padding, font-size, border-width etc.
There are two types of length units in CSS:
- Absolute Units: have their values fixed, so no matter what the screen resolution is, they will appear exactly as the size that is specified.
Example: px(pixel), cm(centimeter), mm(millimeter), in(inches), pt(point), pc(picas)
- Relative Units: don’t have fixed values. Their values are relative to some other predefined value or feature.
Example: %, em, rem etc.
Positioning
CSS position property specifies the positioning of an element.
Value of the position property indicates the positioning scheme.
Values can be any one of the following:-
- static : it is the default positioning of all elements; elements are laid out according to the normal flow. i.e. stacked one below the other; normally this is never specified
- relative : similar to static except that elements can be shifted using top, bottom, left and right properties
- absolute : elements are taken out of the normal flow of the page and positioned absolutely
- fixed : elements are fixed at a location and are unaffected by scrolling
Let us understand more with the help of an example
css17
Static Positioning
Let us first understand the static value of position attribute. On modifying #content1 in style.css as given:
#content1 {
position: static;
top: 0px;
right: 0px;
margin-left: 150px;
width: 700px;
height: 40px;
background-color: #FFE4B3;
border: solid 2px #FFD280;
}
When we specify position:static, we can see that the position of the div with id #content1 does not change and remains as it was before, even though we have specified the top and right values for it.
css18
This shows that static is indeed the default positioning of all elements in an HTML page.
Absolute Positioning#content1 {
position: absolute;
top: 2px;
right: 225px;
margin-left: 50px;
width: 500px;
height: 40px;
background-color: #FFE4B3;
border: solid 2px #FFD280;
}
|
css20
When we specify position:absolute, the element is removed from the document and placed exactly where we want it to be.
Notice that, since the div with id #content1 was removed from the document, the other elements i.e. div with id’s #content2, #content3 moved up as it was no longer there. Also notice that the div with id #content1 was positioned in the top right corner of the header block as specified by top:2px and right:225px .
Relative Positioning
If we specify position:relative, then we can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Notice the space where div with id #content normally would have been if we had not moved it, it is now an empty space. The next div with id #footer did not move when we moved #content.
css21
This is because position:relative lays out all elements just as static would have, and then changes the element's position. Also notice that div with id’s #content1, #content2 and #content3 which are the children elements of div with id #content, moved along with it.
Fixed Positioning Code
the div on the bottom right corner remains fixed, that is its position does not change even when we scroll.
Fixed Positioning Code
the div on the bottom right corner remains fixed, that is its position does not change even when we scroll.
