- SAP Managed Tags:
Where HTML is all about structure, CSS is all about style ?
[If you are not sure what I am referencing, start at this blog post]
CSS, or Cascading Style Sheets, is our 2nd side of the web development language pyramid. Some will argue with me over calling CSS a language, but let the haters hate.
CSS is used to tell things where to sit on the page, how much space should around the rendered tag, what color the font should be, and many more things. While I'm not going to deep dive into stylesheets (a document of CSS elements), I want to make sure we have a good understanding of how style is used in HTML and how it manipulates the elements on the page.
We won't deep dive, because CSS can get a little messy and some companies have "perfected" CSS for us. If you have heard of Bootstrapping, this is one very popular way to make you pages look good with little effort. It has evolved into a great Web App framework too, but for now, we'll focus on the styling portion. It was invented be a couple people over at a little company called Twitter.
But back to pure CSS that we have to write ourselves!
So I stole some CSS samples from W3Schools to help us better understand how this is all working.
In this example, you may recognize a couple tags, like body, h1, and p. HTML tags by default have some style associated with them. Using CSS we can modify or add some additional styling to the tag. The body tag got a background color, meaning anything that is inside the opening and closing <body> tags will have a light blue background (unless overwritten by another styling tag).
Let's see how this changes our web page. Remember last week's index.html file? Time to make it prettier!
Open up a blank file in your favorite code editor. Paste in the above css into that file. Save the file in the same directory as the index.html file we created last week. Name it style.css.
Congratulations, you've created a stylesheet!
Now we need to link this style sheet to our index file. Open up your index.html file. To link the stylesheet to this html file, you need to define the link in the header. (Reminder: the header all the stuff between the opening and closing <head> tags. The link will have a property of type which is text/css, a relationship (or rel) which is a stylesheet, and finally the location of the document with href.
Save your changes!
Since the index.html already contains a body, h1 and p tags, we should see the style immediately reflected. Open your index.html file in a browser. You should now see a light blue background and the header should be centered and white text.
Easy, right?
There's other ways to add style to your page besides tags.
Let's say you have 2 paragraph tags that you wanted styled different, and we want the style of the 2nd paragraph to match the link. You can also define style classes in your style sheet. To define a style class, you add a . to the front of the style name.
So maybe everything with the bluetext class would have blue text.
You can also define multiple types for a style. For example, if we want to be able to mimic the p tag style in non-p tags, we can also create a class name for it.
Now we can access the p tag styling for any tag.
Let's add the bluetext class to our 2nd paragraph tag, and add p and bluetext styling to our link.
Save your changes. Now when you refresh your application, the last 2 lines will be blue and the link text styling will match the other paragraphs.
CSS can get really complicated. You can define styles for certain tags or classes that also have a certain attribute set and beyond. The important thing is that we understand how to assign style to the page and how it impacts the look and feel of our page. Also the reason we use CSS styles and classes is because it's reusable. Instead of writing style for each element or tag, we can use stylesheets to define reusable styling. This makes our code easier to read and refactor.
Here are some great resources for CSS:
Now that we know how to style, we're ready to tackle dynamic components next week with JavaScript!
[If you are not sure what I am referencing, start at this blog post]
CSS, or Cascading Style Sheets, is our 2nd side of the web development language pyramid. Some will argue with me over calling CSS a language, but let the haters hate.
CSS is used to tell things where to sit on the page, how much space should around the rendered tag, what color the font should be, and many more things. While I'm not going to deep dive into stylesheets (a document of CSS elements), I want to make sure we have a good understanding of how style is used in HTML and how it manipulates the elements on the page.
We won't deep dive, because CSS can get a little messy and some companies have "perfected" CSS for us. If you have heard of Bootstrapping, this is one very popular way to make you pages look good with little effort. It has evolved into a great Web App framework too, but for now, we'll focus on the styling portion. It was invented be a couple people over at a little company called Twitter.
But back to pure CSS that we have to write ourselves!
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}So I stole some CSS samples from W3Schools to help us better understand how this is all working.
In this example, you may recognize a couple tags, like body, h1, and p. HTML tags by default have some style associated with them. Using CSS we can modify or add some additional styling to the tag. The body tag got a background color, meaning anything that is inside the opening and closing <body> tags will have a light blue background (unless overwritten by another styling tag).
Let's see how this changes our web page. Remember last week's index.html file? Time to make it prettier!
Open up a blank file in your favorite code editor. Paste in the above css into that file. Save the file in the same directory as the index.html file we created last week. Name it style.css.
Congratulations, you've created a stylesheet!
Now we need to link this style sheet to our index file. Open up your index.html file. To link the stylesheet to this html file, you need to define the link in the header. (Reminder: the header all the stuff between the opening and closing <head> tags. The link will have a property of type which is text/css, a relationship (or rel) which is a stylesheet, and finally the location of the document with href.
<link type="text/css" rel="stylesheet" href="style.css">Save your changes!
Since the index.html already contains a body, h1 and p tags, we should see the style immediately reflected. Open your index.html file in a browser. You should now see a light blue background and the header should be centered and white text.
Easy, right?
There's other ways to add style to your page besides tags.
Let's say you have 2 paragraph tags that you wanted styled different, and we want the style of the 2nd paragraph to match the link. You can also define style classes in your style sheet. To define a style class, you add a . to the front of the style name.
.bluetext {
color: blue;
}So maybe everything with the bluetext class would have blue text.
You can also define multiple types for a style. For example, if we want to be able to mimic the p tag style in non-p tags, we can also create a class name for it.
p, .p {
font-family: verdana;
font-size: 20px;
}Now we can access the p tag styling for any tag.
Let's add the bluetext class to our 2nd paragraph tag, and add p and bluetext styling to our link.
<p class="bluetext">And then I added more that I want to be in a new paragraph. </p>
<a href="https://people.sap.com/meredith.hassett" target="_blank" class="bluetext p">Meredith's Profile</a>Save your changes. Now when you refresh your application, the last 2 lines will be blue and the link text styling will match the other paragraphs.
CSS can get really complicated. You can define styles for certain tags or classes that also have a certain attribute set and beyond. The important thing is that we understand how to assign style to the page and how it impacts the look and feel of our page. Also the reason we use CSS styles and classes is because it's reusable. Instead of writing style for each element or tag, we can use stylesheets to define reusable styling. This makes our code easier to read and refactor.
Here are some great resources for CSS:
Now that we know how to style, we're ready to tackle dynamic components next week with JavaScript!
| User | Count |
|---|---|
| 11 | |
| 9 | |
| 5 | |
| 5 | |
| 4 | |
| 4 | |
| 4 | |
| 3 | |
| 3 | |
| 2 |
