In this post we will be covering the basic concepts in CSS3 along with some hands on examples. The topics that we will cover in this post are:
- Structure of a CSS Style
- Types of Stylesheets
- Selector
- Tag
- Class
- Id
- Pseudo-Class
Structure of a CSS Style
Cascading Style Sheets are the way we usually style the elements on our web pages and CSS helps us define this style at one place which can be reused at multiple places later on.
When we write a CSS style it looks something like below. We have the name of the CSS class (or selector) followed by the opening and closing parenthesis. Inside these parentheses we define the property name and the value of those properties which are separated by colon (:). Each property value pair is separated by a semi colon (;). Sometime the vales can be placed inside quotes (“” or ‘’) depending on the value that we are adding.
CSS Structure
Types of Stylesheets
External Stylesheet
External stylesheets are the ones which are used mostly as they allow us to make design changes to an entire site by simply changing one file.
- External Stylesheet allows us to have better separation of concerns between the HTML and the style that we are writing. The HTML should be completely independent of the style that will be applied to it.
- They are faster as they are cached and easily available for use.
- We can include external stylesheet into a HTML page by simply adding it as a link. We need to specify the rel as stylesheet along with the type and path of the stylesheet.
<link href="~/Content/css/styles.css" rel="stylesheet" type="text/css" />
Internal Stylesheet
Internal stylesheet reference styles within the page itself. Internal stylesheets are mainly use during development or prototyping because they are faster while development as they do not need to come from the cache every time we reload the application. These stylesheet should only be used at the time of development or prototyping and there is a good chance that these stylesheet will become obsolete in a few years.
To create an internal stylesheet we add the styled within the head tags of the webpage
<html> <head> <title>Learn CSS</title> <style></style> </head> <body></body> </html>
Section
Section is used to specify a particular area on the screen.
Aside
This section is generally used for the side panels. Sometimes it is also used to give additional information.
Footer
This is used for adding the footer to the website or the webpage.
Selectors
Tag
Tag selectors are page wide selectors like p (paragraph). This selector is the most wide as they have multiple elements with that tag.
Class
The Class attribute tells the browser that an HTML tag belongs to a certain group. We can have many selector with the same class and this allows us apply one style to multiple selectors across the web page or website. Class selectors allow us to select every element on the page with that specific class. The Class selector is a little less wide than the Tag selector but still there can be multiple elements that can be present with the same class selector. When declare class selector in the style then we specify dot (.) to indicate that this is a class selector. But when we use it just specify the class name.
Id
The Id attribute should only be used in one tag on your HTML page, so that whatever is in that one tag look different. The motive of using an Id attribute is to uniquely identify a selector so whenever we are using an Id it should be unique. The Id selector is even more specific than the class selector as Id assigned to an element on the page should be unique for that page. When we specify the Id in the style we use the hash (#) symbol to indicate that this is an Id. Two major uses of Id because of its uniqueness on the page are –
- Id can be used by JavaScript code to find a specific element.
- Id can be used for linking to a specific part if the page.
In the code below we see all the things that we have talked about till now.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Learn CSS3</title> </head> <body> <article id="first-article"> <section id="header-section"> <h1>Learn everything about CSS</h1> <div> <span>Posted on 12th Sep 2013</span> <span>by</span> <span>Abhishek Shukla</span> </div> </section> <section> <p> </p> <p>In this section we will learn enough about CSS3 to get a good foundation for working on it. <img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p> <p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5. In this course we will have a look at the various basics of CSS3. We will also get our hands dirty with some practical examples.</p> </section> <aside> <section> <h2>About CSS3</h2> </section> <section> This section is generally used for the side panels. Somethime it is also used to give additional information. </section> </aside> </article> <footer> <p>Copyright 2013 Abhishek Shukla</p> </footer> </body> </html>
When run the above webpage we will see something like below. The browser has different font style for the headings. It has a picked up a default font for the text as we did not specify any font family.
Only HTML
Now we will style this page to do that we will create an inline style. To create an inline style we need to add the style tag within the head tag. We will start off with styling the paragraph in our webpage. So let us add a few property and values for the paragraph style.
p
{
color: #24981f;
font-family: Calibri;
font-size: medium;
}
Let us also specify the style for the h1 and h2. Notice the font size for h2 is smaller that h1
h1
{
color: #0f769d;
font-family: Calibri;
font-size: larger;
}
h2
{
color: #1197c9;
font-family: Calibri;
font-size: large;
}
Let us also style the footer as well to show small text. You will see that we have specified the style name as footer p, this means that this style applies to any paragraph which is inside the footer.
footer p
{
color: #000000;
font-family: Calibri;
font-size: x-small;
}
Now our webpage looks something like below.
Style By CSS Tag
Style by Tag
We have already seen how to specify style by Tag in the previous section where we have specified styles based on tags like p, h1, h2, footer, etc.
p
{
color: #24981f;
font-family: Calibri;
font-size: medium;
}
h1
{
color: #0f769d;
font-family: Calibri;
font-size: larger;
}
h2
{
color: #1197c9;
font-family: Calibri;
font-size: large;
}
footer p
{
color: #000000;
font-family: Calibri;
font-size: x-small;
}
You could see that we have specified the styles based on the element tags. So we have specified the style for all the paragraphs using p, for all heading1 using h1 and for all heading2 using h2. All of these styles apply to all the elements on the page with no exception. However if we notice the style that we have specified by footer p means that this style will apply only to the paragraph present inside the footer. This type of style specification opens up a lot of capabilities of defining styles for different elements inside different tags.
Style by Class
In the code that we have written before we saw that the h1 that we were using had a class named article-title.
<h1>Learn everything about CSS</h1>
Style By CSS Class
We will define a style specific to this class. To that we need to go to the style section in the head tag and specify .article-title as the style name and then add a background color property to the style.
.article-title
{
background-color: #c4c4c4;
}
Now if go back and refresh the page we will see that the h1 text has a background now. The same will happen for any element that is using the same class.
Now let us add the same class that we have added to h1 to h2 as well.
<h2>About CSS3</h2>
We will see that h2 will also get the same background. This will verify the principle that one class can be used at multiple places.
Style By CSS Class
Now let us add style for the article metadata as well. The class that we are using for that is meta-article.
<div> <span>Posted on 12th Sep 2013</span> <span>by</span> <span>Abhishek Shukla</span> </div>
So we will go back to the styles section and add a new style named .meta-article and assign the font-style for that class to be oblique.
.meta-article
{
font-style: oblique;
}
And then the text for this div with meta-article class will become oblique.
Style By CSS Class
Now say I want my name to not to be oblique but in normal font style so I will add a new style for the meta-author class and set the font-style to be normal.
.meta-author
{
font-style: normal;
}
And then we will see the author name in normal font style.
Style by Id
To specify a style by Id we need to prefix a # before the Id while specifying the style. In this case will use the Id of the article section named as first-article and specify a background color.
#first-article
{
background-color: #e8dede
}
This will make the background of the whole article as light gray.
Style By CSS Id
Pseudo-class
These work just like the normal classes to find the elements. These pseudo-classes work on the relative basis. So in a class we can access the first child, last child, nth child, first child of a type, nth child of a type, etc. Below is the list of pseudo classes available in CSS3.
:focus
The :focus CSS pseudo-class is applied when a element has received focus, either from the user selecting it with the use of a keyboard or by activating with the mouse (e.g. a form input).
:active
The :active CSS pseudo-class matches when an element is being activated by the user. It allows the page to give a feedback that the activation has been detected by the browser. For mouse event this active behavior represents the time between mouse buttons down and then up. This is generally used
:hover
The :hover CSS pseudo-class matches when the user designates an element with a pointing device, but does not necessarily activate it. This style may be overridden by any other link-related pseudo-classes, that is :link, :visited, and :active, appearing in subsequent rules.
:link
The :link CSS pseudo-class lets you select links inside elements. This will select any link, even those already styled using selector with other link-related pseudo-classes like :hover, :active or
:visited
In order to style only non-visited links, you need to put the :link rule before the other ones, as defined by the LVHA-order: :link — :visited — :hover — :active. The :focus pseudo-class is usually placed right before or right after :hover, depending of the expected effect.
:visited
The :visited CSS pseudo-class lets you select only links that have been visited. This style may be overridden by any other link-related pseudo-classes, that is :link, :hover, and :active, appearing in subsequent rules. In order to style appropriately links, you need to put the :visited rule after the :link rule but before the other ones, defined in the LVHA-order: :link — :visited — :hover —
:active
Below is the use of all these 4 pseudo classes. We have specified these classes inside a (anchor tag)
<head>
<meta charset="utf-8" />
<title>Pseudo Selectors</title>
<style>
a:link { color:#0094ff; }
a:visited { color: #ff006e; }
a:hover { color: #ff6a00; }
a:active { color: #60a941; }
</style>
</head>
<body>
<a href="#">This link will change color on hover becuase of style that is based on active pseudo class</a>
</body>
Pseudo Class
:checked
The :checked CSS pseudo-class selector works for any radio (input type=”radio”), checkbox (input type=”checkbox”) or option (option in a select) component that is checked or toggled to an on state. The client can transform this state by clicking on the component, or selecting an alternate worth, in which case the :checked pseudo-class no more applies to this component.
In the code below as soon as the checkbox or the radio button is checked the checkbox and radio button part disappears.
<style>
input:checked
{
display: none;
}
</style>
<body>
<input type="checkbox" >CheckBox</input>
<input type="radio" >RadioBox</input>
</body>
:default
The :default CSS pseudo-class represents any user interface element that is the default among a group of similar elements.
:disabled
The :disabled CSS pseudo-class represents any disabled element. An element is disabled if it can’t be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an enabled state, in which it can be activated or accept focus.
:empty
The :empty pseudo-class represents any element that has no children at all. Only element nodes and text (including whitespace) are considered. Comments or processing instructions do not affect whether an element is considered empty or not.
:enabled
The :enabled CSS pseudo-class represents any enabled element. An element is enabled if it can be activated (e.g. selected, clicked on or accept text input) or accept focus. The element also has an disabled state, in which it can’t be activated or accept focus.
:first-child
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
:first-of-type
The :first-of-type CSS pseudo-class represents the first sibling of its type in the list of children of its parent element.
:last-child
The :last-child CSS pseudo-class represents any element that is the last child element of its parent.
:last-of-type
The :last-of-type CSS pseudo-class represents the last sibling of its type in the list of children of its parent element.
:nth-child()
The :nth-child(an+b) CSS pseudo-class matches an element that has an+b-1 siblings before it in the document tree, for a given positive or zero value for n, and has a parent element.
:nth-last-child()
The :nth-last-child CSS pseudo-class matches an element that has an+b-1 siblings after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.
:nth-last-of-type()
The :nth-last-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name after it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument.
:nth-of-type()
The :nth-of-type CSS pseudo-class matches an element that has an+b-1 siblings with the same element name before it in the document tree, for a given positive or zero value for n, and has a parent element. See :nth-child for a more thorough description of the syntax of its argument. This is a more flexible and useful pseudo selector if you want to ensure you’re selecting the same type of tag no matter where it is inside the parent element, or what other different tags appear before it.
: only-child
The : only-child CSS pseudo-class represents any element which is the only child of its parent. This is the same as :first-child:last-child or :nth-child(1):nth-last-child(1), but with a lower specificity.
: only-of-type
The : only-of-type CSS pseudo-class represents any element that has no siblings of the given type.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Pseudo Selectors</title>
<style>
span:nth-of-type(2n+1)
{
background-color: #ffd800;
}
span:nth-of-type(2n)
{
background-color: #ff006e;
}
div :first-of-type
{
background-color: #0094ff;
}
span:last-child
{
background-color: lime;
}
</style>
</head>
<body>
<div dir="rtl">
<span>This is child number 1</span>
<span>This is child number 2</span>
<span>This is child number 3</span>
<span>This is child number 4</span>
<span>This is child number 5</span>
<span>This is child number 6</span>
<span>This is child number 7</span>
<span>This is child number 8</span>
<span>This is child number 9</span>
<span>This is child number 10</span>
</div>
</body>
</html>
Pseudo Class
:lang()
The :lang CSS pseudo-class matches elements based on the language the element is determined to be in. In HTML, the language is determined by a combination of the lang attribute, the <meta> element, and possibly by information from the protocol (such as HTTP headers). For other document types there may be other document methods for determining the language.
element:lang(language-code) { style properties }
:not()
The negation CSS pseudo-class, :not(X), is a functional notation taking a simple selector X as an argument. It matches an element that is not represented by the argument. X must not contain another negation selector, or any pseudo-elements.
:not(selector) { style properties }
:root
The :root CSS pseudo-class matches the root element of a tree representing the document. Applied to HTML, :root represents the <html> element and is identical to the selector html, except that its specifity is higher.
:target
The :target pseudo-class represents the unique element, if any, with an id matching the fragment identifier of the URI of the document.
The code for this post can be downloaded @ here or @ mirror
Any questions, comments or feedback are most welcome.
