Learn CSS — Part 1
Basic Structure And Selectors
This is the first article in this series.
We will cover the following things in this series:-
- Introduction (How CSS works?, CSS selectors and Inheritance)
- Colour
- Text
- Boxes
- List, Tables and Forms
- Layout
- Images
- Layout
- Miscellaneous
This tutorial is for learning how CSS works and CSS selectors which are very important to know while beginning CSS.
The Introduction
What is CSS?
Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
We will explore in some time what Cascading stands for in CSS?
To understand anything in CSS, you have to first acknowledge the fact that CSS applies rules in such a way that everything is a box.
HTML Code
Output
How CSS Works?
CSS allows us to create rules that control the way that each individual box (and the contents of that box is presented).
CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. The elements are selected using CSS selectors.
Anatomy of a CSS rule
Selectors indicate which element the rule applies to. The same rule can apply to more than one element if we separate the element name with commas. We will discuss more selectors later in this article.
Declaration indicates how the elements referred to in the selector should be styled. Declarations are split into two parts (a property and value) and are separated by a colon. These declarations lie inside curly brackets.
Properties indicate the aspects of the element we want to change.
How CSS is associated with the HTML file?
Method 1 — Linking files externally
“<link>” is used in an HTML document to tell the browser where to find the CSS file used to style the page. It is an empty element(which means that there is no closing tag) and it is written inside “<head>” element.
It has three attributes:-
- href — This specifies the path to the CSS file.
- type — This attribute specifies the type of document being linked to. The value is the case of CSS should be “text/css”.
- rel — This specifies the relationship between HTML page and the file it is linked to. The value should be “stylesheet” when linking to a CSS file.
Method 2 — Using internal CSS
“<style>” — We can also include CSS rules within an HTML page by placing them inside a “<style>” element, which is written inside “<head>” element.
The “<style>” element should use the type attribute to indicate that the styles are specified in CSS. The value should be “text/css”.
When to use external CSS?
When building, a site with more than one page, because,
- Allows all pages to use the same style rules (rather than repeating them in each page).
- Keeps the content separate from how the page looks.
- Allows us to easily modify code rather than opening many files and changing content in them.
It is helpful to think about the structure of HTML as a tree as shown below:-
HTML Code
Structure
Now, some of the more advanced selectors can be easily understood.
Now, let’s start with the selectors.
What are selectors in CSS?
- CSS Selectors are used to “find” or select the HTML element for which you want to define the presentation rules. In simple words, it allows us to target specific elements on a web page.
- Example: p {} , .wrapper {} , #main {}
These selectors are divided into different categories. In this article we will explore the following selectors:-
- Universal Selector
- Element Selector
- Class Selector
- HTML ID Selector
- Descendant selector
- DRY( Don’t repeat yourself) CSS
- Child Combinator Selector
- Adjacent Sibling Combinator
- General Sibling Combinator
- Attribute Selector
- Pseudo-Class selector
Now let’s explore all the above selectors.
- Universal Selector: These selectors apply to all elements in the HTML document. These selectors are used mainly to remove the default padding and margin of the web page implemented by many browsers.
Syntax — * { }
Code
Output
2. Element Selector: These selectors are used for targeting specific elements, for example, paragraphs <p>. It selects HTML elements based on their element name. These are considered powerful selectors.
Syntax
p {}
h1 {}
div {}
and so on…
In general, the syntax is
elementTag {}
Code
Output
3. Class Selectors: In the above example we can see that once we select the “p” tag and change its “color” property to red then all the paragraphs or elements with <p> tag are changed to red colour. But what if we only want one of our paragraphs to be red in colour and other in yellow colour? Here comes the role of Class Selectors. It matches with the element whose class attribute has the value that matches the one specified after (.) symbol.
Syntax 1 : .classname {}
The above syntax targets all the elements with that particular class name.
Syntax 2:
p.classname {}
h1.classname {}
div.classname {}
In general, the syntax is
elementTag.classname {}
This syntax targets those elements whose class attributes have a value of the class name.
Code
Output
In the above example, we took four paragraphs and gave them two classes, “class1” and “class2” respectively. We also gave the property of red colour to “class1” and of yellow colour to “class2”. We can see the effect in the output. This shows our class selector works.
4. HTML ID Selector: These selectors are just like the Class Selector. The main difference is that the ID attribute must be unique in the whole HTML document which means that we cannot give the same ID to multiple elements.
Syntax : #idname {}
Code
Output
Note: In the above examples, We have taken both IDs to be different.
5. Descendant Selector: These selectors gives us the ability to combine other selectors together. It allows us to be more precise in targeting elements as we can specify where we can find an element within the document.
In short, these selectors are used to match an element that is a descendant (as the name itself suggests) of another specified element (not just a direct child of that element).
Example — p a{}
In this example, we are targeting elements with <a> tags which are children of the <p> element or “descendant”.
Code
Output
Clearly, in the above example, the anchor tag is targeted. This shows the descendant selector property.
Note: Overusing of this property for every little case is discouraged.
6. DRY (Don’t Repeat Yourself) CSS: Sometimes we use the same property for different elements. This makes our code longer and time-consuming.
Code
Output
Clearly, in the above CSS code, you can observe that we have repeated the elements with the same property. For avoiding this we can make our code short by writing all the elements together separated by comma(,).
Code
This gives the same output as given by the previous HTML/CSS code.
7. Child Combinator Selector: These selectors are created by combining two selectors with “>” sign. The main function of this selector is to target immediate children of a specific element.
Syntax : .classname > elementname {}
Code
In the above code, we are targeting all the <p> tags in the class “wrapper”. So all the <p> tags will turn red with all properties applied.
Output
Now we will use the child combinator selector to select only the immediate child of the wrapper class and apply all properties to it.
Code
Output
The above output clearly shows the difference between the above-given codes. Note that only the immediate child is getting coloured.
8. Adjacent Sibling Combinator: This selector is used to select only the first (immediate), sibling. Here sibling signifies the element coming just after the given selector. We use the plus(+) symbol to in this selector. It is difficult to understand with words so let us take an example to show the adjacent sibling combinator.
Code
In the above code, we can see four div tags and four paragraph tags inside those divs. We also have two headings, one being the main heading or the title and the other being “Heading 2”. We selected the second heading and its adjacent sibling div.
Which div or divs do you think will be targeted? (Stop here for a moment and think about it)
Output
So as the definition says only the immediate sibling of the “h2” tag i.e the “div” immediately after “h2” tag is targeted.
9. General sibling combinator: This is very similar to the adjacent sibling combinators. The major difference is that it targets “all” the siblings from the given selector. We use tilde(~) sign in this selector.
Code
The only difference in the code is that we have used “~” sign instead of the “+” sign. And now guess what will be the output.
Output
So, all the siblings of “h2” tag i.e all the “divs” have been changed which shows the use of general sibling combinator.
10. Attribute Selector: These selectors targets elements based on their attributes. For example, in an “input” tag we have attribute “type” which can be “text” or “password” etc. This was just an example, we can use any attribute to target specific elements. We use “[]” to specify the attribute we are targeting.
In the above code, we have three anchor tags. But the middle one has an attribute “target” with value “anything”. So, we target the anchor tag with the attribute “target”. Also, we have input tags with attribute “type”. We specifically target the ‘type= “text”’ attribute. Let’s see what output we get.
Output
The second anchor tag and the input tag with type as the text is targeted which shows the use of attribute selector.
11. Pseudo-Class Selector: A pseudo-class selector is used to define a special state of an element.
For example:-
1. Style an element when a user mouses over it
2. Style visited and unvisited links differently
3. Style an element when it gets focus
Syntax : selector:pseudo-Class-Name{}
Code
In the above code, we have taken examples of anchor tag for showing the effect of visited and link pseudo-classes. Note that we can use the hover pseudo-class with other tags like buttons. Now coming to the code, It has different links some are with “href” attribute others are not with it. So, we use the “link” class to show which anchor tags are with links i.e “href” attribute. The “visited” class will convert all the tags with “href” to green as soon as any one of them is visited. Also, the “hover” class will show its effect once the user points the pointer above it. All the above effects will be shown in the outputs given below.
Output (Initially)
Output (After visiting any one of the anchors with “href” tag)
Output (On Hover)
We can also target “checkboxes” in the “input” tags such that when the checkbox is checked, all the wanted elements are altered.
We use the checked class in this case.
In the above code, we have created a “checkbox” and after that, we have a paragraph. We need to alter the paragraph just after the checkbox is checked. So, we use the pseudo-class “checked”. Let’s observe the output.
Output (Initially)
Output (After checked)
Inheritance
“inherit” value is used on attributes to make child elements have some property as their parent elements. It forces the child element to take the same property as their parent.
Note — Not all properties are inherited by child elements like “background-color” or “border” properties.
So, now we are done with all the above topics. We have discussed all types of selectors with practical examples so that it becomes easy for you to understand all the concepts and apply them easily.
Hope you like this article.
This CSS selectors part was written by Amitesh Kumar. Feel free to contact me on my E-mail.
Edits, The Introduction and Inheritance are done by Ankit Kumar. His E-Mail.
Follow Web for you for more amazing stuff.
Happy Coding! We encourage you to take reference of the above article and make something on your own just using CSS and HTML.
