Cascading Style Sheets or CSS, in short, is a style sheet language used for describing the presentation of a document written in a markup language like HTML. At least, we as bloggers need to have a bit of knowledge about CSS and HTML.
Now we will briefly describe changing the appearance of our blog design, whether it changes the position of a block element by editing the HTML section or through CSS with the help of the Inspection Tools that are available for each browser designed for the desktop.
How To use Chrome Dev Inspector
To use Inspect mode, simply, Right Click mouse button at the desired area and then choose "Inspect". try to inspect elements below and look for data:message Value behind Quote within inspector and then type it at the form below to see if you inputting correct value.
Declare CSS Style to an element
In this part, we are trying to add red background-color to the element below
Add A Background Color To Me!
- Right-click element above and click inspect.
- Click under element.style Filter text of the Styles tab.
- Type background-color then press Enter or :
- Type red to add red color to its background.
Style tab GUI has :hov button, it uses to make element state change to :active, :focus, :hover, and :visited. While .cls mean to add class to the selected element, and New Style Rule [+] automatically declare highlighted element as the selector.
New style rule added from inspector will be stored under inspector-stylesheet.css that we can edit directly from source pane tab. Google Chrome Developer page has aslo own Guide, see Get Started With Viewing And Changing CSS.
There are three ways of inserting a style sheet:
Internal style sheet
this is a CSS declaration inside <style> and </style> somewhere in the same page.
<head>
<style>
h1 {
color: red;
}
</style>
</head>
External style sheet
for example : <link rel="stylesheet" href="my-external-style.css"> In the code, we have included the link of my-external-style.css file using the link element. We then write all of our CSS in a separate stylesheet called my-external-style.css without <style> tag so that it’s easily manageable.
h1 {
color: red;
}
Inline style
CSS style that is typed inside element.style are written directly to the element e.g <div style='background-color:red'/> we call it inline style.
Using both inline or internal style, when we finished editing, maybe we need to synchronize with the CSS code that is inside the page section manually. Well, its different story if we use external CSS, after we have finished editing try to press the name of our external .CSS file from the style tab in the inspector, we will found our CSS code is updated automatically, this called live editing. so we only need to save the file and then upload it again.
CSS Selectors
CSS is a design language which is used to style HTML elements. And in order to style elements, first, we have to select them. There are different ways we can select HTML elements.
EXAMPLE HTML CODE
<div class='container' id='id-container'>
<h1 class='heading' id='id-h1'> This is heading </h1>
<p class='paragraph' id='id-p'> This is text from Paragraph </p>
</div>>
1. By Element
The first way to select an HTML element is by simply using the Element name.
div {
margin: 10px;
}
h1 {
font-size: 20px;
}
p {
color: green;
}
2. By Class
The way of selecting HTML elements by using the class attribute. In HTML, we can assign different classes to our elements. Each element can have multiple classes, and each class can also be applied to multiple elements as well. Selected class described in CSS by adding . (dot) prefix to its class name.
.container {
margin: 10px;
}
.heading {
font-size: 20px;
}
.paragraph {
color: green;
}
3. By ID
Like classes, we can also use IDs to select HTML elements and apply a style to them. The only difference between class and ID is that one ID can be assigned to only one HTML element, so ID must be unique and there is only one ID on the page. We can select id by adding # as a prefix.
#id-container {
margin: 10px;
}
#id-heading {
font-size: 20px;
}
#id-p {
color: green;
}
4. Select multiple elements
We can select multiple element separate by a comma.
.heading, .paragraph {
font-size: 20px;
}
For further reading see complete selector guide at Mozilla Developer web.
For complete CSS Reference Mozilla CSS Reference.
Blogger , Tips and Tricks
